/* Service Deals front-end card styles.
   Brand color is exposed as a CSS custom property on plugin-owned containers
   only, so the surrounding theme is never affected. Since v2.1 (Feature 4,
   HJ-38) the value of --service-deals-brand / --service-deals-brand-dark is
   injected by `wp_add_inline_style()` in service-deals.php from the
   configurable Appearance settings, so no hardcoded value lives here.

   HJ-41 (UI/UX P0/P1): the static design tokens below (spacing scale S1,
   type scale S3, focus ring S5, and --service-deals-status-active) are
   declared on the same plugin-owned containers that carry
   --service-deals-brand, so the operator-configurable brand keeps flowing
   into derived tokens like the active badge and the focus ring. */

/* --- Design tokens (S1 spacing, S3 type, S5 focus ring) ---------------------
   Declared on the same selectors the inline brand rule targets so every
   consumer (card, grid, modal) inherits both the static tokens and the
   operator brand. */
.service-deals-grid,
.service-deal-card,
.sd-modal{
	--service-deals-space-1:4px;
	--service-deals-space-2:8px;
	--service-deals-space-3:12px;
	--service-deals-space-4:16px;
	--service-deals-space-5:20px;
	--service-deals-space-6:24px;
	--service-deals-fs-title:1.15rem;
	--service-deals-fs-body:.95rem;
	--service-deals-fs-meta:.85rem;
	--service-deals-fw-regular:400;
	--service-deals-fw-strong:600;
	/* Radius scale (S2, HJ-46 UX-15): sm=6 badge, md=8 CTA, lg=12 card/modal.
	   A pill token covers full-round bars/share pills that are not part of the
	   sm/md/lg scale so no hardcoded border-radius px lives in this file. */
	--service-deals-radius-sm:6px;
	--service-deals-radius-md:8px;
	--service-deals-radius-lg:12px;
	--service-deals-radius-pill:999px;
	/* Active status badge shares the operator brand so admin + front-end
	   match and white-on-active clears 4.5:1 (HJ-41 P0 #3). */
	--service-deals-status-active:var(--service-deals-brand);
	/* Brand-tinted focus ring (S5). Uses color-mix over the operator brand
	   so a lighter configured color still produces an accessible ring. */
	--service-deals-focus-ring:0 0 0 3px color-mix(in srgb,var(--service-deals-brand) 25%,transparent);
}

