/* JSST checkout — day + workshop selection (CPS brand). */
.owner-info-wrap{
	/* Alias the active theme's charte under local names. Reading --navy while also
	   declaring it would be a cycle, hence --j-*. Literals are the charte v1
	   fallback; a theme shipping v2 (warm) is picked up as-is. Issue #25. */
	--j-navy:var(--navy,#1C3C6D);
	--j-accent:var(--cyan,var(--teal,#00C1DE));
	--j-green:var(--green,#48B276);
	--j-orange:var(--orange,#F39200);
	--j-orange-ink:var(--orange-ink,#a8560a);
	--j-ink:var(--ink,#17305a);
	--j-muted:var(--muted,#5c6f8e);
	--j-line:var(--line,#e0eaf6);
	--j-surface:var(--surface,#fff);
	--j-surface-2:var(--surface-2,#f6f9fd);
	font-family:inherit;
	background:var(--j-surface); border:1px solid var(--j-line); border-radius:16px;
	padding:22px; margin:14px 0; color:var(--j-ink);
}
/* The caption Tickera renders becomes the card's first heading. */
.owner-info-wrap > h5{ margin:0 0 12px; font-size:15px; font-weight:700; color:var(--j-navy); }
/* Order comes from the DOM (checkout.js moves our block after the identity
   fields) so tab order matches reading order; no CSS reordering here. */
.owner-info-wrap > .fields-wrap{ margin-bottom:12px; }
/* Our block is the card's contents now, not a card of its own. */
.jsst-step{ background:none; border:0; padding:0; margin:0; }
.jsst-title{ font-weight:700; font-size:15px; color:var(--j-navy); margin-bottom:12px; }

/* ---- the three days, as a tab bar (#165) -------------------------------
   Each tab still carries its checkbox: the day is a selection, not only a
   destination. What changed is that one day's workshops are on screen at a
   time instead of all fourteen sessions in one scroll. */
/* Pills, not a notched tab strip. The three labels wrap onto two rows on a
   phone, and a tab that joins the panel below it can only line up when it
   happens to be on the last row — so the join is dropped and the active state
   is carried by the pill itself. */
.jsst-days{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.jsst-day{ position:relative; display:flex; align-items:center; gap:8px;
	border:2px solid var(--j-line); border-radius:12px;
	padding:9px 14px; font-size:13.5px; font-weight:600;
	cursor:pointer; user-select:none; color:var(--j-muted); background:var(--j-surface); }
.jsst-day input{ accent-color:var(--j-accent); }
/* Chosen: the day is part of the registration. */
.jsst-day.is-on{ color:var(--j-navy); border-color:var(--j-accent); background:rgba(0,193,222,.08); }
/* Chosen AND open: its workshops are the ones on screen. Never colour alone —
   the ring is the second channel, and the panel below names the day too. */
.jsst-day.is-active{ box-shadow:0 0 0 2px var(--j-accent); }
.jsst-day:focus-within{ outline:2px solid var(--j-accent); outline-offset:2px; }

/* A conflict inside a day the visitor is not looking at (#165). Without this
   the mark sits on a panel nobody has open. Shape as well as colour. */
.jsst-day-flag{ width:17px; height:17px; border-radius:50%;
	border:1.5px solid var(--j-orange); color:var(--j-orange-ink,#a8560a);
	font-size:11px; font-weight:800; line-height:14px; text-align:center; }
.jsst-day-flag::before{ content:"!"; }

.jsst-day-group{ border:2px solid var(--j-line); border-radius:12px;
	padding:6px 10px 10px; margin-bottom:16px; }

.jsst-day-h{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--j-muted); margin:12px 0 8px; }
.jsst-ws{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; cursor:pointer; }
.jsst-ws + .jsst-ws{ border-top:1px solid var(--j-line); }
.jsst-ws:hover{ background:var(--j-surface-2); }
.jsst-ws input{ accent-color:var(--j-navy); width:18px; height:18px; flex:none; }
.jsst-ws-time{ font-size:12.5px; font-weight:700; color:var(--j-navy); font-variant-numeric:tabular-nums; width:96px; flex:none; }
.jsst-ws-title{ font-size:14px; font-weight:500; flex:1; }
.jsst-chip{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap; flex:none; }
.jsst-ok{ background:rgba(72,178,118,.16); color:#2f7d53; }
.jsst-low{ background:rgba(243,146,0,.16); color:#b26a00; }
.jsst-full{ background:rgba(28,60,109,.1); color:var(--j-muted); }

.jsst-error{ margin-top:12px; padding:10px 14px; border-radius:12px;
	background:rgba(243,146,0,.12); color:#a8560a; font-size:13px; font-weight:600; }
/* One line per conflict, since there is now exactly one per conflict (#165). */
.jsst-error-list{ margin:0; padding-left:18px; }
.jsst-error-list li + li{ margin-top:5px; }

/* The rows the message is about: a thin frame, not a wash.
   `inset` box-shadow rather than a border — it follows the radius already on the
   row and costs no layout, so nothing shifts when a row becomes a problem and
   shifts back when it stops. Announced through aria-invalid as well: a frame is
   no use to somebody who cannot see it, and the summary alone was the old
   failure — it said a conflict existed and never said where. */
.jsst-ws.is-clash{ box-shadow:inset 0 0 0 1.5px var(--j-orange); }
/* No weight change: the row keeps the same text it had, and bolding it made a
   problem look like an emphasis. The frame carries the state — which also means
   the mark is not colour alone for anyone who cannot separate two hues. */
.jsst-ws.is-clash .jsst-ws-title{ color:var(--j-orange-ink,#a8560a); }

@media(max-width:560px){
	.jsst-ws{ flex-wrap:wrap; }
	.jsst-ws-time{ width:auto; }
	.jsst-ws-title{ flex-basis:100%; order:3; }
}

.jsst-title:not(:first-child){ margin-top:22px; padding-top:18px; border-top:1px solid var(--j-line); }

/* ---- Profile (#23) ---------------------------------------------------- */
.jsst-profile{ display:grid; gap:12px; margin-bottom:20px; }
.jsst-field{ display:flex; flex-direction:column; gap:5px; }
.jsst-field > span{ font-size:13px; font-weight:600; color:var(--j-ink); }
.jsst-field input{
	width:100%; box-sizing:border-box; padding:11px 13px;
	border:1px solid var(--j-line); border-radius:10px;
	font:inherit; font-size:15px; color:var(--j-ink); background:var(--j-surface);
}
.jsst-field input:hover{ border-color:var(--j-muted); }
.jsst-field input:focus-visible,
.jsst-consent-check input:focus-visible{
	outline:2px solid var(--j-accent); outline-offset:2px; border-color:var(--j-accent);
}
.jsst-req{ color:var(--j-orange); text-decoration:none; border:0; font-weight:700; }
.jsst-optional{ font-weight:400; color:var(--j-muted); }

/* ---- Consents (#19) --------------------------------------------------- */
.jsst-consents{ display:grid; gap:14px; }
.jsst-consent{ border:1px solid var(--j-line); border-radius:12px; padding:14px; background:var(--j-surface-2); }
.jsst-consent-text{ margin:0 0 10px; font-size:13px; line-height:1.5; color:var(--j-muted); }
.jsst-consent-check{ display:flex; align-items:flex-start; gap:10px; font-size:14px; font-weight:600; color:var(--j-ink); cursor:pointer; }
.jsst-consent-check input{ width:20px; height:20px; margin:0; flex:none; accent-color:var(--j-accent); }
.jsst-consent:has(input:checked){ border-color:var(--j-green); background:rgba(72,178,118,.07); }

/* ---- Tickera's own fields, now inside the card ------------------------ */
.owner-info-wrap > .fields-wrap > label{ display:block; font-size:13px; font-weight:600; color:var(--j-ink); margin-bottom:5px; }
.tickera .tc_buyer_info_wrap input[type=text],
.tickera .tc_buyer_info_wrap input[type=email],
.owner-info-wrap > .fields-wrap input{
	/* min() rather than max-width: another rule sets max-width:100% and wins. */
	width:min(100%,32rem); box-sizing:border-box; padding:11px 13px;
	border:1px solid var(--j-line); border-radius:10px; font:inherit; font-size:15px;
}
.owner-info-wrap > .fields-wrap input:focus-visible{ outline:2px solid var(--j-accent); outline-offset:2px; }

@media(min-width:640px){
	.jsst-profile{ grid-template-columns:1fr 1fr; }
	.jsst-field:first-child{ grid-column:1 / -1; }
	.owner-info-wrap{ display:grid; grid-template-columns:1fr 1fr; column-gap:16px; }
	.owner-info-wrap > h5,
	.owner-info-wrap > .jsst-step,
	.owner-info-wrap > .tc-clearfix,
	.owner-info-wrap > p{ grid-column:1 / -1; }
	/* nth-of-type counts every sibling div, so match the field by its input. */
	.owner-info-wrap > .fields-wrap:has(input[name*="owner_email"]){ grid-column:1 / -1; }
	/* .tickera prefix so this outranks the generic width rule above. */
	.tickera .owner-info-wrap > .fields-wrap input{ width:100%; }
	.jsst-step .jsst-profile .jsst-field input{ width:100%; }
}

/* The optional-workshops hint under the step title (21 Aug). */
.jsst-step-hint{margin:2px 0 14px;font-size:13.5px;line-height:1.5;color:#5E6E86}

/* Intro under « Inscription à l'événement », above the cart (CPS, 24 Aug). */
.jsst-cart-intro{max-width:820px;margin:0 0 24px;padding:16px 20px;border-left:4px solid var(--cyan,var(--teal,#00C1DE));background:rgba(0,193,222,.07);border-radius:10px}
.jsst-cart-intro p{margin:0 0 8px;font-size:15px;line-height:1.55;color:var(--ink,#17305a)}
.jsst-cart-intro p:last-child{margin-bottom:0}

/*
 * The empty cart (#241) — the state a newsletter reader lands in.
 *
 * /tickets-cart/ with no cart cookie used to render a title and one sentence,
 * with nothing to click: the entry point is the EVENT page, which seeds the
 * cart and redirects back here. This is that missing door.
 */
.jsst-cart-empty{max-width:640px;margin:8px 0 32px}
.jsst-cart-empty-lead{margin:0 0 20px;font-size:16.5px;line-height:1.55;color:var(--j-ink,#17305a)}
/*
 * The double class is deliberate (#251). The theme styles long-form links with
 * `.page-content a { color: … }` (0,1,1), the cart page's content sits inside
 * .page-content, and a plain `.jsst-cart-empty-cta` (0,1,0) loses to it — the
 * label rendered #D97A00 on #F39200, about 1.6:1, and turned white only on
 * hover because the hover rule happened to be (0,2,0). Raising this to (0,2,1)
 * wins without weakening a theme rule that is doing a real job elsewhere.
 */
.jsst-cart-empty a.jsst-cart-empty-cta{
	display:inline-block;padding:14px 28px;border-radius:999px;
	background:var(--j-orange,#F39200);color:#fff;font-weight:700;font-size:16px;
	text-decoration:none;transition:transform .12s ease,box-shadow .12s ease;
}
.jsst-cart-empty a.jsst-cart-empty-cta:hover,.jsst-cart-empty a.jsst-cart-empty-cta:focus{color:#fff;transform:translateY(-1px);box-shadow:0 6px 18px rgba(243,146,0,.32)}
.jsst-cart-empty a.jsst-cart-empty-cta:focus-visible{outline:2px solid var(--j-navy,#1C3C6D);outline-offset:3px}
.jsst-cart-empty-note{margin:18px 0 0;font-size:13.5px;line-height:1.5;color:var(--j-muted,#5E6E86)}

/* The cart intro joins the desktop width lift (#252) — its cap was in px,
   which is how it dodged the ch sweep. */
@media(min-width:900px){
	.jsst-cart-intro{ max-width:none; }
}