/*
 * CaptainGreek Phase 2 — Registration Contract Extraction
 * Extracted from the vendor-registration PHTML so later phases can evolve safely.
 * This file intentionally preserves the existing selectors and visual behavior.
 */
: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);
}


.cg-loader{ display:inline-flex; align-items:center; gap:8px; vertical-align:middle; }
.sr-only{ position:absolute!important; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.cg-loader.no-display { display: none !important; }

.cg-spinner{
  width:18px; height:18px; box-sizing:border-box;
  border:2.5px solid rgba(45,51,127,.18);
  border-top-color:var(--cg-gold);
  border-right-color:rgba(45,51,127,.36);
  border-radius:50%;
  animation: cgspin .8s linear infinite;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.6);
}
@keyframes cgspin{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  .cg-spinner{ animation:cgpulse 1.6s ease-in-out infinite; }
  @keyframes cgpulse{ 0%,100%{opacity:.75} 50%{opacity:1; transform:scale(1.06)} }
}

/* Intro modal and insurance notes */
:root { --cg-blue:#2d337f; --cg-gold:#b89b65; }
  .nowrap{ white-space:nowrap; }

  /* --- Modal shell (scroll-safe on mobile & desktop) --- */
  .cg-no-scroll{ overflow:hidden; }
  .cg-modal{
    position:fixed; inset:0; z-index:9999;
    display:none; /* toggled by .is-open */
    padding:4vh 12px;            /* viewport-safe gutters */
    overflow:auto;               /* allow outer scroll if needed */
    -webkit-overflow-scrolling:touch;
    background:rgba(20,24,32,.6); backdrop-filter: blur(2px);
  }
  .cg-modal.is-open{ display:flex; align-items:flex-start; justify-content:center; }

  .cg-modal__panel{
    position:relative; width:min(720px, 100%); background:#fff;
    border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.25);
    border:1px solid rgba(45,51,127,.15);
    padding:20px 20px 16px;
    max-height:88vh;             /* fallback for browsers without dvh */
    overflow:auto;               /* inner panel scroll */
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  @supports (height: 1dvh) {
    .cg-modal__panel{ max-height:calc(100dvh - 8vh); }
  }

  .cg-modal__close{
    position:absolute; top:6px; right:8px; border:0; background:transparent;
    font-size:26px; line-height:1; cursor:pointer; color:var(--cg-blue);
  }

  .cg-modal__header{ padding:4px 0 8px; border-bottom:1px solid rgba(45,51,127,.12); margin-bottom:10px; }
  .cg-modal__kicker{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--cg-gold); font-weight:600; }
  .cg-modal__title{ margin:3px 0 0; font-size:20px; color:var(--cg-blue); }

  .cg-modal__body{ font-size:15px; line-height:1.6; color:#333; }
  .cg-section-title{ margin:12px 0 6px; font-weight:700; color:var(--cg-blue); font-size:16px; }
  .cg-ul{ margin:6px 0 10px 1.1em; }
  .cg-ul li{ margin:4px 0; }
  .cg-mini{ font-size:13px; color:#444; }

  .cg-disclaimer{
    margin-top:8px; padding:10px 12px; background:#f7f9fc; border-left:4px solid var(--cg-blue);
    border-radius:6px; font-size:13px;
  }
  .cg-modal__actions{ margin-top:12px; display:flex; justify-content:flex-end; }
  .cg-modal__ok{
    background-color:var(--cg-blue); color:#fff; border:1px solid var(--cg-blue);
    border-radius:8px; padding:10px 16px; cursor:pointer;
  }
  .cg-modal__ok:hover{ background-color:var(--cg-gold); border-color:var(--cg-gold); color:#fff; }

  /* --- Insurance notes in the ACORD card elsewhere on the page --- */
  .cg-insurance .cg-merge-note{
    margin:10px 0 12px; padding:10px 12px; background:#fff8e6;
    border-left:4px solid var(--cg-gold); border-radius:6px; font-size:14px;
  }
  .cg-insurance .cg-privacy-note{
    margin:10px 0 0; padding:10px 12px; background:#f7f9fc;
    border-left:4px solid var(--cg-blue); border-radius:6px; font-size:13px;
  }