/* ==========================================================================
   DoToR assessment form styles (v1.4)
   --------------------------------------------------------------------------
   Targets the Checkout Field Editor (THWCFE) checkboxgroup fields on the
   assessment/checkout form. The site gives these fields the custom cssclass
   `checkbox-wrapper` (set in the field editor), and THWCFE renders each
   option as:

     <label for="<id>_<key>" style="display:inline; margin-right: 10px;"
            class="checkbox ...">
       <input type="checkbox" data-multiple="1" class="input-checkbox ..."
              name="<key>[]" id="<id>_<key>" value="..." /> Option text
     </label>

   (verified from woo_form_field_fragment_checkboxgroup in
   public/class-thwcfe-public.php, plugin v3.7.5). The input sits INSIDE the
   label, and the label carries inline `display` and `margin-right` styles,
   which is why those properties use !important; width also uses !important
   to beat the theme's existing two-column width rule on these labels.

   Palette matches the site's existing look: navy #211951 (the Yes/No button
   borders), purple #836FFF (the site accent, used in ::selection and hovers).
   ========================================================================== */

/* --- the field becomes an even two-column grid of option cards ----------- */
/* The field wrapper <p class="form-row checkbox-wrapper"> holds the question
   label plus the option labels (sometimes via a woocommerce-input-wrapper
   span, which display:contents flattens into the grid). Grid keeps the two
   cards in a row the SAME height — the previous inline flow could not, which
   left ragged card outlines next to each other.                             */
/* NO !important on this display: THWCFE hides conditional questions by
   setting an inline display:none on this same wrapper, and that hiding must
   always win — v1.1 used !important here and forced every hidden question
   visible as giant empty boxes. When THWCFE shows a field again, jQuery
   clears the inline value and this grid takes effect.                       */
form.checkout .form-row.checkbox-wrapper,
form.checkout p.checkbox-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

/* Belt and braces: anything THWCFE has hidden stays hidden, whatever other
   rules say.                                                                */
form.checkout .checkbox-wrapper[style*="display: none"],
form.checkout .checkbox-wrapper[style*="display:none"],
form.checkout .checkbox-wrapper label.checkbox[style*="display: none"],
form.checkout .checkbox-wrapper label.checkbox[style*="display:none"] {
	display: none !important;
}

form.checkout .checkbox-wrapper .woocommerce-input-wrapper {
	display: contents;
}

/* Anything that isn't an option card — the question label, notes — spans
   both columns instead of being squeezed into one cell.                     */
form.checkout .checkbox-wrapper > :not(label.checkbox):not(.woocommerce-input-wrapper) {
	grid-column: 1 / -1;
}

/* --- each option is a tappable card matching the Yes/No buttons ---------- */
/* The :not([style*=...]) guards matter: the card needs !important to beat
   the label's inline display:inline, but that same !important must never
   resurrect a label THWCFE has hidden with inline display:none.            */
