/* ======================================================================
   Captain Greek ─ Wizard / Stepper Header
   ONE-FILE VERSION • 2025-08-05
   ==================================================================== */
   .wkvr-stepper{
    /* ─── design tokens ─── */
    --d            : 3.2rem;      /* badge Ø (desktop)          */
    --s            : 1;           /* default scale              */
    --s-hover      : 1.08;        /* scale on hover/active      */
    --d-max        : calc(var(--d)*var(--s-hover));
  
    margin:1.75rem 0 2.75rem;
    font-family:var(--cg-font,@font-family__base);
  
    /* ===== 1. thin progress bar ==================================== */
    .stepper-progress{
      height:6px;border-radius:3px;background:#e8e8e8;
      margin-bottom:1.25rem;overflow:hidden;
      &-bar{height:100%;width:0;background:var(--cg-accent,#b89b65);transition:width .35s}
    }
  
    /* ===== 2. step list ============================================ */
    .stepper-list{
      display:flex;justify-content:space-between;align-items:flex-start;
      list-style:none;margin:1rem 0 0;padding:0;overflow-x:auto;scrollbar-width:thin;
      /*! min-height:5rem; */
    }
  
    /* ===== 3. each step ============================================ */
    .stepper-item{
      position:relative;flex:1 1 0;
      padding-top:var(--d);text-align:center;min-height:var(--d-max);
  
      /* connector */
      &:not(:last-child)::after{
        content:'';position:absolute;z-index:0;
        left:calc(50% + var(--d)/2);         /* start @ badge edge      */
        top:calc(var(--d-max)/2);transform:translateY(-50%);
        width:calc(100% - var(--d)/2);height:3px;background:#e8e8e8;
        transition:background .35s;
      }
      &.completed:not(:last-child)::after{background:var(--cg-accent,#b89b65);}
    }
  
    /* ===== 4. link (badge + label) ================================ */
    .stepper-link{display:inline-flex;flex-direction:column;align-items:center;gap:.4rem;text-decoration:none;}
  
    /* ---- 4a badge ------------------------------------------------- */
    .stepper-circle{
      position:absolute;top:0;left:50%;
      /*! transform-origin:top center !important; */       /* 🔑 pin top edge      */
      transform:translateX(-50%) scale(var(--s));   /* default pose        */
      width:var(--d);height:var(--d);border-radius:50%;
      display:grid;place-content:center;
      background:#e8e8e8;color:#555;
      font:700 1.15rem/1 var(--cg-font,@font-family__base);
      z-index:2;transition:background .25s,color .25s,transform .25s cubic-bezier(.16,.8,.36,1);
    }
  
    /* ---- 4b label ------------------------------------------------- */
    .stepper-label{font-size:.82rem;line-height:1.25;color:var(--cg-text,#2d337f);max-width:8rem;word-break:break-word;transition:color .25s;}
  
    /* ===== 5. states & interactions =============================== */
    .completed .stepper-circle{background:var(--cg-accent,#b89b65);color:#fff;}
    .active   .stepper-circle{/*! transform:translateX(-50%) scale(var(--s-hover)); */background:var(--cg-accent,#b89b65);color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.14);}
    .active   .stepper-label {font-weight:600;}
  
    .stepper-link:is(:hover,:focus-visible) .stepper-circle{
      /*! transform:translateX(-50%) scale(var(--s-hover)); */
      background:var(--cg-accent,#b89b65);color:#fff;
    }
    .stepper-link:focus-visible .stepper-circle{
      outline:3px solid color-mix(in srgb,var(--cg-accent,#b89b65) 55%,transparent);outline-offset:2px;
    }
  
    /* ===== 6. mobile tweaks ======================================= */
    @media(max-width:680px){
      .stepper-item{min-width:6.4rem;}
      
      .stepper-circle{width:2.6rem;height:2.6rem;font-size:1rem;}
      .stepper-progress{height:5px;}
    }
  }
  /* Captain Greek – cancel the global link animation **inside** the wizard */
  .wkvr-stepper .stepper-link:hover,
  .wkvr-stepper .stepper-link:focus {
      /* keep whatever colour you like …*/
      color: var(--cg-text, #2d337f);
  
      /* …but block the translate/scale */
      transform: none !important;
  }
  /* ===========================================================
   Captain Greek · “2025” Progress Bar — BIGGER/LEGIBLE
   =========================================================== */
.cg-progress{
    /* sizes scale a bit with viewport, but stay within bounds */
    --bar-h       : clamp(12px, 0.6vw + 10px, 16px);
    --bar-radius  : 9999px;
    --label-size  : clamp(.90rem, 0.25vw + .85rem, 1.05rem);

    /* brand colours */
    --track-clr   : #e5e5e5;
    --fill-from   : #d4af37;
    --fill-to     : #b89b65;

    position: relative;
    width: 100%;
    height: var(--bar-h);
    border-radius: var(--bar-radius);
    background: var(--track-clr);
    overflow: hidden;
}

.cg-progress__track,
.cg-progress__fill{
    position: absolute; inset: 0;
    border-radius: inherit;
}

/* Thicker, glossy fill with smooth animation */
.cg-progress__fill{
    background: linear-gradient(90deg, var(--fill-from) 0%, var(--fill-to) 100%);
    transition: width .35s cubic-bezier(.16,.8,.36,1);
    display: flex; align-items: center; justify-content: center;
}

/* BIGGER, bolder label */
.cg-progress__label{
    position: absolute;
    right: .65rem;
    top: 50%; transform: translateY(-50%);
    font-family: var(--cg-font, "Inter","Helvetica Neue",sans-serif);
    font-weight: 700;
    font-size: var(--label-size);
    line-height: 1;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.28);
    letter-spacing: .2px;
    pointer-events: none;
}


/* Mobile-first default (keep labels readable on phones) */
.wkvr-stepper .stepper-label{
    display:block;             /* in case something earlier hid it */
    font-size:.95rem;
    line-height:1.25;
  }
  
  /* Tablet+ */
  @media (min-width: 768px){
    .wkvr-stepper .stepper-label{ font-size:1rem; }
  }
  
  /* Large screens only */
  @media (min-width: 1200px){
    .wkvr-stepper .stepper-label{ font-size:1.2rem; }
  }
  /* ===========================================================
   Global Floating “Chip” Labels  •  Captain Greek
   =========================================================== */
:root{
    --cg-blue: #2d337f;
    --cg-accent: #b89b65;
    --form-surface: #fff;                     /* surface behind the chip */
    --chip-offset: calc(-50% + 6px);          /* sit the chip a bit lower */
  }
  
  /* Field container → positioning + predictable stacking */
  .field{
    position: relative;
    isolation: isolate;
    padding-top: .6rem;                       /* room for the chip */
  }
  
  /* Position the label only when the field has text-ish controls */
  .field:has(.control :where(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
  )) > .label{
    position: absolute;
    left: 12px;
    top: 0;                                   /* straddle the border */
    transform: translateY(var(--chip-offset));
    margin: 0;
    line-height: 1;
    z-index: 2;                               /* above input border */
    pointer-events: none;
  }
  
  /* Chip styling lives on the inner <span> */
  .field:has(.control :where(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
  )) > .label > span{
    display: inline-block;
    font: 600 1rem/1 var(--cg-font, "Inter","Helvetica Neue",sans-serif);
    color: var(--cg-blue);                    /* blue label text */
    background: var(--form-surface);
    padding: 0 .55rem;
    border-radius: 6px;
    /* mask the input border so the chip looks “notched” */
    box-shadow: 0 0 0 3px var(--form-surface);
  }
  
  /* Put ONE required star inside the chip */
  .field.required  > .label > span::after,
  .field._required > .label > span::after{
    content: "*";
    margin-left: .3rem;
    color: #d93636;
    font-weight: 700;
  }
  
  /* Remove Magento’s legacy star (prevents double asterisks) */
  .field.required  > .label::after,
  .field._required > .label::after{
    content: none !important;
    display: none !important;
  }
  .field > .label .required{
    display: none !important;
  }
  
  /* Controls – modern look, white background */
  .field .control input:not([type="checkbox"]):not([type="radio"]),
  .field .control select,
  .field .control textarea{
    position: relative;
    z-index: 1;                               /* under the chip */
    width: 100%;
    padding: .75rem 1rem;
    border: 1px solid #d8dee9;
    border-radius: 10px;
    background: #fff !important;              /* ensure pure white */
    box-shadow: 0 1px 0 rgba(13,35,70,.08) inset;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  }
  
  /* Focus ring – gold accent */
  .field .control :where(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
  ):focus{
    outline: none;
    border-color: var(--cg-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cg-accent) 28%, transparent);
  }
  
  /* Error state (works with Magento’s classes) */
  .field._error .control :where(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
  ),
  .field .control :where(input,select,textarea).mage-error{
    border-color: #d63638 !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, #d63638 20%, transparent);
  }
  
  /* Keep global link animations from nudging the wizard stepper */
  .wkvr-stepper .stepper-link:hover,
  .wkvr-stepper .stepper-link:focus{
    transform: none !important;
  }
  
  /* Slightly larger label on big screens */
  @media (min-width: 1200px){
    .field:has(.control :where(
      input:not([type="checkbox"]):not([type="radio"]),
      select,
      textarea
    )) > .label > span{
      font-size: 1.05rem;
    }
  }
  
  /* Small devices: tiny nudge if needed */
  @media (max-width: 480px){
    :root{ --chip-offset: calc(-50% + 4px); }  /* hair higher on very small inputs */
    .field:has(.control :where(
      input:not([type="checkbox"]):not([type="radio"]),
      select,
      textarea
    )) > .label > span{
      font-size: .95rem;
    }
  }
  /* ===========================================================
   Global Floating “Chip” Labels  •  Captain Greek
   =========================================================== */
:root{
    --cg-blue: #2d337f;
    --cg-accent: #b89b65;
    --form-surface: #fff;                     /* surface behind the chip */
    --chip-offset: calc(-50% + 6px);          /* sit the chip a bit lower */
  }
  
  /* Field container → positioning + predictable stacking */
  .field{
    position: relative;
    isolation: isolate;
    padding-top: .6rem;                       /* room for the chip */
  }
  
  /* Position the label only when the field has text-ish controls */
  .field:has(.control :where(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
  )) > .label{
    position: absolute;
    left: 12px;
    top: 0;                                   /* straddle the border */
    transform: translateY(var(--chip-offset));
    margin: 0;
    line-height: 1;
    z-index: 2;                               /* above input border */
    pointer-events: none;
  }
  
  /* Chip styling lives on the inner <span> */
  .field:has(.control :where(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
  )) > .label > span{
    display: inline-block;
    font: 600 1rem/1 var(--cg-font, "Inter","Helvetica Neue",sans-serif);
    color: var(--cg-blue);                    /* blue label text */
    background: var(--form-surface);
    padding: 0 .55rem;
    border-radius: 6px;
    /* mask the input border so the chip looks “notched” */
    box-shadow: 0 0 0 3px var(--form-surface);
  }
  
  /* Put ONE required star inside the chip */
  .field.required  > .label > span::after,
  .field._required > .label > span::after{
    content: "*";
    margin-left: .3rem;
    color: #d93636;
    font-weight: 700;
  }
  
  /* Remove Magento’s legacy star (prevents double asterisks) */
  .field.required  > .label::after,
  .field._required > .label::after{
    content: none !important;
    display: none !important;
  }
  .field > .label .required{
    display: none !important;
  }
  
  /* Controls – modern look, white background */
  .field .control input:not([type="checkbox"]):not([type="radio"]),
  .field .control select,
  .field .control textarea{
    position: relative;
    z-index: 1;                               /* under the chip */
    width: 100%;
    padding: .75rem 1rem;
    border: 1px solid #d8dee9;
    border-radius: 10px;
    background: #fff !important;              /* ensure pure white */
    box-shadow: 0 1px 0 rgba(13,35,70,.08) inset;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  }
  
  /* Focus ring – gold accent */
  .field .control :where(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
  ):focus{
    outline: none;
    border-color: var(--cg-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cg-accent) 28%, transparent);
  }
  
  /* Error state (works with Magento’s classes) */
  .field._error .control :where(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
  ),
  .field .control :where(input,select,textarea).mage-error{
    border-color: #d63638 !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, #d63638 20%, transparent);
  }
  
  /* Keep global link animations from nudging the wizard stepper */
  .wkvr-stepper .stepper-link:hover,
  .wkvr-stepper .stepper-link:focus{
    transform: none !important;
  }
  
  /* Slightly larger label on big screens */
  @media (min-width: 1200px){
    .field:has(.control :where(
      input:not([type="checkbox"]):not([type="radio"]),
      select,
      textarea
    )) > .label > span{
      font-size: 1.05rem;
    }
  }
  
  /* Small devices: tiny nudge if needed */
  @media (max-width: 480px){
    :root{ --chip-offset: calc(-50% + 4px); }  /* hair higher on very small inputs */
    .field:has(.control :where(
      input:not([type="checkbox"]):not([type="radio"]),
      select,
      textarea
    )) > .label > span{
      font-size: .95rem;
    }
  }
  /* ==============================================================
     Captain Greek · Vendor Registration — Modern Form System
     Scope: #vendorregistration-component or .wk-vendor-account-container
     ============================================================== */
  
  /* ---- Design tokens (tweak if needed) ----------------------- */
  :root{
    --cg-font: "Inter","Helvetica Neue",sans-serif;
    --cg-blue: #2d337f;
    --cg-accent: #b89b65;
  
    --field-h: 52px;                 /* consistent control height  */
    --field-radius: 10px;            /* input radius               */
    --field-border: #d8dee9;         /* neutral border             */
    --field-bg: #ffffff;             /* pure white inputs          */
    --surface: #ffffff;              /* card/background for chip   */
  
    --chip-lift: calc(-50% + 6px);   /* sit chip slightly lower    */
  }
  
  /* ====== LAYOUT: responsive grid ============================= */
  :where(#vendorregistration-component, .wk-vendor-account-container) .fieldset{
    max-width: 1040px;
    margin: 0 auto 2.5rem;
    padding: 0 1rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px 22px;
    font-family: var(--cg-font);
  }
  
  /* Full-width heading row */
  :where(#vendorregistration-component, .wk-vendor-account-container) .fieldset > h2.form-label{
    grid-column: 1 / -1;
    font-size: clamp(1.15rem, 0.8rem + 1vw, 1.35rem);
    font-weight: 700;
    color: var(--cg-blue);
    padding-bottom: .6rem;
    border-bottom: 1px solid #e8ecf4;
    box-shadow: 0 10px 10px -10px #e8ecf4;
    margin: 0 0 .25rem 0;
  }
  
  /* Two equal columns on larger screens */
  @media (min-width: 900px){
    :where(#vendorregistration-component, .wk-vendor-account-container) .fieldset{
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 22px 28px;
    }
    /* ensure each .field takes one column by default */
    :where(#vendorregistration-component, .wk-vendor-account-container) .fieldset > .field{
      grid-column: span 1;
    }
  }
  
  /* ====== FIELD base & floating chip labels =================== */
  :where(#vendorregistration-component, .wk-vendor-account-container) .field{
    position: relative;
    isolation: isolate;     /* predictable stacking for the chip */
    padding-top: .6rem;     /* space for chip */
  }
  
  /* Only apply chip to text-ish controls */
  :where(#vendorregistration-component, .wk-vendor-account-container)
  .field:has(.control :where(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
  )) > .label{
    position: absolute;
    left: 12px;
    top: 0;
    transform: translateY(var(--chip-lift));
    margin: 0;
    line-height: 1;
    z-index: 2;
    pointer-events: none;
  }
  
  /* Chip visual */
  :where(#vendorregistration-component, .wk-vendor-account-container)
  .field:has(.control :where(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
  )) > .label > span{
    display: inline-block;
    font: 600 1rem/1 var(--cg-font);
    color: var(--cg-blue);
    background: var(--surface);
    padding: 0 .55rem;
    border-radius: 6px;
    box-shadow: 0 0 0 3px var(--surface); /* notch effect over input border */
  }
  
  /* One required star INSIDE the chip */
  :where(#vendorregistration-component, .wk-vendor-account-container)
  .field.required  > .label > span::after,
  :where(#vendorregistration-component, .wk-vendor-account-container)
  .field._required > .label > span::after{
    content: "*";
    margin-left: .3rem;
    color: #d93636;
    font-weight: 700;
  }
  
  /* Kill Magento’s legacy asterisk (prevents double star) */
  :where(#vendorregistration-component, .wk-vendor-account-container)
  .field.required  > .label::after,
  :where(#vendorregistration-component, .wk-vendor-account-container)
  .field._required > .label::after{
    content: none !important;
    display: none !important;
  }
  :where(#vendorregistration-component, .wk-vendor-account-container)
  .field > .label .required{ display:none !important; }
  
  /* ====== CONTROLS: same width/height, white bg =============== */
  :where(#vendorregistration-component, .wk-vendor-account-container)
  .field .control :where(
    input:not([type="checkbox"]):not([type="radio"]),
    select
  ){
    height: var(--field-h);
  }
  
  :where(#vendorregistration-component, .wk-vendor-account-container)
  .field .control :where(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
  ){
    width: 100%;
    background: var(--field-bg) !important;         /* white */
    border: 1px solid var(--field-border);
    border-radius: var(--field-radius);
    padding: .75rem 1rem;
    box-shadow: 0 1px 0 rgba(13,35,70,.08) inset;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
    color: #222;
  }
  
  /* Textarea reasonable height but visually consistent width */
  :where(#vendorregistration-component, .wk-vendor-account-container)
  .field .control textarea{
    min-height: 120px;
    resize: vertical;
  }
  
  /* Focus ring — gold accent */
  :where(#vendorregistration-component, .wk-vendor-account-container)
  .field .control :where(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
  ):focus{
    outline: none;
    border-color: var(--cg-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cg-accent) 28%, transparent);
  }
  
  /* Error state */
  :where(#vendorregistration-component, .wk-vendor-account-container)
  .field._error .control :where(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
  ),
  :where(#vendorregistration-component, .wk-vendor-account-container)
  .field .control :where(input,select,textarea).mage-error{
    border-color: #d63638 !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, #d63638 20%, transparent);
  }
  
  /* ====== MISC FIXES ========================================== */
  /* Stop global <a> hover animations from nudging steppers/labels */
  .wkvr-stepper .stepper-link:hover,
  .wkvr-stepper .stepper-link:focus{
    transform: none !important;
  }
  
  /* Slightly larger chip on big screens */
  @media (min-width: 1200px){
    :where(#vendorregistration-component, .wk-vendor-account-container)
    .field:has(.control :where(
      input:not([type="checkbox"]):not([type="radio"]),
      select,
      textarea
    )) > .label > span{
      font-size: 1.05rem;
    }
  }
  
  /* Micro-adjust chip position on narrow screens */
  @media (max-width: 480px){
    :root{ --chip-lift: calc(-50% + 4px); }
    :where(#vendorregistration-component, .wk-vendor-account-container)
    .field:has(.control :where(
      input:not([type="checkbox"]):not([type="radio"]),
      select,
      textarea
    )) > .label > span{
      font-size: .95rem;
    }
  
    /* Single column is already default; keep gaps breathable */
    :where(#vendorregistration-component, .wk-vendor-account-container) .fieldset{
      gap: 16px 18px;
    }
  }
  /* === Vendor form: make every control the same width ================== */
  :where(#vendorregistration-component, .wk-vendor-account-container) .fieldset .field{
    min-width: 0;                 /* allow grid item to shrink */
  }
  :where(#vendorregistration-component, .wk-vendor-account-container) .fieldset .field .control{
    width: 100%;
    min-width: 0;
    display: block;
    box-sizing: border-box;
  }
  
  /* Inputs/selects/textarea fill the column and ignore theme caps */
  :where(#vendorregistration-component, .wk-vendor-account-container)
  .field .control :where(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
  ){
    width: 100% !important;
    max-width: 100% !important;    /* kill any theme max-width */
    box-sizing: border-box;
  }
  
  /* Some themes cap .input-text specifically */
  :where(#vendorregistration-component, .wk-vendor-account-container)
  .field .control .input-text{
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Keep password/confirmation consistent too */
  :where(#vendorregistration-component, .wk-vendor-account-container)
  .field.password .control .input-text,
  :where(#vendorregistration-component, .wk-vendor-account-container)
  .field.confirmation .control .input-text{
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Make ONLY the ACORD upload field span both grid columns */
:where(#vendorregistration-component, .wk-vendor-account-container)
.fieldset > .field.cg-span-full{
grid-column: 1 / -1 !important;
}

/* Kill theme width caps inside that field */
:where(#vendorregistration-component, .wk-vendor-account-container)
.fieldset > .field.cg-span-full .control{
max-width: none !important;
width: 100% !important;
}

:where(#vendorregistration-component, .wk-vendor-account-container)
.fieldset > .field.cg-span-full .control :where(.note, .extra-note){
max-width: none !important;
width: 100% !important;
float: none !important;    /* some themes float .note */
display: block !important;
}

/* Premium card styling you already liked */
.cg-card{
background:#f7f9fc;
border:1px solid #e8ecf4;
border-left:4px solid var(--cg-accent,#b89b65);
border-radius:10px;
padding:16px 18px;
}

/* Multi‑column the ACORD list so it’s short vertically */
.cg-insurance ul{              /* if your list is <ul> */
list-style: disc outside;
margin:10px 0 0;
padding-left:1.15rem;
column-gap:28px;
}
@media (min-width: 900px){
.cg-insurance ul{ column-count: 2; }
}
@media (min-width: 1300px){
.cg-insurance ul{ column-count: 3; }
}
.cg-insurance li{ break-inside: avoid; margin:6px 0 10px; }

/* Emphasize the Certificate Holder block/address */
.cg-insurance .cg-li-holder{
background:#f5f7ff;
border-left:3px solid var(--cg-accent,#b89b65);
border-radius:8px;
padding:10px 12px;
}
.cg-insurance .cg-li-holder > strong{
display:block; margin-bottom:4px; color:var(--cg-blue,#2d337f);
}
.cg-insurance .cg-addr{
display:block; font-weight:700; color:var(--cg-blue,#2d337f); line-height:1.45;
}

/* Optional: ease reading a long list */
.cg-insurance .cg-footnote{ font-size:12.5px; color:#4b5563; margin-top:10px; }
/* ACORD section — professional layout */
.cg-insurance{ margin-top: 8px; }
.cg-ins-title{
  font-weight: 700; color: var(--cg-blue,#2d337f);
  margin: 2px 0 10px; font-size: 1.05rem;
}

/* Callout for the Certificate Holder block */
.cg-holder{
  background: #f5f7ff;
  border-left: 4px solid var(--cg-accent,#b89b65);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.cg-holder-kicker{
  text-transform: uppercase; letter-spacing: .04em;
  font-weight: 800; color: var(--cg-blue,#2d337f);
  font-size: .82rem; margin-bottom: 4px;
}
.cg-holder-name{ font-weight: 800; color: var(--cg-blue,#2d337f); }
.cg-holder-subs{ font-size: .95rem; color: #334155; }
.cg-holder-addr{
  margin-top: 6px; font-style: normal; line-height: 1.45;
  font-weight: 700; color: var(--cg-blue,#2d337f);
}

/* Checklist grid — no bullets, card rows with icon */
.cg-req-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px 18px;
}
.cg-req{
  display: flex; align-items: flex-start; gap: 12px;
  background: #fff;
  border: 1px solid #e8ecf4;
  border-radius: 10px;
  padding: 12px 14px;
}
.cg-req-icon{
  flex: 0 0 28px; width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-weight: 800; color: #fff;
  background: linear-gradient(90deg,#d4af37,#b89b65);
  box-shadow: 0 2px 8px rgba(184,155,101,.28);
}
.cg-req-title{
  font-weight: 700; color: var(--cg-blue,#2d337f);
  margin-bottom: 4px;
}
.cg-req-body p{ margin: 0; line-height: 1.55; }
.nowrap{ white-space: nowrap; }

.cg-footnote{
  margin-top: 12px; font-size: 12.5px; color: #4b5563;
}

/* Reuse your generic card pattern */
.cg-card{
  background: #f7f9fc;
  border: 1px solid #e8ecf4;
  border-left: 4px solid var(--cg-accent,#b89b65);
  border-radius: 10px;
  padding: 16px 18px;
}
/* Subtle “Allowed extensions” chip next to file inputs */
:where(#vendorregistration-component, .wk-vendor-account-container)
.field:has(input[type="file"]) .note{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .4rem;
  padding: .35rem .55rem;
  border: 1px solid #e8ecf4;
  border-radius: 8px;
  background: #f8fafc;                 /* blends with your form */
  color: #475569;                       /* muted slate */
  font-size: .9rem;
  line-height: 1.35;
}

/* Small gold “info” dot */
:where(#vendorregistration-component, .wk-vendor-account-container)
.field:has(input[type="file"]) .note::before{
  content: "i";
  width: 18px; height: 18px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-weight: 700; font-size: .8rem; color: #fff;
  background: linear-gradient(90deg,#d4af37,#b89b65);
  box-shadow: 0 1px 5px rgba(184,155,101,.25);
}

/* Slightly dim the text so it doesn’t shout */
:where(#vendorregistration-component, .wk-vendor-account-container)
.field:has(input[type="file"]) .note > span{
  opacity: .92;
}

:root { --cg-accent:#2d337f; --cg-text:#1b2a3a; --cg-sub:#334155; --cg-surface:#ffffff; --cg-line:#e6e9ef; }
.cg-badge-card{
  margin:14px 0 22px; padding:16px 18px 14px;
  background:var(--cg-surface);
  border:1px solid var(--cg-line); border-left:6px solid var(--cg-accent);
  border-radius:8px; box-shadow:0 1px 2px rgba(16,24,40,.04); color:var(--cg-text);
  font-size:14.5px; line-height:1.65;
}
.cg-badge-card__title{
  font-weight:700; font-size:15.5px; letter-spacing:.2px; margin:0 0 6px;
}
.cg-badge-card__intro{
  margin:0 0 10px; color:var(--cg-sub);
  text-align:justify; text-justify:inter-word; hyphens:auto;
}
.cg-badge-card__privacy{ margin:0 0 12px; color:var(--cg-sub); }
.cg-badge-list{
  margin:0; padding-left:1.1rem;
  column-width:320px; column-gap:32px;  /* responsive multi-column */
}
.cg-badge-list li{ margin:.35rem 0; break-inside:avoid; }
.cg-badge-chip{
  display:inline-block; margin-left:.35rem; padding:.15rem .5rem;
  border-radius:999px; background:#eef2ff; color:var(--cg-accent);
  font-weight:700; font-size:.88em; white-space:nowrap;
}
/* Make the group title and our badge card occupy the entire row */
:where(#vendorregistration-component, .wk-vendor-account-container) 
.fieldset > .form-label{
grid-column: 1 / -1 !important;
}

/* Our wrapper is a grid item that spans both columns */
:where(#vendorregistration-component, .wk-vendor-account-container) 
.fieldset > .cg-badge-wrap{
grid-column: 1 / -1 !important;
width: 100%;
clear: both;               /* guard for themes that use floats */
}

/* Ensure the inner card stretches nicely */
:where(#vendorregistration-component, .wk-vendor-account-container)
.cg-badge-card{ width:100%; box-sizing:border-box; }


/* Reuse your cg-card look; add a couple of shop-URL specific touches */
.cg-card{
  background:#f7f9fc;
  border:1px solid #e8ecf4;
  border-left:4px solid var(--cg-accent,#b89b65);
  border-radius:10px;
  padding:16px 18px;
}
.cg-shopurl-card{ margin: 8px 0 12px; }
.cg-shopurl-title{
  font-weight:700; color:var(--cg-blue,#2d337f);
  margin-bottom:6px; font-size:1.05rem;
}
.cg-shopurl-intro{ margin:.25rem 0 .5rem; line-height:1.55; color:#23324d; }
.cg-shopurl-points{ margin:.25rem 0 0; padding-left:1.1rem; }
.cg-shopurl-points li{ margin:.25rem 0; }

.cg-url-preview{
  margin-top:8px;
  padding:8px 10px;
  border:1px dashed #cbd5e1;
  border-radius:8px;
  background:#f5f7ff;
  color:#2d337f;
  font-weight:600;
  word-break: break-all;
}

/* Ensure the step title and our card span the whole form width */
:where(#vendorregistration-component, .wk-vendor-account-container) 
.fieldset > .form-label { grid-column: 1 / -1 !important; }
:where(#vendorregistration-component, .wk-vendor-account-container) 
.fieldset > .cg-span-full { grid-column: 1 / -1 !important; }
/* Full-row helpers for the vendor wizard grid */
:where(#vendorregistration-component, .wk-vendor-account-container)
.fieldset > .form-label { grid-column: 1 / -1 !important; }
:where(#vendorregistration-component, .wk-vendor-account-container)
.fieldset > .cg-span-full { grid-column: 1 / -1 !important; }

/* Card + preview styling (brand-aligned) */
.cg-card{
  background:#f7f9fc;
  border:1px solid #e8ecf4;
  border-left:4px solid var(--cg-accent,#b89b65);
  border-radius:10px;
  padding:16px 18px;
}
.cg-shopurl-card{ margin: 8px 0 12px; }
.cg-shopurl-title{
  font-weight:700; color:var(--cg-blue,#2d337f);
  margin-bottom:6px; font-size:1.05rem;
}
.cg-shopurl-intro{ margin:.25rem 0 .5rem; line-height:1.55; color:#23324d; }
.cg-shopurl-points{ margin:.25rem 0 0; padding-left:1.1rem; }
.cg-shopurl-points li{ margin:.25rem 0; }

.cg-url-preview{
  margin-top:8px;
  padding:12px 14px;
  border:1px dashed #cbd5e1;
  border-radius:10px;
  background:#f5f7ff;
  color:#2d337f;
  font-weight:700;
  word-break: break-all;
}
/* Wider wrapper so two pricing cards fit side-by-side */
.cg-membership-wrap{
  max-width: 1400px;              /* room for 2 wide cards */
  margin: 16px auto 28px;
  padding: 0 16px;
}

/* Grid for the four plans */
.cg-embedded-page .cg-pricing-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(520px, 1fr));
  gap: 24px;
  align-items: stretch;
}

/* Stack on narrower screens */
@media (max-width: 1200px){
  .cg-embedded-page .cg-pricing-grid{ grid-template-columns: 1fr; }
}

/* Card chrome for each plan we move into the grid */
.cg-embedded-page .cg-plan{
  background: #fff;
  border: 1px solid #e8ecf4;
  border-radius: 10px;
  padding: 16px 18px;
  
}

/* Neutralize Magezon layout constraints INSIDE our grid items */
.cg-embedded-page .cg-pricing-grid .mgz-container,
.cg-embedded-page .cg-pricing-grid .mgz-element-row,
.cg-embedded-page .cg-pricing-grid .mgz-element-column{
  width: auto !important;
  max-width: none !important;
  float: none !important;
  display: block !important;
  box-sizing: border-box;
}

/* Make inner “two-column” feature rows inside each plan behave like a grid */
.cg-embedded-page .cg-plan .mgz-element-row .inner-content{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}
@media (max-width: 800px){
  .cg-embedded-page .cg-plan .mgz-element-row .inner-content{ grid-template-columns: 1fr; }
}

/* Keep the heading area from the CMS tidy inside this embedded context */
.cg-embedded-page .page-title-wrapper,
.cg-embedded-page .breadcrumbs{ display:none; }
/* Make the plan cards contain Magezon's floated columns */
.cg-plan { position: relative; }
.cg-plan::after { content: ""; display: block; clear: both; }

/* Inside our cards, stop the default Magezon column floats */
.cg-plan .mgz-element-column { float: none !important; width: auto !important; }
.cg-plan .mgz-element-inner  { width: 100% !important; }

/* Keep the action row under the table and full‑width */
.cg-plan-actions { margin: 14px 0 4px; display: flex; gap: 10px; }
.cg-plan .cg-btn { width: 100%; justify-content: center; }   /* optional: full‑width button */

/* 2×2 grid for the four plans */
.cg-pricing-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(480px, 1fr));
  gap:22px;
  align-items:start;
  margin-top:18px;
}
@media (max-width:1180px){
  .cg-pricing-grid{ grid-template-columns:1fr; }
}

/* Plan wrapper and float neutralization so content isn’t cut */
.cg-plan{
  background:#fff;
  border:1px solid #e8ecf4;
  border-radius:10px;
  padding:12px;
  position:relative;
  overflow:visible;
}
.cg-plan::after{ content:""; display:block; clear:both; }
.cg-plan .mgz-element-column{ float:none !important; width:auto !important; }
.cg-plan .mgz-element-inner { width:100% !important; }
/* Let grid stretch items, and make each card fill its grid track */
.cg-pricing-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(520px, 1fr));
  gap:24px;
  align-items:stretch;            /* equal height within each row */
}
@media (max-width:1200px){
  .cg-pricing-grid{ grid-template-columns:1fr; }
}

/* Card chrome – flex so content grows nicely */
.cg-plan{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid #e8ecf4; border-radius:10px;
  padding:16px 18px; overflow:visible;     /* important: no clipping */
}
.cg-plan > .mgz-element-column{ flex:1 1 auto; }  /* fill height */

:root{
  --cg-blue:#2d337f;   /* brand */
  --cg-gold:#b89b65;   /* brand accent */
  --msg-radius:10px;
  --msg-shadow:0 6px 18px rgba(0,0,0,.06);
}

/* Base message shell */
.message{
  position:relative;
  display:block;
  margin:8px 0;
  padding:12px 16px 12px 52px !important; /* space for the icon bubble */
  line-height:1.5;
  font-size:14.5px;
  border:1px solid;
  border-left-width:6px;
  border-radius:var(--msg-radius);
  box-shadow:var(--msg-shadow);
  background:#fff; /* default fallback */
}

/* SUCCESS */
.message.success{
  background:#edf7ed;                         /* soft green tint */
  color:#1b5e20;                               /* readable green */
  border-color:rgba(46,125,50,.22);
  border-left-color:#2e7d32;                   /* accent bar */
}
.available.message.success{ padding:12px 16px 12px 52px !important; } /* override any zeroing */

/* ERROR */
.message.error{
  background:#fdecec;                          /* soft red tint */
  color:#7f0014;                               /* readable red */
  border-color:rgba(176,0,32,.22);
  border-left-color:#b00020;                   /* accent bar */
}
.available.message.error{ padding:12px 16px 12px 52px !important; }  /* override any zeroing */

/* Icon bubbles (uses your existing ::before content) */
.available.message.success::before,
.available.message.error::before{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:24px;
  height:24px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:700;
  color:#fff;
}

/* Specific bubble colors + subtle halo that matches the background */
.available.message.success::before{
  /* content: "✔" already set in your CSS via \2714 */
  background:#2e7d32;
  box-shadow:0 0 0 3px #edf7ed;
}
.available.message.error::before{
  /* content: "✕" already set in your CSS via \2715 */
  background:#b00020;
  box-shadow:0 0 0 3px #fdecec;
}

/* Links inside messages — keep brand feel, no heavy underline */
.message a{
  color:var(--cg-blue);
  text-decoration:underline;
  text-underline-offset:2px;
}

/* Optional: compact variant if needed somewhere */
.message.--compact{
  padding:10px 14px 10px 46px !important;
  font-size:14px;
  box-shadow:0 3px 12px rgba(0,0,0,.05);
}