/* =====================================================================
   ZCRAVE DESIGN SYSTEM — MASTER CSS (Mono Only)
   ===================================================================== */

/* ================================
   GLOBAL TOKENS
   ================================ */
:root {
  /* Z-Index Layers */
  --zcrave-modal-zindex: 1200;
  --zcrave-modal-backdrop-zindex: 10;
  --zcrave-toast-viewport-zindex: calc(var(--zcrave-modal-zindex) * 2);

  /* Font Stretch + Weight */
  --font-stretch-normal: normal;
  --font-stretch-condensed: condensed;
  --font-weight-light: 200;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* ================================
     TYPOGRAPHY SCALE (Mono Only)
     ================================ */
  --font-family-base: "input-mono", monospace;

  --font-size-body-xs: 10px;
  --line-height-body-xs: 1rem;
  --letter-spacing-body-xs: 0;

  --font-size-body-s: 12px;
  --line-height-body-s: 1rem;
  --letter-spacing-body-s: 0;

  --font-size-label-s: 12px;
  --line-height-label-s: 1rem;
  --letter-spacing-label-s: 0.05rem;
  --text-transform-label-s: uppercase;

  --font-size-heading-xs: 18px;
  --line-height-heading-xs: 1.5rem;
  --letter-spacing-heading-xs: 0;

  /* ================================
     COLORS
     ================================ */
  --color-basic-black: #000;
  --color-basic-white: #fff;

  --color-content-high: var(--color-basic-black);
  --color-content-mid: #757575;
  --color-content-low: #ccc;
  --color-content-inverse: var(--color-basic-white);

  --color-background-base: var(--color-basic-white);
  --color-background-low: #f7f7f7;
  --color-background-low-alt: #e5e5e5;
  --color-background-overlay: rgba(0, 0, 0, 0.25);

  --color-brand-primary: #111;
  --color-brand-secondary: #720eec;
  --color-brand-accent: #ff3366;

  /* ================================
     SPACING (4px scale)
     ================================ */
  --spacing-01: 4px;
  --spacing-02: 8px;
  --spacing-03: 12px;
  --spacing-04: 16px;
  --spacing-05: 20px;
  --spacing-06: 24px;
  --spacing-07: 32px;
  --spacing-08: 40px;

  /* ================================
     COMPONENT / EFFECTS
     ================================ */
  --focus-ring-offset: 2px;
  --focus-ring-stroke: 2px;
  --zcrave-line-width: 1px;
}

/* ================================
   BASE TYPOGRAPHY RESET
   ================================ */
body, button, input, select, textarea {
  font-family: var(--font-family-base) !important;
  font-weight: var(--font-weight-light);
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--color-content-high);
}

/* ================================
   COMPONENT FOUNDATION (.zcrave-*)
   ================================ */

/* Accordion */
.zcrave-accordion-item__title-text {
  font-size: var(--font-size-label-s);
  font-family: var(--font-family-base);
  text-transform: uppercase;
}

/* Modals */
.zcrave-modal { font-family: var(--font-family-base); }

/* Dropdown */
.zcrave-drop-down-menu__menu-item {
  font-size: var(--font-size-body-s);
  font-family: var(--font-family-base);
  text-transform: uppercase;
}

/* Buttons */
.zcrave-button {
  font-size: var(--font-size-label-s);
  font-family: var(--font-family-base);
  text-transform: uppercase;
}

/* Links */
.zcrave-link {
  font-size: var(--font-size-body-s);
  font-family: var(--font-family-base);
}

/* ================================
   SIZE RECOMMENDER (.zcv-*)
   ================================ */
.zcv-sr2-drawer,
.zcv-sr2-drawer * {
  font-family: var(--font-family-base) !important;
  text-transform: uppercase !important;
  font-weight: var(--font-weight-light) !important;
  letter-spacing: 0 !important;
  color: #000 !important;
  font-size: 12px !important;
  text-align: left !important;
}

/* Title */
.zcv-title, .zcv-sr2-h1 {
  font-size: var(--font-size-heading-xs) !important;
  line-height: var(--line-height-heading-xs) !important;
  font-weight: var(--font-weight-light) !important;
  letter-spacing: .05rem;
}

/* Inputs */
.zcv-input,
.zcv-sr2 input[type="text"],
.zcv-sr2 input[type="number"],
.zcv-sr2 select,
select.zcv-input {
  font-size: var(--font-size-body-s) !important;
  font-family: var(--font-family-base) !important;
}

/* Slider labels */
/* Use a fixed 12px font size for all slider labels per design spec. We
   override the token-based size here to ensure consistency across
   different slider instances. */
