/* Address Share for Neighbours — styles
   Covers: admin field-builder screen, WooCommerce My Account "My
   Addresses" tab (list + add/edit form + share modal), and the
   standalone public share page that opens from the QR code / link. */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');

:root {
	--chl-brand: #83B835;
	--chl-brand-hover: #6F9C2D;
	--chl-radius: 8px;
}

/* Brand font + button color — applied to the user-facing parts of the
   plugin (My Account tab, share modal, public share page). The
   wp-admin "Field Settings" screen intentionally keeps the default
   WordPress admin look, so it stays consistent with the rest of
   wp-admin. */

.chl-account-wrap,
.chl-modal-inner,
.chl-public-page,
.chl-wrap {
	font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	direction: rtl;
}

.chl-account-wrap .button,
.chl-modal-inner .button {
	background-color: var( --chl-brand );
	border-color: var( --chl-brand );
	color: #fff;
	border-radius: var( --chl-radius );
}

.chl-account-wrap .button:hover,
.chl-modal-inner .button:hover {
	background-color: var( --chl-brand-hover );
	border-color: var( --chl-brand-hover );
	color: #fff;
}

/* Delete stays red as a deliberate warning color, overriding the brand
   green above (same selector specificity, so this just needs to come
   after it in the file — kept here for clarity). */
.chl-account-wrap .chl-delete-btn {
	background-color: #fff;
	color: #a00;
	border-color: #a00;
}

.chl-account-wrap .chl-delete-btn:hover {
	background-color: #a00;
	color: #fff;
}

/* ---------- Admin: Field Settings screen ---------- */

.chl-wrap .chl-fields-table {
	margin-top: 16px;
	border-collapse: collapse;
}

.chl-wrap .chl-fields-table th,
.chl-wrap .chl-fields-table td {
	padding: 10px 12px;
	vertical-align: middle;
}

.chl-wrap .chl-fields-table input[type="text"] {
	width: 100%;
}

.chl-wrap .chl-fields-table select {
	max-width: 100%;
}

/* ---------- Front-end: My Account "My Addresses" ---------- */

.chl-account-wrap {
	margin-top: 10px;
}

.chl-add-house-btn {
	margin-bottom: 16px;
}

.chl-house-table {
	width: 100%;
	border-collapse: collapse;
}

.chl-house-table th,
.chl-house-table td {
	text-align: right;
	padding: 12px 10px;
	border-bottom: 1px solid #e2e2e2;
}

.chl-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.chl-actions .button {
	margin: 0;
}

/* Add / Edit form */

.chl-back-link {
	margin-bottom: 12px;
}

.chl-form-row {
	margin-bottom: 16px;
}

.chl-form-row label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
}

.chl-form-row input[type="text"],
.chl-form-row input[type="number"],
.chl-form-row input[type="email"],
.chl-form-row input[type="url"],
.chl-form-row input[type="date"],
.chl-form-row textarea,
.chl-form-row select {
	width: 100%;
	max-width: 480px;
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: var( --chl-radius );
}

.chl-required {
	color: #a00;
	margin: 0 4px;
}

/* Share / QR modal */

.chl-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba( 0, 0, 0, 0.55 );
	z-index: 100000;
	align-items: center;
	justify-content: center;
}

.chl-modal.chl-modal-open {
	display: flex;
}

.chl-modal-inner {
	background: #fff;
	border-radius: var( --chl-radius );
	padding: 28px 28px 24px;
	max-width: 360px;
	width: 90%;
	position: relative;
	text-align: center;
	box-shadow: 0 10px 40px rgba( 0, 0, 0, 0.25 );
}

.chl-modal-close {
	position: absolute;
	top: 10px;
	left: 14px;
	background: none;
	border: none;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: #555;
}

.chl-modal-close:hover {
	color: #000;
}

.chl-qr-canvas {
	display: flex;
	justify-content: center;
	margin: 16px 0;
}

.chl-share-link {
	width: 100%;
	text-align: center;
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: var( --chl-radius );
}

.chl-modal-actions {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
}

/* ---------- Standalone public share page ---------- */

.chl-public-page {
	margin: 0;
	padding: 32px 16px;
	background: #f4f4f4;
	display: flex;
	justify-content: center;
}

.chl-public-card {
	background: #fff;
	border-radius: var( --chl-radius );
	padding: 32px;
	max-width: 480px;
	width: 100%;
	box-shadow: 0 4px 24px rgba( 0, 0, 0, 0.08 );
}

.chl-public-card h1 {
	margin-top: 0;
	font-size: 26px;
}

.chl-verified-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba( 131, 184, 53, 0.12 );
	color: var( --chl-brand-hover );
	font-size: 13px;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 999px;
	margin-bottom: 14px;
}

.chl-verified-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var( --chl-brand );
	color: #fff;
	font-size: 10px;
	line-height: 1;
}

.chl-delivery-box {
	background: rgba( 131, 184, 53, 0.08 );
	border: 1px solid rgba( 131, 184, 53, 0.35 );
	border-radius: var( --chl-radius );
	padding: 16px 20px;
	margin-bottom: 24px;
}

.chl-delivery-box h2 {
	margin: 0 0 8px;
	font-size: 16px;
	color: var( --chl-brand-hover );
}

.chl-delivery-table {
	margin-bottom: 0;
}

.chl-delivery-table th,
.chl-delivery-table td {
	border-bottom: 1px solid rgba( 131, 184, 53, 0.2 );
}

.chl-public-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 24px;
}

.chl-public-table th,
.chl-public-table td {
	text-align: right;
	padding: 10px 0;
	border-bottom: 1px solid #eee;
	font-size: 15px;
}

.chl-public-table th {
	color: #555;
	font-weight: 600;
	width: 40%;
}

.chl-public-qr {
	text-align: center;
	padding-top: 12px;
	border-top: 1px solid #eee;
}

.chl-public-qr small {
	color: #999;
}