form.checkout .checkbox-wrapper label.checkbox:not([style*="display: none"]):not([style*="display:none"]) {
	display: flex !important;     /* beats the inline display:inline        */
	margin: 0 !important;         /* beats the inline margin-right:10px     */
	width: 100% !important;       /* beats the theme's column width rule    */
	box-sizing: border-box;
	min-width: 0;                 /* long words wrap INSIDE the card...     */
	overflow-wrap: anywhere;      /* ...instead of crossing the border      */
	min-height: 48px;             /* comfortable thumb target               */
	align-items: center;          /* grid stretch equalises row heights     */
	justify-content: flex-start;
	text-align: left;
	gap: 10px;
	padding: 12px 14px;
	border: 1.5px solid #211951;
	border-radius: 8px;
	background: #fff;
	color: inherit;
	line-height: 1.35;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

/* --- the box itself: bigger, brand-coloured, still a real checkbox ------- */
form.checkout .checkbox-wrapper label.checkbox input.input-checkbox {
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	margin: 0;
	accent-color: #836FFF;
	cursor: pointer;
}

/* --- ticked: unmistakable ------------------------------------------------ */
/* :has() is supported by Safari 15.4+/Chrome 105+; older browsers simply    */
/* keep the card look and rely on the enlarged purple tick, which is fine.   */
form.checkout .checkbox-wrapper label.checkbox:has(input.input-checkbox:checked) {
	border-color: #836FFF;
	background: rgba(131, 111, 255, 0.08);
}

/* --- pointer feedback on devices that hover ------------------------------ */
@media (hover: hover) {
	form.checkout .checkbox-wrapper label.checkbox:hover {
		border-color: #836FFF;
	}
}

/* ==========================================================================
   Radio pills → the same cards as the checkbox options (v1.4)
   --------------------------------------------------------------------------
   The child theme (bb-theme-child/style.css) hides the real radio input
   (display:none on .woocommerce-input-wrapper input[type="radio"]) and
   styles label.radio as a TRANSPARENT pill whose only selected indicator is
   a solid navy fill via `input:checked + label`. These rules keep that
   sibling-adjacency contract but reskin the pill as the same white card as
   the checkboxgroup options, and draw a radio dot on the label (::before,
   since the real input is invisible): unselected = white dot with a navy
   ring, selected = purple-filled dot plus the purple border and light
   purple tint a ticked checkbox card gets.
   The theme also paints the pill solid navy on :hover with no hover-media
   guard, which sticks on touch screens after a tap — neutralised
   unconditionally below, with the card hover re-applied only where
   hovering is real. Every selector here outranks the theme's (extra
   form.checkout class), so the overrides win regardless of load order.
   ========================================================================== */

form.checkout .woocommerce-input-wrapper label.radio:not([style*="display: none"]):not([style*="display:none"]) {
	display: inline-flex !important;  /* the dot and text need flex alignment */
	align-items: center;
	gap: 10px;
	margin: 0 10px 10px 0 !important; /* keeps spacing when pills wrap rows   */
	box-sizing: border-box;
	min-height: 48px;
	padding: 12px 14px;
	border: 1.5px solid #211951;
	border-radius: 8px;
	background-color: #fff;
	color: inherit;
	font-size: inherit;
	line-height: 1.35 !important;     /* the theme's line-height:1 is !important */
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

/* The drawn radio dot standing in for the hidden input. */
form.checkout .woocommerce-input-wrapper label.radio::before {
	content: "";
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	border: 2px solid #211951;
	border-radius: 50%;
	background-color: #fff;
	transition: border-color 0.15s ease, background-color 0.15s ease,
		box-shadow 0.15s ease;
}

/* Neutralise the theme's always-on navy hover fill (it sticks on touch). */
form.checkout .woocommerce-input-wrapper label.radio:hover {
	background-color: #fff;
	color: inherit;
}

@media (hover: hover) {
	form.checkout .woocommerce-input-wrapper label.radio:hover {
		border-color: #836FFF;
	}
}

/* Selected: the ticked-card treatment. These selectors carry more
   specificity than both the hover overrides above (so the tint survives
   hovering) and the theme's navy-fill checked rule (so it never applies). */
form.checkout .woocommerce-input-wrapper input[type="radio"]:checked + label.radio {
	border-color: #836FFF;
	background-color: rgba(131, 111, 255, 0.08);
	color: inherit;
}

form.checkout .woocommerce-input-wrapper input[type="radio"]:checked + label.radio::before {
	border-color: #836FFF;
	background-color: #836FFF;
	box-shadow: inset 0 0 0 3px #fff; /* white ring between rim and filling  */
}

/* The real input is invisible, so surface keyboard focus on the card. */
form.checkout .woocommerce-input-wrapper input[type="radio"]:focus-visible + label.radio {
	outline: 2px solid #836FFF;
	outline-offset: 2px;
}

/* --- kill the browser's double-tap heuristics on all form controls ------- */
/* Removes the tap delay / double-tap-zoom behaviour that feeds the iOS      */
/* ghost-click problem the scroll-tap guard (assessment-form.js) handles.    */
form.checkout label.checkbox,
form.checkout label.radio,
form.checkout input[type="checkbox"],
form.checkout input[type="radio"] {
	touch-action: manipulation;
}

/* ==========================================================================
   Magic-link login button
   --------------------------------------------------------------------------
   The login step emits <button type="submit" name="dotor_send_magic_link">
   with no class at all, so it renders with browser-default chrome next to
   its fully styled siblings. Give it the same treatment.
   ========================================================================== */
button[name="dotor_send_magic_link"] {
	display: inline-block;
	padding: 12px 24px;
	border: 0;
	border-radius: 8px;
	background: #211951;
	color: #fff;
	font-size: 16px;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

button[name="dotor_send_magic_link"]:hover,
button[name="dotor_send_magic_link"]:focus-visible {
	background: #836FFF;
}