/* Cookie-consent dialog (components/cookie_consent.html).
 *
 * Linked from inside that partial rather than from each page shell, so every
 * shell that includes the banner — base.html, base_marketing.html, base_app.html,
 * the landing layout, get_started.html — gets it styled. The link sits after
 * <head>, so these rules still win ties the way the original inline <style>
 * at the end of <body> did. Moved out of site-chrome.css.
 */
/* Overlay */
  #cc-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(8, 14, 32, .72);
    align-items: center; justify-content: center;
    padding: 20px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  #cc-overlay.cc-visible { display: flex; }

  /* Modal card */
  #cc-modal {
    position: relative;
    max-width: 800px; width: 100%;
    background: linear-gradient(160deg, #ffffff 0%, #f4f7ff 100%);
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    /* Layered depth shadow */
    box-shadow:
      0 2px 4px rgba(0,0,0,.06),
      0 8px 24px rgba(12, 90, 219, .10),
      0 32px 72px rgba(0, 0, 0, .28),
      0 0 0 1px rgba(255,255,255,.9) inset;
    animation: ccSlideUp .35s cubic-bezier(.22,.68,0,1.2);
  }
  @keyframes ccSlideUp {
    from { opacity: 0; transform: translateY(28px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* Gradient accent stripe at top */
  #cc-modal::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg, #0c5adb 0%, #7c3aed 50%, #0c5adb 100%);
    background-size: 200% 100%;
    animation: ccStripe 4s linear infinite;
  }
  @keyframes ccStripe {
    0%   { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
  }

  /* Inner padding wrapper */
  #cc-inner {
    padding: 36px 44px 40px;
  }

  /* Lock icon badge */
  .cc-badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: linear-gradient(135deg, rgba(12,90,219,.1), rgba(124,58,237,.1));
    border: 1px solid rgba(12,90,219,.2);
    color: #0c5adb; font-size: 12px; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase;
    padding: 5px 14px; border-radius: 50px;
    margin-bottom: 18px;
  }

  #cc-modal h3 {
    font-size: 20px; font-weight: 800; color: #0d1420;
    margin: 0 0 14px; letter-spacing: -.3px; line-height: 1.3;
  }

  #cc-modal p {
    font-size: 14px; color: #4b5568; line-height: 1.8;
    margin: 0;
  }
  #cc-modal a {
    color: #0c5adb; font-weight: 600;
    text-decoration: underline; text-underline-offset: 2px;
  }
  #cc-modal a:hover { color: #0a4fc4; }

  /* Divider */
  .cc-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(12,90,219,.15), transparent);
    margin: 28px 0;
  }

  /* Actions row */
  .cc-actions {
    display: flex; flex-wrap: wrap; gap: 12px;
  }

  .cc-btn {
    flex: 1; min-width: 170px;
    cursor: pointer; border: none;
    font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    padding: 15px 18px; border-radius: 10px;
    transition: all .22s ease;
    position: relative; overflow: hidden;
  }

  /* Ghost buttons */
  .cc-btn-ghost {
    background: transparent;
    color: #374151;
    border: 1.5px solid #d1d5db;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
  }
  .cc-btn-ghost:hover {
    border-color: #9ca3af;
    background: #f9fafb;
    box-shadow: 0 3px 10px rgba(0,0,0,.08);
    transform: translateY(-1px);
  }

  /* Primary Accept button */
  .cc-btn-primary {
    color: #fff;
    background: linear-gradient(135deg, #0c5adb 0%, #7c3aed 100%);
    box-shadow: 0 4px 18px rgba(12,90,219,.38), 0 1px 3px rgba(0,0,0,.12);
  }
  .cc-btn-primary::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.15), transparent);
    border-radius: inherit;
  }
  .cc-btn-primary:hover {
    box-shadow: 0 8px 28px rgba(12,90,219,.48), 0 2px 6px rgba(0,0,0,.14);
    transform: translateY(-2px);
    filter: brightness(1.08);
  }

  /* Footer note */
  .cc-note {
    margin-top: 20px;
    font-size: 11px; color: #9ca3af; text-align: center; letter-spacing: .02em;
  }

  @media (max-width: 600px) {
    #cc-inner { padding: 24px 20px 28px; }
    .cc-btn { min-width: 100%; flex: none; }
  }