.service-deals-grid{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
	gap:var(--service-deals-space-5);
	margin:1em 0;
}
.service-deal-card{
	background:#fff;
	border:1px solid #e2e8f0;
	border-radius:var(--service-deals-radius-lg);
	overflow:hidden;
	display:flex;
	flex-direction:column;
	box-shadow:0 1px 3px rgba(0,0,0,.06);
	transition:box-shadow .15s ease;
}
.service-deal-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.08)}
.service-deal-card__image img{width:100%;height:180px;object-fit:cover;display:block}
.service-deal-card__body{padding:var(--service-deals-space-4);display:flex;flex-direction:column;gap:var(--service-deals-space-3)}
.service-deal-card__title{margin:0;font-size:var(--service-deals-fs-title);line-height:1.3;font-weight:var(--service-deals-fw-strong);color:var(--service-deals-brand)}
.service-deal-card__dates{margin:0;font-size:var(--service-deals-fs-meta);font-weight:var(--service-deals-fw-strong);color:#fff;background:var(--service-deals-brand);display:inline-block;width:fit-content;max-width:100%;padding:var(--service-deals-space-1) var(--service-deals-space-2);border-radius:var(--service-deals-radius-sm)}
.service-deal-card__desc{font-size:var(--service-deals-fs-body);line-height:1.5;font-weight:var(--service-deals-fw-regular);color:#334155}
.service-deal-card__desc p{margin:0 0 .5em}
.service-deal-cta{display:inline-block;margin-top:var(--service-deals-space-2);min-height:44px;padding:var(--service-deals-space-3) var(--service-deals-space-5);border-radius:var(--service-deals-radius-md);background:var(--service-deals-brand);color:#fff;text-decoration:none;border:2px solid var(--service-deals-brand);font-weight:var(--service-deals-fw-strong);font-size:var(--service-deals-fs-body);cursor:pointer;text-align:center}
.service-deal-cta:hover{background:var(--service-deals-brand-dark);border-color:var(--service-deals-brand-dark);color:#fff}
.service-deal-share{margin-top:var(--service-deals-space-3);display:flex;align-items:center;gap:var(--service-deals-space-2);flex-wrap:wrap;font-size:.8rem}
.service-deal-share__label{font-weight:var(--service-deals-fw-strong);color:#475569}
.service-deal-share__link{padding:var(--service-deals-space-1) var(--service-deals-space-2);border:1px solid var(--service-deals-brand);border-radius:var(--service-deals-radius-sm);text-decoration:none;color:var(--service-deals-brand)}
.service-deal-share__link:hover{background:var(--service-deals-brand);color:#fff}
.service-deal-share__link:focus{outline:none;box-shadow:var(--service-deals-focus-ring)}
.service-deal-share__link--instagram{font:inherit;cursor:pointer;background:transparent}
.service-deal-share__link--instagram.is-copied{background:#166534;border-color:#166534;color:#fff}

/* Empty grid state (HJ-41 P1 #11): designed notice replacing the old bare
   .service-deals-none paragraph. Reused by the [service_deals] shortcode and
   the service-deals/grid block (incl. the block-editor canvas). */
.service-deals-empty{
	padding:var(--service-deals-space-6) var(--service-deals-space-4);
	text-align:center;
	border:1px dashed #cbd5e1;
	border-radius:var(--service-deals-radius-lg);
	color:#64748b;
	background:#f8fafc;
}
.service-deals-empty__icon{display:block;margin:0 auto var(--service-deals-space-3);color:#94a3b8}
.service-deals-empty__title{margin:0 0 var(--service-deals-space-1);font-size:var(--service-deals-fs-title);font-weight:var(--service-deals-fw-strong);color:#1e293b}
.service-deals-empty__text{margin:0;font-size:var(--service-deals-fs-body);font-weight:var(--service-deals-fw-regular)}

/* Scheduled-deal editor notice (HJ-41 P1 #13): shown only in the block
   editor canvas for a scheduled service-deals/card block; the front-end
   render stays empty (Feature 1). */
.service-deals-notice{
	padding:var(--service-deals-space-4);
	border:1px solid var(--service-deals-brand);
	border-radius:var(--service-deals-radius-lg);
	background:color-mix(in srgb,var(--service-deals-brand) 8%,#fff);
	color:#334155;
	display:flex;
	align-items:flex-start;
	gap:var(--service-deals-space-3);
}
.service-deals-notice__icon{flex:0 0 auto;color:var(--service-deals-brand)}
.service-deals-notice__text{margin:0;font-size:var(--service-deals-fs-body);font-weight:var(--service-deals-fw-regular);line-height:1.5}
.service-deals-notice__text strong{font-weight:var(--service-deals-fw-strong)}

/* Popup modal */
.sd-modal{
	position:fixed;inset:0;background:rgba(15,23,42,.55);display:none;align-items:center;justify-content:center;z-index:9999;padding:var(--service-deals-space-4);
}
.sd-modal.is-open{display:flex}
.sd-modal__dialog{background:#fff;border-radius:var(--service-deals-radius-lg);max-width:440px;width:100%;box-sizing:border-box;padding:var(--service-deals-space-6);box-shadow:0 20px 50px rgba(0,0,0,.25);animation:sd-pop .15s ease-out;position:relative}
/* Modal close (X) affordance (HJ-46 UX-18): keyboard-focusable icon button
   in the top-right of the dialog. Clicking it closes the modal and restores
   focus to the trigger via the existing focus-restore path in service-deals.js. */
.sd-modal__close{
	position:absolute;top:var(--service-deals-space-2);right:var(--service-deals-space-2);
	width:36px;height:36px;border:none;background:transparent;cursor:pointer;
	border-radius:var(--service-deals-radius-sm);
	color:#475569;font-size:1.25rem;line-height:1;display:flex;align-items:center;justify-content:center;
}
.sd-modal__close:hover{background:#f1f5f9;color:#1e293b}
.sd-modal__close:focus{outline:none;box-shadow:var(--service-deals-focus-ring)}
@keyframes sd-pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sd-modal__title{margin:0 0 var(--service-deals-space-1);font-size:var(--service-deals-fs-title);color:var(--service-deals-brand)}
.sd-modal__subtitle{margin:0 0 var(--service-deals-space-4);color:#64748b;font-size:.9rem}
.sd-modal__field{margin-bottom:var(--service-deals-space-3)}
.sd-modal__field label{display:block;font-size:var(--service-deals-fs-meta);font-weight:var(--service-deals-fw-strong);margin-bottom:var(--service-deals-space-1);color:#334155}
.sd-modal__field input,.sd-modal__field textarea{width:100%;padding:var(--service-deals-space-2) var(--service-deals-space-3);border:1px solid #cbd5e1;border-radius:var(--service-deals-radius-sm);font-size:var(--service-deals-fs-body);box-sizing:border-box}
.sd-modal__field input:focus,.sd-modal__field textarea:focus{border-color:var(--service-deals-brand);outline:none;box-shadow:var(--service-deals-focus-ring)}
.sd-modal__field textarea{min-height:80px;resize:vertical}
.sd-modal__actions{display:flex;gap:var(--service-deals-space-2);justify-content:flex-end;margin-top:var(--service-deals-space-2)}
.sd-modal__btn{min-height:44px;padding:var(--service-deals-space-2) var(--service-deals-space-4);border-radius:var(--service-deals-radius-md);border:1px solid transparent;cursor:pointer;font-weight:var(--service-deals-fw-strong);font-size:.9rem}
.sd-modal__btn--primary{background:var(--service-deals-brand);color:#fff;border-color:var(--service-deals-brand)}
.sd-modal__btn--primary:hover{background:var(--service-deals-brand-dark);border-color:var(--service-deals-brand-dark)}
.sd-modal__btn--ghost{background:transparent;color:#475569;border-color:#cbd5e1}
.sd-modal__message{margin-top:var(--service-deals-space-3);padding:var(--service-deals-space-2);border-radius:var(--service-deals-radius-sm);font-size:.9rem}
.sd-modal__message.is-success{background:#dcfce7;color:#166534}
.sd-modal__message.is-error{background:#fee2e2;color:#991b1b}

/* Honeypot: visually hidden from real users but present in the DOM for bots.
   Off-screen + zero-size + !important so theme styles cannot accidentally
   reveal it. Never use display:none — some bots skip hidden fields. */
.sd-honeypot{
	position:absolute !important;
	left:-99999px !important;
	top:-99999px !important;
	width:1px !important;
	height:1px !important;
	overflow:hidden !important;
	clip:rect(0,0,0,0) !important;
	clip-path:inset(50%) !important;
	white-space:nowrap !important;
	border:0 !important;
	padding:0 !important;
	margin:-1px !important;
}
/* Feature 1 (Scheduled Deals): derived status badge on a deal card. */
.service-deal-card{position:relative}
.service-deal-card__status{
	position:absolute;top:0;right:0;
	font-size:.75rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
	color:#fff;padding:var(--service-deals-space-1) var(--service-deals-space-2);border-bottom-left-radius:var(--service-deals-radius-lg);
	background:#64748b;
}
.service-deal-status--scheduled{background:#2563eb}
.service-deal-status--expired{background:#9333ea}
.service-deal-status--draft{background:#64748b}
.service-deal-status--active{background:var(--service-deals-status-active)}

/* Expired-deal inline notice (HJ-46 UX-17): a quiet info row rendered above
   the description on an expired deal card. The active CTA is already hidden
   by Feature 1 status gating, so this notice replaces the call-to-action
   affordance with a plain "this deal ended on {date}" message. */
.service-deal-card__notice{
	margin:0;padding:var(--service-deals-space-2) var(--service-deals-space-3);
	border-radius:var(--service-deals-radius-sm);
	font-size:var(--service-deals-fs-meta);font-weight:var(--service-deals-fw-strong);
	background:#f1f5f9;color:#64748b;border:1px solid #e2e8f0;
}
.service-deal-card__notice--expired{
	background:#faf5ff;color:#7e22ce;border-color:#e9d5ff;
}

/* Feature 2 (Block Editor support): the `service-deals/grid` block wraps
   cards in `.service-deals-grid.is-block` with an inline `--sd-cols` var so
   the column count is a fixed, editor-controlled value (2/3/4) rather than
   the shortcode's auto-fill layout. The default falls back to 3. */
.service-deals-grid.is-block{
	--sd-cols:3;
	grid-template-columns:repeat(var(--sd-cols,3),minmax(0,1fr));
}

/* Single-deal template: cap the CTA width and left-align it so the button
   does not stretch the full content column (HJ-41 P1 #8). The CTA is a flex
   item of the card body (align-self keeps it flush left). */
.single-service_deal .service-deal-cta{
	max-width:320px;
	align-self:flex-start;
}

/* Respect reduced-motion preferences for any new transitions/animations
   (HJ-41 acceptance): the modal pop-in and the card hover/transition set.
   HJ-46 UX-16: the card hover shadow is still shown (it is a state change,
   not a transform) but the transition is suppressed so it appears instantly
   for reduced-motion users. */
@media (prefers-reduced-motion: reduce){
	.sd-modal__dialog{animation:none}
	.service-deal-card{transition:none}
	.service-deal-share__link{transition:none}
}