/**
 * WhatsWhat Core — structural styles only.
 * Heavy visual styling belongs to Elementor; these rules make the
 * widgets usable out of the box and expose brand colours as variables.
 */

:root {
	--ww-black: #000000;
	--ww-white: #ffffff;
	--ww-grey-dark: #494949;
	--ww-grey-mid: #7c7a7a;
	--ww-coral: #ff5d73;
	--ww-blush: #fff6f7;
}

/* ---- Notices ---- */
.ww-notice {
	padding: 12px 16px;
	border-radius: 6px;
	margin: 0 0 16px;
	font-size: 15px;
}
.ww-notice--success { background: #eef9f1; border: 1px solid #9bd9ad; color: #14532d; }
.ww-notice--error   { background: #fdeef0; border: 1px solid var(--ww-coral); color: #8b1d2c; }
.ww-notice--warning { background: #fff8e6; border: 1px solid #e8c66a; color: #6b5413; }

/* ---- Forms ---- */
.ww-form .ww-field { margin: 0 0 16px; }
.ww-form label { display: block; font-weight: 600; color: var(--ww-grey-dark); margin-bottom: 4px; }
.ww-form input[type="text"],
.ww-form input[type="email"],
.ww-form input[type="tel"],
.ww-form input[type="url"],
.ww-form input[type="number"],
.ww-form input[type="password"],
.ww-form input[type="search"],
.ww-form input[type="datetime-local"],
.ww-form select,
.ww-form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--ww-grey-mid);
	border-radius: 6px;
	font-size: 15px;
	background: var(--ww-white);
	color: var(--ww-black);
}
.ww-form input:focus, .ww-form select:focus, .ww-form textarea:focus {
	outline: 2px solid var(--ww-coral);
	outline-offset: 1px;
	border-color: var(--ww-coral);
}
.ww-field-row { display: flex; flex-wrap: wrap; gap: 16px; }
.ww-field-row .ww-field { flex: 1 1 180px; }
.ww-field--checkbox label { font-weight: 400; }
.ww-fieldset { border: 1px solid var(--ww-grey-mid); border-radius: 8px; padding: 16px; margin: 0 0 16px; }
.ww-fieldset legend { font-weight: 700; padding: 0 8px; }
.ww-hint { color: var(--ww-grey-mid); font-size: 13px; }

/* Honeypot — visually hidden, still in the accessibility tree trap for bots. */
.ww-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---- Buttons ----
   The UAE addons ship a CSS reset (reset.css) that paints every
   button / [type=submit] with a transparent background and its own
   accent colour at specificity (0,2,0) via :not(:disabled), which
   ties and out-cascades our class rules. We mark the core visual
   properties !important so plugin buttons keep their brand look
   regardless of where they render. */
.ww-button {
	display: inline-block;
	padding: 10px 22px;
	border: 1px solid transparent !important;
	border-radius: 6px;
	background: var(--ww-black) !important;
	color: var(--ww-white) !important;
	font-size: 15px;
	font-weight: 600 !important;
	cursor: pointer;
	text-decoration: none;
	line-height: 1.4;
}
.ww-button--primary { background: var(--ww-coral) !important; }
.ww-button--ghost { background: transparent !important; color: var(--ww-grey-dark) !important; border-color: var(--ww-grey-mid) !important; }
.ww-button--danger { background: transparent !important; color: var(--ww-coral) !important; border-color: var(--ww-coral) !important; }
.ww-button--small { padding: 5px 12px; font-size: 13px; }
.ww-button:hover { opacity: 0.88; color: var(--ww-white) !important; }
.ww-button--ghost:hover { color: var(--ww-grey-dark) !important; }
.ww-button--danger:hover { color: var(--ww-coral) !important; }

/* ---- Listing grid ---- */
/* Mobile-first: two cards per row on phones (marketplace pattern),
   wider tracks from tablet up. */
.ww-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 12px;
}
@media (min-width: 768px) {
	.ww-grid {
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
		gap: 20px;
	}
}
.ww-card {
	background: var(--ww-white);
	border: 1px solid #e7e7e7;
	border-radius: 10px;
	overflow: hidden;
	transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.ww-card:hover {
	box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.18);
	transform: translateY(-2px);
	border-color: #dcdcdc;
}
.ww-card__title a:hover { color: var(--ww-coral); }
.ww-card__placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #f6f6f6, #e9e9e9); }
.ww-listing-card { position: relative; }
.ww-listing-card.is-featured { border-color: var(--ww-coral); }
.ww-card__featured {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
	background: var(--ww-coral);
	color: var(--ww-white);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 3px 10px;
	border-radius: 999px;
}
.ww-button--boost { background: var(--ww-coral) !important; color: var(--ww-white) !important; border-color: var(--ww-coral) !important; }
.ww-listing-card .ww-card__media { display: block; aspect-ratio: 4 / 3; background: #f2f2f2; }
.ww-listing-card .ww-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ww-card__body { padding: 12px 14px 14px; }
.ww-card__title { font-size: 16px; margin: 0 0 6px; }
.ww-card__title a { color: var(--ww-black); text-decoration: none; }
.ww-card__price { color: var(--ww-coral); font-weight: 700; margin: 0 0 4px; }
.ww-card__negotiable { color: var(--ww-grey-mid); font-weight: 400; font-size: 12px; margin-left: 6px; }
.ww-card__free { color: var(--ww-coral); }
.ww-card__location { color: var(--ww-grey-mid); font-size: 13px; margin: 0; }
.ww-empty { color: var(--ww-grey-mid); }

/* ---- Filters ---- */
.ww-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
	margin: 0 0 24px;
	background: var(--ww-white);
	border: 1px solid #ececec;
	border-radius: 12px;
	padding: 16px;
	box-shadow: 0 4px 16px -8px rgba(0, 0, 0, 0.08);
}
.ww-filters .ww-field { margin: 0; flex: 1 1 150px; }
.ww-filters .ww-field--price { display: flex; gap: 8px; }
.ww-filters .ww-submit { margin: 0; display: flex; gap: 8px; }