.zcv-slider-neo .zcv-slider-labels {
  font-size: 12px !important;
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-light);
}

/* Buttons inside Size Recommender */
.zcv-btn,
.zcv-btn-ghost,
.zcv-sr2-drawer .button,
.zcv-sr2-drawer button {
  font-size: var(--font-size-body-s) !important;
  font-family: var(--font-family-base) !important;
  font-weight: var(--font-weight-light) !important;
}

/* === Even spacing for basic info section === */
.step-basic.zcv-step {
  display: grid;
  row-gap: var(--spacing-07, 32px);
}
.step-basic .zcv-label {
  display: grid;
  row-gap: var(--spacing-03, 12px);
  margin: 0;
}
.step-basic .zcv-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-07, 32px);
}
@media (min-width: 680px) {
  .step-basic .zcv-row {
    grid-template-columns: 1fr 1fr;
  }
}
.step-basic .zcv-col {
  display: grid;
  row-gap: var(--spacing-03, 12px);
}
.step-basic .zcv-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-05, 20px);
  margin: 0;
}
.step-basic .zcv-input {
  height: 40px !important;
  margin: 0 !important;
}
.step-basic .zcv-privacy {
  margin-top: var(--spacing-07, 32px);
}
/* === Custom overrides for ZCRAVE === */
/* Align helper text left */
.zcv-help {
  text-align: left !important;
}

/* Remove border and padding on unit buttons on hover and focus */
.zcv-units .zcv-unit:hover,
.zcv-units .zcv-unit:focus {
  border: none !important;
  padding: 0 !important;
  outline: none !important;
}

/* Ensure mobile footer CTA remains clickable by adjusting z-index and layering */
.zcv-sr2-drawer,
.zcv-sr-panel {
  position: relative;
  z-index: var(--zcrave-modal-zindex, 1200);
}

