/* Functional styles for the listings plugin. Visual theming lives in the theme's main.css. */

.eshn-notice { padding: 1em 1.1em; border-radius: var(--eshn-radius-sm, 8px); background: var(--eshn-surface-2, #f3f4f6); margin-bottom: 1.25em; box-shadow: var(--eshn-shadow-sm, none); }
.eshn-notice-error { background: #fdecea; color: #7a1f13; }
.eshn-notice-error ul { margin: 0; padding-inline-start: 1.2em; }

.eshn-form { background: var(--eshn-surface, #fff); border-radius: var(--eshn-radius, 12px); padding: 1.5rem; box-shadow: var(--eshn-shadow-sm, none); }
.eshn-form .eshn-field { margin-bottom: 1.1em; display: flex; flex-direction: column; gap: .35em; }
.eshn-form label { font-weight: 600; font-size: .9em; }
.eshn-form input[type=text],
.eshn-form input[type=number],
.eshn-form input[type=tel],
.eshn-form input[type=email],
.eshn-form input[type=url],
.eshn-form input[type=file],
.eshn-form select,
.eshn-form textarea {
	padding: .65em .8em;
	border: 1px solid var(--eshn-border, #d8dbe0);
	border-radius: var(--eshn-radius-sm, 8px);
	font: inherit;
	width: 100%;
	box-sizing: border-box;
	background: var(--eshn-surface, #fff);
	transition: border-color .15s var(--eshn-ease, ease), box-shadow .15s var(--eshn-ease, ease);
}
.eshn-form input[type=text]:focus,
.eshn-form input[type=number]:focus,
.eshn-form input[type=tel]:focus,
.eshn-form input[type=email]:focus,
.eshn-form input[type=url]:focus,
.eshn-form select:focus,
.eshn-form textarea:focus {
	outline: none;
	border-color: var(--eshn-primary, #1a7f5a);
	box-shadow: 0 0 0 3px rgba(53, 89, 233, .12);
}
.eshn-current-thumb { display: inline-block; margin-top: .5em; }
.eshn-current-thumb img { border-radius: var(--eshn-radius-sm, 8px); box-shadow: var(--eshn-shadow-sm, none); }

/* Locked country/phone-dial display: the visitor already chose a country at
   registration, so both are read-only here instead of editable form controls. */
.eshn-form .eshn-locked-value {
	padding: .65em .8em;
	border: 1px solid var(--eshn-border, #d8dbe0);
	border-radius: var(--eshn-radius-sm, 8px);
	background: var(--eshn-surface-2, #f3f4f6);
	color: var(--eshn-text-muted, #666b72);
}

/* Same fixed-dial-prefix pattern as the registration form's phone field
   (login.css .eshn-phone-field) — kept ltr so the dial box always sits on
   the same side as the number, even on an RTL page. */
.eshn-form .eshn-phone-field {
	display: flex;
	align-items: stretch;
	direction: ltr;
	border: 1px solid var(--eshn-border, #d8dbe0);
	border-radius: var(--eshn-radius-sm, 8px);
	overflow: hidden;
	transition: border-color .15s var(--eshn-ease, ease), box-shadow .15s var(--eshn-ease, ease);
}
.eshn-form .eshn-phone-field:focus-within {
	border-color: transparent;
	box-shadow: 0 0 0 3px rgba(53, 89, 233, .12);
}
.eshn-form .eshn-phone-dial {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	padding: 0 .9em;
	background: var(--eshn-surface-2, #f3f4f6);
	color: var(--eshn-text-muted, #666b72);
	font-weight: 600;
	border-inline-end: 1px solid var(--eshn-border, #d8dbe0);
}
.eshn-form .eshn-phone-field input {
	flex: 1;
	min-width: 0;
	text-align: left;
	border: none !important;
	border-radius: 0 !important;
}
.eshn-form .eshn-phone-field input:focus {
	box-shadow: none !important;
	outline: none;
}

/* Same fixed-box-glued-to-input pattern as the phone field above, but the
   currency code trails the number (mirrors "500 JOD" reading order) instead
   of leading it — kept ltr for the same reason: digits and currency codes
   read left-to-right regardless of the surrounding page direction. */
.eshn-form .eshn-price-field {
	display: flex;
	align-items: stretch;
	direction: ltr;
	border: 1px solid var(--eshn-border, #d8dbe0);
	border-radius: var(--eshn-radius-sm, 8px);
	overflow: hidden;
	transition: border-color .15s var(--eshn-ease, ease), box-shadow .15s var(--eshn-ease, ease);
}
.eshn-form .eshn-price-field:focus-within {
	border-color: transparent;
	box-shadow: 0 0 0 3px rgba(53, 89, 233, .12);
}
.eshn-form .eshn-price-currency {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	padding: 0 .9em;
	background: var(--eshn-surface-2, #f3f4f6);
	color: var(--eshn-text-muted, #666b72);
	font-weight: 600;
	border-inline-start: 1px solid var(--eshn-border, #d8dbe0);
}
.eshn-form .eshn-price-field input {
	flex: 1;
	min-width: 0;
	text-align: left;
	border: none !important;
	border-radius: 0 !important;
}
.eshn-form .eshn-price-field input:focus {
	box-shadow: none !important;
	outline: none;
}

.eshn-field-hint { font-size: .8em; color: var(--eshn-text-muted, #666b72); }
.eshn-field-hint-warn { color: #b8860b; }

.eshn-agree-field { background: var(--eshn-surface-2, #f1f3f8); border-radius: var(--eshn-radius-sm, 8px); padding: .9em 1em; }
.eshn-checkbox-label { display: flex; align-items: flex-start; gap: .6em; font-weight: 500 !important; font-size: .92em; line-height: 1.5; cursor: pointer; }
.eshn-checkbox-label input[type=checkbox] { width: 1.15em; height: 1.15em; flex: 0 0 auto; margin-top: .15em; accent-color: var(--eshn-primary, #3559e9); }
.eshn-checkbox-label a { color: var(--eshn-primary, #3559e9); font-weight: 600; }
.eshn-current-gallery { display: flex; flex-wrap: wrap; gap: .5em; margin-top: .4em; }
.eshn-current-gallery img { border-radius: var(--eshn-radius-sm, 8px); object-fit: cover; width: 60px; height: 60px; box-shadow: var(--eshn-shadow-sm, none); }

.eshn-fav-btn {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	border: 1px solid var(--eshn-border, #d8dbe0);
	background: var(--eshn-surface, #fff);
	border-radius: 999px;
	padding: .45em 1em;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	box-shadow: var(--eshn-shadow-sm, none);
	transition: transform .15s var(--eshn-ease, ease), box-shadow .15s var(--eshn-ease, ease), color .15s var(--eshn-ease, ease), border-color .15s var(--eshn-ease, ease);
}
.eshn-fav-btn:hover { transform: translateY(-2px); box-shadow: var(--eshn-shadow-md, none); }
.eshn-fav-btn.is-favorited { color: #b8860b; border-color: #b8860b; }

.eshn-share { display: flex; align-items: center; gap: .5em; flex-wrap: wrap; }
.eshn-share-btn {
	border: 1px solid var(--eshn-border, #d8dbe0);
	border-radius: 999px;
	padding: .4em .9em;
	font-size: .85em;
	font-weight: 500;
	text-decoration: none;
	background: var(--eshn-surface, #fff);
	color: var(--eshn-text, inherit);
	cursor: pointer;
	font-family: inherit;
	transition: transform .15s var(--eshn-ease, ease), box-shadow .15s var(--eshn-ease, ease);
}
.eshn-share-btn:hover { transform: translateY(-2px); box-shadow: var(--eshn-shadow-sm, none); }

.eshn-manage-list { background: var(--eshn-surface, #fff); border-radius: var(--eshn-radius, 12px); box-shadow: var(--eshn-shadow-sm, none); padding: .25em 1.25rem; }
.eshn-manage-row { display: flex; align-items: center; gap: 1em; padding: .9em 0; border-bottom: 1px solid var(--eshn-border, #e5e7eb); }
.eshn-manage-row:last-child { border-bottom: none; }
.eshn-manage-thumb img { border-radius: var(--eshn-radius-sm, 8px); object-fit: cover; }
.eshn-manage-info { flex: 1; display: flex; flex-direction: column; gap: .25em; }
.eshn-manage-title { font-weight: 700; text-decoration: none; color: var(--eshn-text, inherit); }
.eshn-manage-price { color: var(--eshn-primary, #1a7f5a); font-weight: 700; font-size: .9em; }
.eshn-manage-actions { display: flex; gap: .9em; font-size: .9em; }
.eshn-manage-actions a { text-decoration: none; font-weight: 500; }
.eshn-status { font-size: .72em; font-weight: 700; padding: .15em .7em; border-radius: 999px; width: fit-content; }
.eshn-status-available { background: #e6f4ea; color: #1e7e34; }
.eshn-status-sold { background: #fdecea; color: #b02a1c; }
.eshn-status-expired { background: #f1f3f8; color: #6b7280; }
.eshn-manage-expiry,
.eshn-manage-date { font-size: .78em; color: var(--eshn-text-muted, #6b7280); }
.eshn-delete-link { color: #b02a1c; }

.eshn-inbox { background: var(--eshn-surface, #fff); border-radius: var(--eshn-radius, 12px); box-shadow: var(--eshn-shadow-sm, none); overflow: hidden; }
.eshn-inbox-row { display: flex; align-items: center; gap: .85em; padding: .9em 1.1em; text-decoration: none; color: inherit; border-bottom: 1px solid var(--eshn-border, #e5e7eb); transition: background-color .15s var(--eshn-ease, ease); }
.eshn-inbox-row:last-child { border-bottom: none; }
.eshn-inbox-row:hover { background: var(--eshn-surface-2, #f3f4f6); }
.eshn-inbox-row.is-unread { background: rgba(53, 89, 233, .06); font-weight: 600; }
.eshn-inbox-thumb img { border-radius: var(--eshn-radius-sm, 8px); }
.eshn-inbox-body { flex: 1; display: flex; flex-direction: column; gap: .15em; min-width: 0; }
.eshn-inbox-title { display: flex; align-items: center; gap: .5em; }
.eshn-inbox-snippet { font-weight: 400; font-size: .85em; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eshn-inbox-badge { background: var(--eshn-primary, #1a7f5a); color: #fff; border-radius: 999px; font-size: .75em; font-weight: 700; padding: .1em .6em; }

.eshn-chat { display: flex; flex-direction: column; height: 60vh; border-radius: var(--eshn-radius, 12px); overflow: hidden; background: var(--eshn-surface, #fff); box-shadow: var(--eshn-shadow-sm, none); }
.eshn-chat-header { display: flex; align-items: center; gap: .75em; padding: .85em 1.1em; border-bottom: 1px solid var(--eshn-border, #e5e7eb); font-weight: 600; }
.eshn-chat-header a { text-decoration: none; }
.eshn-chat-header-user { display: inline-flex; align-items: center; gap: .4em; }
.eshn-chat-messages { flex: 1; overflow-y: auto; padding: 1.1em; display: flex; flex-direction: column; gap: .55em; }
.eshn-msg { max-width: 75%; padding: .55em .9em; border-radius: var(--eshn-radius, 12px); background: var(--eshn-surface-2, #f3f4f6); line-height: 1.5; }
.eshn-msg-mine { align-self: flex-end; background: var(--eshn-primary, #1a7f5a); color: #fff; border-end-end-radius: 4px; }
.eshn-msg-theirs { align-self: flex-start; border-end-start-radius: 4px; }
.eshn-chat-form { display: flex; gap: .6em; padding: .85em; border-top: 1px solid var(--eshn-border, #e5e7eb); }
.eshn-chat-form textarea { flex: 1; resize: none; height: 2.7em; padding: .6em .8em; border-radius: var(--eshn-radius-sm, 8px); border: 1px solid var(--eshn-border, #e5e7eb); font: inherit; }
.eshn-chat-form textarea:focus { outline: none; border-color: var(--eshn-primary, #1a7f5a); }

.eshn-btn-chat { background: var(--eshn-accent, #d98c00); color: #fff; }