/* ---- Pagination ---- */
.ww-pagination { margin: 24px 0 0; text-align: center; }
.ww-pagination .page-numbers {
	display: inline-block;
	padding: 6px 12px;
	margin: 0 2px;
	border: 1px solid var(--ww-grey-mid);
	border-radius: 6px;
	color: var(--ww-grey-dark);
	text-decoration: none;
}
.ww-pagination .page-numbers.current { background: var(--ww-coral); border-color: var(--ww-coral); color: var(--ww-white); }

/* ---- Single listing ---- */
/* Hello theme prints the detail view inside .site-main; the theme h1 is
   suppressed (the template carries its own). */
body.single-ww_ad .site-main,
body.single-ww_hype .site-main {
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px 16px 56px;
}
@media (min-width: 768px) {
	body.single-ww_ad .site-main,
	body.single-ww_hype .site-main { padding: 32px 24px 72px; }
}
.ww-single__back { margin: 0 0 16px; }
.ww-single__back a,
.ww-article__back a { color: var(--ww-grey-mid); font-weight: 600; font-size: 14px; text-decoration: none; }
.ww-single__back a:hover,
.ww-article__back a:hover { color: var(--ww-coral); }
.ww-single__layout { display: grid; grid-template-columns: 2fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 820px) { .ww-single__layout { grid-template-columns: 1fr; } }
.ww-gallery__stage {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 12px;
	background: #f2f2f2;
}
.ww-gallery__stage img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; display: block; }
.ww-gallery__thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ww-gallery__thumb { border: 2px solid transparent; border-radius: 8px; padding: 0; background: none; cursor: pointer; overflow: hidden; }
.ww-gallery__thumb.is-active { border-color: var(--ww-coral); }
.ww-gallery__thumb img { display: block; width: 72px; height: 72px; object-fit: cover; }
.ww-single__title { margin: 18px 0 4px; font-size: 26px; line-height: 1.25; }
@media (min-width: 768px) { .ww-single__title { font-size: 32px; } }
.ww-single__price { font-size: 24px; color: var(--ww-coral); font-weight: 800; margin: 0 0 10px; }
.ww-single__description { color: #222222; line-height: 1.7; }
.ww-single__meta { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 16px; }
.ww-tag {
	background: #f4f4f4;
	color: var(--ww-grey-dark);
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 13px;
}
.ww-tag--location { background: var(--ww-black); color: var(--ww-white); }
.ww-tag--featured { background: var(--ww-coral); color: var(--ww-white); font-weight: 700; }
.ww-owner-card { padding: 22px; }
@media (min-width: 821px) {
	.ww-single__sidebar .ww-owner-card { position: sticky; top: 96px; }
}
.ww-owner-card__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #fff1f3;
	color: var(--ww-coral);
	font-size: 22px;
	font-weight: 800;
	margin-bottom: 10px;
}
.ww-owner-card .ww-button { display: block; width: 100%; text-align: center; margin-top: 10px; box-sizing: border-box; }
.ww-owner-card .ww-report .ww-button { width: auto; display: inline-block; }
.ww-owner-card__name { margin: 0 0 2px; font-size: 18px; }
.ww-owner-card__since { color: var(--ww-grey-mid); font-size: 13px; margin: 0 0 14px; }
.ww-owner-card .ww-button { width: 100%; text-align: center; margin-bottom: 8px; }
.ww-owner-card__hint { color: var(--ww-grey-mid); font-size: 13px; margin: 8px 0 0; }

