/* Captain Greek – premium site-search bar
   Magento 2.4.7  |  No font-size declarations
------------------------------------------------------------*/

/* ---------- design tokens ---------- */
:root{
    --cg-blue : #2d337f;   /* brand blue  */
    --cg-gold : #b89b65;   /* accent gold */
    --cg-bg   : #fdfdfb;   /* input bg    */
  }
  
  /* ---------- a11y helper ---------- */
  .cg-visually-hidden{
    position:absolute!important;
    width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);border:0;
  }
  
  /* ---------- search-bar shell ---------- */
  #cg-site-searchbar{
    position:relative;
    max-inline-size:600px;
    margin-block:4rem 2.4rem;
    margin-inline:auto;
  }
  
  /* ---------- text input ---------- */
  #cg-site-searchbar .cg-input{
    inline-size:100%;
    padding:.75rem 3.25rem .75rem 1rem;      /* room for icon */
    color:var(--cg-blue);
    background:var(--cg-bg);
    border:2px solid var(--cg-blue);
    border-radius:40px;
    transition:border-color .25s,box-shadow .25s;
    color-scheme:light dark;
  
    /* soft-neumorphic surface */
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,.05),
               0 1px 3px rgba(0,0,0,.06);
  }
  
  #cg-site-searchbar .cg-input::placeholder{
    color:var(--cg-blue);opacity:.55;
  }
  
  #cg-site-searchbar .cg-input:focus-visible{
    outline:none;
    border-color:var(--cg-gold);
    box-shadow:0 0 0 4px color-mix(in srgb,var(--cg-gold) 40%,transparent),
               0 2px 6px rgba(0,0,0,.08);
  }
  
  /* motion-safe */
  @media (prefers-reduced-motion:reduce){
    #cg-site-searchbar .cg-input{transition:none;}
  }
  
  /* ---------- circular submit-icon button ---------- */
  #cg-site-searchbar .cg-icon-btn{
    position:relative;                      /* creates stacking context */
    z-index:3;                              /* above input */
    position:absolute;
    inset-inline-end:.5rem;
    inset-block-start:50%;
    translate:0 calc(35% + 1px);
    inline-size:2.25rem;
    block-size:2.25rem;
    display:grid;place-items:center;
    padding:0;border:0;
    background:var(--cg-gold);color:#fff;
    border-radius:50%;
    cursor:pointer;
    box-shadow:0 2px 4px rgba(0,0,0,.15);
    transition:background .25s,box-shadow .25s,transform .15s ease-out;
  }
  
  #cg-site-searchbar .cg-icon-btn:hover,
  #cg-site-searchbar .cg-icon-btn:focus-visible{
    background:color-mix(in srgb,var(--cg-gold) 85%,black);
    box-shadow:0 4px 8px rgba(0,0,0,.18);
    transform:scale(1.05);
  }
  
  /* ---------- magnifier icon ---------- */
  #cg-site-searchbar .cg-search-icon{
    inline-size:1.15rem;block-size:1.15rem;
    color:currentColor;transition:color .25s;
  }
  
  /* icon tint shift when field focused */
  #cg-site-searchbar:has(.cg-input:focus-visible) .cg-search-icon{
    color:var(--cg-blue);
  }
  
  /* neutralise legacy svg{width:100%} */
  svg.cg-search-icon{max-inline-size:none;block-size:auto;}
  
  /* ---------- optional hit-highlight ---------- */
  mark.cg-hit{
    background:color-mix(in srgb,var(--cg-gold) 65%,white);
    padding-inline:.15em;border-radius:.2em;
  }
  
  /* hide legacy rectangular submit if theme still prints it */
  form.cg-search .action.search{display:none;}
  
 /*────────────────────────────────────────
  Premium loader – works with Magento JS
────────────────────────────────────────*/

/* 1 ▸ pill is anchor for absolute overlay */
#cg-site-searchbar{position:relative;}

/* 2 ▸ overlay: form-sibling OR descendant */
#search_mini_form + .loading-mask[data-role="loader"],
#search_mini_form .loading-mask[data-role="loader"]{
    top: 25%;
    right: 10%;
  backdrop-filter:none !important;
  background:none !important;
}

/* 3 ▸ gold conic spinner (element or pseudo) */
#search_mini_form + .loading-mask .loader,
#search_mini_form .loading-mask .loader,
#search_mini_form + .loading-mask .ajax-widget::after,
#search_mini_form .loading-mask .ajax-widget::after{
  content:'';
  inline-size:2rem; block-size:2rem;
  border-radius:50%;
  background:
    conic-gradient(var(--cg-gold) 0deg, var(--cg-gold) 120deg,
                   transparent 120deg 360deg);
  /* hollow centre → ring */
  mask:radial-gradient(farthest-side,#0000 66%,#000 67%);
  animation:cgSpin .9s linear infinite;
  border:none!important;          /* nuke dashed fallback */
}
@keyframes cgSpin{to{transform:rotate(1turn)}}

/* 4 ▸ honour reduced-motion */
@media (prefers-reduced-motion:reduce){
  #search_mini_form + .loading-mask .loader,
  #search_mini_form .loading-mask .loader{animation:none;}
}

/* 5 ▸ hide Magento’s <img> and “Please wait…” */
#search_mini_form + .loading-mask img,
#search_mini_form + .loading-mask p,
#search_mini_form  .loading-mask img,
#search_mini_form  .loading-mask p{display:none!important;}