.zcv-sr2-foot {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: calc(var(--zcrave-modal-zindex, 1200) + 1);
  background: var(--color-background-base, #fff);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Enable pointer events on footer buttons and overlay */
.zcv-sr-overlay,
.zcv-sr2-overlay {
  pointer-events: auto;
}

.zcv-sr2-foot .zcv-btn,
.zcv-sr2-foot .button {
  pointer-events: auto;
}



/* === Custom overrides for Sept 12, 2025 === */

/* Right-align the drawer and ensure full height */
.zcv-sr2-drawer,
.zcv-sr-panel {
  margin-left: auto;
  height: 100vh;
  max-height: 100vh;
}
.zcv-sr2-overlay,
.zcv-sr-overlay {
  display: flex;
  justify-content: flex-end;
}

/* Remove borders on Edit/Delete actions in result actions */
.zcv-actions .zcv-btn-ghost {
  border: none !important;
}

/* Set summary text size */
.zcv-summary {
  font-size: 10px !important;
}

/*
 * Hint styling (size run message)
 *
 * The hint at the top of the drawer should be small, evenly spaced
 * and enclosed in corner brackets. It uses a monospace font, tight
 * word spacing and a light font weight. We center the text per the
 * latest design spec. The pseudo-elements around the hint insert
 * Japanese corner brackets. Only a single block of definitions is
 * maintained here to avoid duplicate declarations.
 */
.zcv-sr2-hint {
  font-size: 10px !important;
  word-spacing: -1px !important;
  font-weight: 200 !important;
  letter-spacing: 0.2px !important;
  padding-bottom: 10px !important;
  text-align: center !important;
}
.zcv-sr2-hint::before {
  content: "\300C\0020";
}
.zcv-sr2-hint::after {
  content: "\0020\300D";
}

/* =========================================
   Additional updates for Sept 12, 2025 tasks
   ========================================= */

/* Remove default bottom margins on basic step labels/fields/blocks */
.zcv-step.step-basic .zcv-label,
.zcv-step.step-basic .zcv-field,
.zcv-step.step-basic .zcv-block {
  margin-bottom: 0 !important;
}

/* Sticky footer: offset 20px from bottom */
.zcv-sr2-foot {
  bottom: 20px;
}

/* Hide number input spin buttons */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/* Slider labels font size */
.zcv-slider-labels {
  font-size: 12px !important;
}

/* Remove extra margin on neo sliders */
.zcv-slider.zcv-slider-neo {
  margin-top: 0 !important;
}

/* Header back/close buttons hover: remove border/padding, fade */
.zcv-sr2-head .zcv-sr2-back:hover,
.zcv-sr2-head .zcv-sr2-x:hover {
  border: none !important;
  padding: 0 !important;
  opacity: 0.5 !important;
}

/* Down arrow for bra system select */
/* Apply a custom down-arrow to all selects within the recommender */
select.zcv-input, .zcv-sr2 select.zcv-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' aria-hidden='true'><path fill-rule='evenodd' clip-rule='evenodd' d='M11.9999 16.6644L3.67065 9.3763L4.32916 8.62372L11.9999 15.3356L19.6707 8.62372L20.3292 9.3763L11.9999 16.6644Z' fill='black'/></svg>) !important;
  background-repeat: no-repeat !important;
  background-position: right 0.25rem center !important;
  background-size: 14px 14px !important;
  padding-right: 24px !important;
  background-color: #fff;
}

/* Footer buttons hover weight */
.zcv-sr2-foot .zcv-btn:hover,
.zcv-sr2-foot .button:hover {
  font-weight: 600 !important;
}

/*
 * Position helper text immediately below the label head.
 * This rule is used for the Age helper but applies to any
 * label-head + .zcv-help combination within the basic step.
 */
.step-basic .zcv-label-head + .zcv-help {
  /* Pull the helper text closer to the label head */
  margin-top: -20px !important;
  margin-bottom: 0 !important;
  display: block;
  font-size: 8px !important;
}

/* Subtitle size */
.zcv-sub {
  font-size: 12px !important;
}

/* Normalize margins and font sizes across labels, fields and blocks */
.zcv-label,
.zcv-field,
.zcv-block {
  margin: 0 0 0 !important;
  font-size: 12px !important;
}

/* Figure Path layout (even spacing, labels left) */
.zcv-s2 .zcv-field,
.zcv-s2 .zsr-field {
  display: grid;
  row-gap: 20px;
}

/* Ensure label rows always align and have no extra padding */
.zcv-label-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 0px !important;
}
.zcv-s2 .zcv-label,
.zcv-s2 .zsr-label {
  justify-self: start;
  text-align: left;
}
.zcv-s2 .zcv-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 680px) {
  .zcv-s2 .zcv-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* Neo slider backgrounds and behaviour */
/*
 * Use only a top timeline graphic for the slider track. The bottom timeline is not used.
 * The slider is rendered on a black background and uses mix-blend-mode difference so
 * the white timeline graphic is visible. We remove all top/bottom padding so the
 * track sits flush against the range input. The inset property ensures the
 * background covers the entire slider wrapper. Pointer events are disabled on
 * the wrapper so the user can interact with the underlying range input.
 */
.zcv-slider-neo {
  background-image: url("https://cdn.prod.website-files.com/6749c352ea66c1921c71d8b8/678a638eaaa0d75f7c744b55_time-line-top-white%40desktop.svg");
  background-repeat: no-repeat;
  background-position: top;
  background-size: 900px 20px;
  padding-top: 0;
  padding-bottom: 0;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: difference;
  background-color: #000;
}

/* Ensure the range input within a slider remains interactive */
/* The range input must sit above the decorative timeline background */
.zcv-slider-neo input[type="range"] {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  height: 40px !important;
}

/* Slim slider thumb for neo sliders */
.zcv-slider-neo input[type="range"]::-webkit-slider-thumb {
  width: 4px;
  height: 40px;
}
.zcv-slider-neo input[type="range"]::-moz-range-thumb {
  width: 4px;
  height: 40px;
}

/* Reduce spacing between consecutive neo sliders to avoid large gaps */
.zcv-slider-neo + .zcv-slider-neo {
  margin-top: 12px;
}

/* Ensure slider labels remain visible on top of the dark background */
.zcv-slider-neo .zcv-slider-labels {
  position: relative;
  z-index: 1;
  pointer-events: none;
  color: #fff !important;
  margin-top: 4px;
}

/*
 * Title styling override.
 * Ensures section titles have consistent margin and sizing.
 */
.zcv-title {
  margin: 0 0 10px !important;
  font-size: 16px !important;
  color: #000 !important;
  text-align: center !important;
  font-weight: 100 !important;
}

/* Adjust privacy text placement and size in the basic step */
.step-basic .zcv-privacy {
  margin-top: 20px !important;
  font-size: 8px !important;
}

/* CTA and Apply/Add buttons sizing */
.zcv-btn.js-cta,
.zcv-btn.zcv-btn-ghost.js-apply,
.zcv-btn.zcv-btn-ghost.js-apply-add {
  border: 0.5px solid #000 !important;
  padding: 5px 50px !important;
  font-weight: 200 !important;
}

/* Hover states for CTA and action buttons */
.zcv-btn.js-cta:hover,
.zcv-btn.zcv-btn-ghost.js-apply:hover,
.zcv-btn.zcv-btn-ghost.js-apply-add:hover {
  border: 0.5px solid #000 !important;
  padding: 5px 50px !important;
  font-weight: 600 !important;
}