/* ---- Dashboard ---- */
.ww-dashboard__topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid #ececec;
}
.ww-dashboard__greeting { color: var(--ww-grey-dark); font-size: 15px; }
.ww-dash-section { margin: 0 0 32px; }
.ww-dash-table { width: 100%; border-collapse: collapse; }
.ww-dash-table th, .ww-dash-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #eee; }
.ww-dash-table th { color: var(--ww-grey-mid); font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; }
.ww-dash__actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ww-status { font-size: 13px; font-weight: 600; }
.ww-status--publish { color: #15803d; }
.ww-status--ww_pending { color: #a16207; }
.ww-status--ww_expired, .ww-status--ww_ended, .ww-status--ww_closed { color: var(--ww-grey-mid); }
.ww-status--ww_rejected, .ww-status--ww_taken_down { color: var(--ww-coral); }
.ww-inline-form { display: inline-block; margin-left: 10px; }

/* On phones the 4-column listings table would overflow; collapse each
   row into a stacked card with full-width action buttons. */
@media (max-width: 600px) {
	.ww-dash-table thead { display: none; }
	.ww-dash-table,
	.ww-dash-table tbody,
	.ww-dash-table tr,
	.ww-dash-table td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}
	.ww-dash-table tr {
		border: 1px solid #ececec;
		border-radius: 12px;
		padding: 12px 14px;
		margin: 0 0 12px;
	}
	.ww-dash-table td { border: 0; padding: 3px 0; }
	.ww-dash-table .ww-dash__title { font-size: 16px; font-weight: 700; margin-bottom: 2px; }
	.ww-dash__actions { margin-top: 10px; }
	.ww-dash__actions .ww-button { flex: 1 1 auto; text-align: center; }
}

/* ---- Auth ---- */
.ww-auth { max-width: 460px; }
.ww-auth__tabs { display: flex; gap: 4px; margin: 0 0 18px; border-bottom: 2px solid #eee; }
.ww-auth__tab { padding: 10px 18px; color: var(--ww-grey-mid); text-decoration: none; font-weight: 600; }
.ww-auth__tab.is-active { color: var(--ww-black); border-bottom: 2px solid var(--ww-coral); margin-bottom: -2px; }
.ww-link { color: var(--ww-coral); margin-left: 12px; }
.ww-button--google {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	background: var(--ww-white);
	color: var(--ww-grey-dark);
	border: 1px solid var(--ww-grey-mid);
	margin-bottom: 4px;
}
.ww-button--google:hover { color: var(--ww-black); background: #f7f7f7; opacity: 1; }
.ww-auth__divider {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--ww-grey-mid);
	font-size: 13px;
	margin: 14px 0;
}
.ww-auth__divider::before,
.ww-auth__divider::after { content: ''; flex: 1; border-top: 1px solid #e7e7e7; }

/* ---- Inbox ---- */
.ww-inbox__layout { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; align-items: start; }
@media (max-width: 820px) {
	.ww-inbox__layout { grid-template-columns: 1fr; }
	/* On phones, show the open thread above the list. */
	.ww-inbox__layout.has-open-thread .ww-inbox__thread { order: -1; }
}
.ww-inbox__heading { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.ww-conversation {
	display: block;
	position: relative;
	padding: 12px 14px;
	border: 1px solid #e7e7e7;
	border-radius: 10px;
	margin: 0 0 8px;
	text-decoration: none;
	color: var(--ww-grey-dark);
	background: var(--ww-white);
}
.ww-conversation.is-open { border-color: var(--ww-coral); }
.ww-conversation.has-unread { border-left: 4px solid var(--ww-coral); }
.ww-conversation__who { display: block; font-weight: 700; color: var(--ww-black); }
.ww-conversation__listing { display: block; font-size: 13px; color: var(--ww-coral); margin: 2px 0; }
.ww-conversation__snippet { display: block; font-size: 13px; color: var(--ww-grey-mid); }
.ww-conversation__count {
	position: absolute;
	top: 12px;
	right: 12px;
	background: var(--ww-coral);
	color: var(--ww-white);
	border-radius: 999px;
	min-width: 22px;
	height: 22px;
	line-height: 22px;
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	padding: 0 6px;
}
.ww-unread-badge {
	background: var(--ww-coral);
	color: var(--ww-white);
	border-radius: 999px;
	min-width: 20px;
	height: 20px;
	line-height: 20px;
	display: inline-block;
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	padding: 0 6px;
	vertical-align: middle;
}
.ww-inbox__thread { background: var(--ww-white); border: 1px solid #e7e7e7; border-radius: 10px; padding: 16px; }
.ww-inbox__placeholder { margin: 40px 0; text-align: center; }
.ww-thread__header { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 12px; }
.ww-thread__with { margin: 0; font-size: 17px; }
.ww-thread__listing { font-size: 13px; color: var(--ww-coral); text-decoration: none; }
.ww-thread__tools summary { cursor: pointer; color: var(--ww-grey-mid); font-size: 13px; }
.ww-thread__tools-menu { position: relative; background: var(--ww-white); border: 1px solid #e7e7e7; border-radius: 8px; padding: 12px; margin-top: 6px; min-width: 220px; }
.ww-thread__tools-menu form { margin: 0 0 8px; }
.ww-thread__messages { max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; }
.ww-message { max-width: 75%; align-self: flex-start; }
.ww-message.is-mine { align-self: flex-end; text-align: right; }
.ww-message__body {
	display: inline-block;
	background: #f4f4f4;
	color: var(--ww-black);
	border-radius: 12px 12px 12px 2px;
	padding: 10px 14px;
	font-size: 14px;
	text-align: left;
}
.ww-message.is-mine .ww-message__body { background: var(--ww-coral); color: var(--ww-white); border-radius: 12px 12px 2px 12px; }
.ww-message__time { font-size: 11px; color: var(--ww-grey-mid); margin-top: 2px; }
.ww-thread__reply { display: flex; gap: 8px; margin-top: 14px; align-items: flex-end; }
.ww-thread__reply textarea { flex: 1; resize: vertical; }

/* Message seller / report on single view */
.ww-message-seller textarea { width: 100%; margin-bottom: 8px; padding: 10px 12px; border: 1px solid var(--ww-grey-mid); border-radius: 6px; }
.ww-report { margin-top: 10px; }
.ww-report summary { cursor: pointer; color: var(--ww-grey-mid); font-size: 13px; }
.ww-report__form { margin-top: 8px; }

/* ---- Desktop mega menu (nav widget carrying .ww-mega-nav) ----
   UAE toggles dropdowns with visibility/opacity, never display, so the
   panel can be a permanent CSS grid and still open/close on hover. */
@media (min-width: 1025px) {
	.elementor-widget-navigation-menu.ww-mega-nav {
		position: relative;
	}
	.elementor-widget-navigation-menu.ww-mega-nav .hfe-nav-menu > li.menu-item-has-children {
		position: static;
	}
	.elementor-widget-navigation-menu.ww-mega-nav .hfe-nav-menu > li.menu-item-has-children > .sub-menu {
		left: 50%;
		transform: translateX(-50%);
		top: 100%;
		width: min(960px, 80vw);
		/* No fade: UAE's 300ms transition keeps a closing panel mouse-active
		   while it fades, re-opening it when the pointer crosses that area. */
		transition: none;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 2px 28px;
		align-items: start;
		padding: 26px 30px 28px;
		background: var(--ww-white);
		border-top: 3px solid var(--ww-coral);
		border-radius: 0 0 14px 14px;
		box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.18);
	}
	.elementor-widget-navigation-menu.ww-mega-nav .hfe-nav-menu > li.menu-item-has-children > .sub-menu a {
		white-space: normal;
		padding: 9px 10px;
		border-radius: 6px;
	}
	.elementor-widget-navigation-menu.ww-mega-nav .hfe-nav-menu > li.menu-item-has-children > .sub-menu a:hover {
		background: #FFF1F3;
	}
	/* Third level (e.g. Trends, Showbiz children) sits inline under its
	   parent in the panel, collapsed until the category is clicked
	   (ww-header.js toggles .ww-open). visibility must track the panel
	   via inherit — forcing it visible would leave the closed panels
	   mouse-active (opacity:0 still takes hover), popping them open
	   whenever the pointer moves near the header. */
	.elementor-widget-navigation-menu.ww-mega-nav .sub-menu .menu-item-has-children > .sub-menu {
		position: static !important;
		visibility: inherit !important;
		opacity: 1 !important;
		transform: none;
		transition: none;
		display: none;
		min-width: 0;
		box-shadow: none;
		border: 0;
		border-left: 2px solid #F0F0F0;
		margin: 2px 0 4px 12px;
		padding: 0;
	}
	.elementor-widget-navigation-menu.ww-mega-nav .sub-menu li.ww-open > .sub-menu {
		display: block;
	}
	.elementor-widget-navigation-menu.ww-mega-nav .sub-menu .menu-item-has-children > .sub-menu a {
		font-size: 13px;
		padding: 6px 10px;
	}
	.elementor-widget-navigation-menu.ww-mega-nav .sub-menu .sub-arrow i {
		display: inline-block;
		transition: transform 0.15s ease;
	}
	.elementor-widget-navigation-menu.ww-mega-nav .sub-menu li.ww-open > .hfe-has-submenu-container .sub-arrow i {
		transform: rotate(180deg);
	}
}

/* ---- Header flyout CTAs (menu items with .ww-menu-cta class) ---- */
.hfe-nav-menu li.ww-menu-cta { margin: 10px 16px 0; }
.hfe-nav-menu li.ww-menu-cta > a,
.hfe-nav-menu li.ww-menu-cta > .hfe-menu-item {
	display: block;
	background: var(--ww-coral);
	color: var(--ww-white) !important;
	text-align: center;
	border-radius: 8px;
	font-weight: 700;
	padding: 12px 16px;
}
.hfe-nav-menu li.ww-menu-cta--alt > a,
.hfe-nav-menu li.ww-menu-cta--alt > .hfe-menu-item {
	background: var(--ww-black);
}
.hfe-nav-menu li.ww-menu-cta--ghost > a,
.hfe-nav-menu li.ww-menu-cta--ghost > .hfe-menu-item {
	background: transparent;
	border: 1px solid var(--ww-grey-mid);
	color: var(--ww-black) !important;
}
.hfe-nav-menu li.ww-menu-cta--ghost > a:hover,
.hfe-nav-menu li.ww-menu-cta--ghost > .hfe-menu-item:hover {
	border-color: var(--ww-coral);
	color: var(--ww-coral) !important;
	opacity: 1;
}
.hfe-nav-menu li.ww-menu-cta > a:hover,
.hfe-nav-menu li.ww-menu-cta > .hfe-menu-item:hover {
	opacity: 0.88;
	color: var(--ww-white) !important;
}

/* ---- Single Updates article (Hello theme prints the h1; the plugin
        injects .ww-article__* via the_content) ---- */
body.single-post .site-main {
	max-width: 780px;
	margin: 0 auto;
	padding: 28px 16px 56px;
}
body.single-post .page-header { padding: 0; margin: 0; }
body.single-post .entry-title {
	font-size: 28px;
	line-height: 1.25;
	font-weight: 800;
	color: var(--ww-black);
	margin: 0 0 12px;
}
@media (min-width: 768px) {
	body.single-post .entry-title { font-size: 38px; }
}
.ww-article__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.ww-article__meta .ww-update-card__badge { margin: 0; text-decoration: none; }
.ww-article__meta .ww-update-card__badge:hover { background: var(--ww-coral); color: var(--ww-white); }
.ww-article__meta time { color: var(--ww-grey-mid); font-size: 14px; }
.ww-article__cover { margin: 0 0 24px; }
.ww-article__cover img { width: 100%; height: auto; border-radius: 14px; display: block; }
.ww-article__body { font-size: 17px; line-height: 1.75; color: #222222; }
.ww-article__body img { border-radius: 12px; height: auto; max-width: 100%; }
.ww-article__body h2, .ww-article__body h3 { margin: 1.4em 0 0.5em; line-height: 1.3; }
.ww-article__body a { color: var(--ww-coral); }
.ww-article__body blockquote {
	border-left: 3px solid var(--ww-coral);
	margin: 1.2em 0;
	padding: 4px 0 4px 18px;
	color: var(--ww-grey-dark);
	font-style: italic;
}
.ww-article__back { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid #ececec; }

/* ---- Search bar (hero + inline) ---- */
.ww-search { display: flex; gap: 8px; width: 100%; max-width: 640px; }
.ww-search__input {
	flex: 1;
	min-width: 0;
	padding: 13px 18px;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	font-size: 16px;
	background: var(--ww-white);
	color: var(--ww-black);
}
.ww-search__input:focus {
	outline: 2px solid var(--ww-coral);
	outline-offset: 1px;
	border-color: var(--ww-coral);
}
.ww-search__submit { border-radius: 10px; padding: 12px 26px; }

/* ---- Home hero (container carrying .ww-hero) ---- */
.ww-hero .ww-search { margin: 0 auto; }
.ww-hero .ww-chips { justify-content: center; }

/* ---- Category chips ---- */
.ww-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ww-chip {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid #e3e3e3;
	border-radius: 999px;
	background: var(--ww-white);
	color: var(--ww-grey-dark);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.ww-chip:hover { border-color: var(--ww-coral); color: var(--ww-coral); background: #fff1f3; }
.ww-chip.is-active { background: var(--ww-coral); border-color: var(--ww-coral); color: var(--ww-white); }

/* ---- Updates (blog) cards ---- */
.ww-updates-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px)  { .ww-updates-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 1025px) { .ww-updates-grid { grid-template-columns: repeat(3, 1fr); } }
.ww-update-card .ww-card__media { display: block; aspect-ratio: 16 / 9; background: #f2f2f2; }
.ww-update-card .ww-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ww-update-card__badge {
	display: inline-block;
	background: #fff1f3;
	color: var(--ww-coral);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: 999px;
	padding: 3px 10px;
	margin: 0 0 8px;
}
.ww-update-card__date { color: var(--ww-grey-mid); font-size: 13px; }

/* ---- Image previews ---- */
.ww-image-previews, .ww-existing-images { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ww-image-previews img, .ww-existing-images img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; display: block; }

/* Each thumb gets a small × on hover (always visible on touch devices). */
.ww-img-item { position: relative; display: inline-block; }
.ww-img-remove {
	position: absolute;
	top: -7px;
	right: -7px;
	width: 22px;
	height: 22px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--ww-coral);
	color: var(--ww-white);
	font-size: 15px;
	line-height: 22px;
	text-align: center;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.ww-img-item:hover .ww-img-remove,
.ww-img-remove:focus-visible { opacity: 1; }
@media (hover: none) {
	.ww-img-remove { opacity: 1; }
}

/* ==========================================================================
   App pages (installer-built): Post an Ad/Hype, My Account, Dashboard,
   Inbox, Account Settings + info pages. The installer wraps each shortcode
   in a blush page-header band + a content card carrying one of the classes
   below; the visual treatment lives here so it stays brand-consistent.
   ========================================================================== */

/* ---- Content cards ---- */
.ww-form-card {
	background: var(--ww-white);
	border: 1px solid #ececec;
	border-radius: 16px;
	box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.18);
	padding: 26px 20px 30px;
	max-width: 760px;
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
}
@media (min-width: 768px) {
	.ww-form-card { padding: 36px 40px 40px; }
}
.ww-page-content { width: 100%; }

/* The auth widget keeps its own 460px column; centre it inside the card. */
.ww-form-card .ww-auth { margin: 0 auto; }

/* ---- Logged-out prompt (renderers output .ww-card.ww-login-prompt) ---- */
.ww-login-prompt {
	max-width: 460px;
	margin: 0 auto;
	padding: 28px 24px 30px;
	background: var(--ww-white);
	border: 1px solid #ececec;
	border-radius: 16px;
	box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.18);
	overflow: visible;
}
.ww-login-prompt.ww-card:hover {
	transform: none;
	box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.18);
	border-color: #ececec;
}
.ww-login-prompt > p:first-of-type {
	margin: 0 0 18px;
	font-size: 17px;
	font-weight: 700;
	color: var(--ww-black);
}
.ww-login-prompt .ww-auth { max-width: none; }

/* ---- Submit buttons: large tap targets, coral→black micro-interaction ---- */
.ww-form .ww-submit { margin: 22px 0 0; }
.ww-submit .ww-button { min-height: 50px; padding-top: 13px; padding-bottom: 13px; }
.ww-button--primary:hover { background: var(--ww-black) !important; opacity: 1; color: var(--ww-white) !important; }
.ww-button:focus-visible { outline: 2px solid var(--ww-black); outline-offset: 2px; }
@media (max-width: 600px) {
	.ww-form .ww-submit .ww-button--primary {
		display: block;
		width: 100%;
		text-align: center;
	}
}

/* ---- Image upload: native file input styled as a drag-drop zone ----
   A bare <input type=file> already accepts dropped files, so a generous
   dashed box is a working dropzone with no extra JS. */
.ww-field--images > label { margin-bottom: 8px; }
.ww-field--images input[type="file"] {
	width: 100%;
	padding: 22px 16px;
	border: 2px dashed #eccad0;
	border-radius: 12px;
	background: var(--ww-blush);
	color: var(--ww-grey-mid);
	font-size: 14px;
	cursor: pointer;
	box-sizing: border-box;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.ww-field--images input[type="file"]:hover,
.ww-field--images input[type="file"]:focus {
	border-color: var(--ww-coral);
	background: var(--ww-white);
	outline: none;
}
.ww-field--images input[type="file"]::file-selector-button {
	margin-right: 14px;
	padding: 9px 16px;
	border: 0;
	border-radius: 8px;
	background: var(--ww-coral);
	color: var(--ww-white);
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
}
.ww-field--images input[type="file"]:hover::file-selector-button { background: var(--ww-black); }

/* ---- Password show/hide (whatswhat.js wraps each password input) ---- */
.ww-pass-wrap { position: relative; display: block; }
.ww-pass-wrap input { padding-right: 66px !important; }
.ww-pass-toggle {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	border: 0;
	background: none;
	color: var(--ww-grey-mid);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	padding: 6px 8px;
	line-height: 1;
}
.ww-pass-toggle:hover { color: var(--ww-coral); }

/* ---- Account settings: real toggle switches, not bare checkboxes ---- */
.ww-account-settings .ww-field--checkbox label {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	font-weight: 500;
	color: var(--ww-grey-dark);
}
.ww-account-settings .ww-field--checkbox input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	flex: 0 0 46px;
	width: 46px;
	height: 26px;
	margin: 0;
	border-radius: 999px;
	background: #d9d9d9;
	cursor: pointer;
	transition: background 0.2s ease;
}
.ww-account-settings .ww-field--checkbox input[type="checkbox"]::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--ww-white);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	transition: transform 0.2s ease;
}
.ww-account-settings .ww-field--checkbox input[type="checkbox"]:checked { background: var(--ww-coral); }
.ww-account-settings .ww-field--checkbox input[type="checkbox"]:checked::after { transform: translateX(20px); }
.ww-account-settings .ww-field--checkbox input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--ww-black);
	outline-offset: 2px;
}
.ww-account-settings .ww-field--checkbox .ww-hint { flex-basis: 100%; margin-left: 58px; margin-top: -4px; }

/* ---- Empty states with a call to action ---- */
.ww-empty-state {
	text-align: center;
	padding: 32px 20px;
	background: var(--ww-blush);
	border-radius: 14px;
}
.ww-empty-state .ww-empty { margin: 0 0 16px; font-size: 16px; }
.ww-empty-state .ww-button { display: inline-block; }

/* ---- Info pages: comfortable reading column ---- */
/* Elementor sets max-width:100% on every widget at a tying specificity,
   so the reading-column cap needs !important to take effect. */
.ww-prose {
	max-width: 720px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	width: 100%;
}
.ww-prose > :first-child { margin-top: 0; }
.ww-prose h2 { font-size: 24px; line-height: 1.3; margin: 1.6em 0 0.5em; color: var(--ww-black); }
.ww-prose h3 { font-size: 19px; line-height: 1.35; margin: 1.4em 0 0.4em; color: var(--ww-black); }
.ww-prose p, .ww-prose li { font-size: 17px; line-height: 1.75; color: #333333; }
.ww-prose p { margin: 0 0 1.1em; }
.ww-prose ul, .ww-prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.ww-prose li { margin: 0 0 0.5em; }
.ww-prose a { color: var(--ww-coral); }
.ww-prose strong { color: var(--ww-black); }
.ww-prose hr { border: 0; border-top: 1px solid #ececec; margin: 2em 0; }