@charset "UTF-8";

/**
 * Kadın.ca Cookie Consent
 * Visual layer only. Consent state, persistence and script gating are handled
 * by the existing Stage 6 consent services/JavaScript.
 */

/* ============================================================
   1. FIRST LAYER: COOKIE BANNER
   ============================================================ */
.consent-manager{position:relative;z-index:2147480000}
.consent-banner,.consent-modal,.consent-button,.consent-category,.consent-switch{box-sizing:border-box}
.consent-banner{position:fixed;z-index:2147480001;bottom:max(20px,env(safe-area-inset-bottom));left:50%;width:min(1400px,calc(100% - 64px));max-width:none;padding:24px;border:1px solid var(--line);border-radius: var(--radius-m);background:var(--surface-solid);box-shadow:0 10px 40px rgba(0,0,0,.15);color:var(--ink);font-family:inherit;transform:translateX(-50%);transition:opacity .4s cubic-bezier(.25,1,.5,1),visibility .4s cubic-bezier(.25,1,.5,1),transform .4s cubic-bezier(.25,1,.5,1)}
.consent-banner.is-hidden,.consent-modal-layer.is-hidden{display:none}
.consent-banner__container{width:100%;max-width:none;margin:0 auto}
.consent-banner__inner{display:flex;align-items:center;gap:var(--gap)}
.consent-cookie-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--brand-text)}
.consent-cookie-icon i,.consent-cookie-icon svg{width:32px;height:32px;font-size:32px}
.consent-banner__content{flex-grow:1;min-width:0}
.consent-banner__content p{margin:0;color:var(--ink);font-size:14px;font-weight:500;line-height:1.6}
.consent-banner__actions{display:flex;align-items:center;flex-shrink:0;gap:var(--gap)}
.consent-banner__actions-row{display:flex;gap:var(--gap)}

/* Buttons */
.consent-button{appearance:none;display:inline-flex;align-items:center;justify-content:center;padding:10px 20px;border:2px solid transparent;border-radius: var(--radius-s);background:transparent;color:var(--ink);font:inherit;font-size:14px;font-weight:600;line-height:1.2;text-align:center;text-decoration:none;white-space:normal;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease,opacity .2s ease}
.consent-button:focus-visible,.consent-modal__close:focus-visible,.consent-switch input:focus-visible+span,.site-footer-consent-link:focus-visible{outline:2px solid var(--brand-text);outline-offset:2px}
.consent-button--primary{background:var(--brand-fill);color:var(--on-brand-fill)}
.consent-button--primary:hover{opacity:.9;transform:translateY(-1px);color:var(--on-brand-fill)}
.consent-button--secondary{border-color:var(--line);background:var(--surface-soft);color:var(--ink)}
.consent-button--secondary:hover{background:var(--line)}
.consent-button--outline{border-color:var(--line);background:transparent;color:var(--ink)}
.consent-button--outline:hover{border-color:var(--ink)}
.consent-button[disabled]{cursor:wait;opacity:.62;transform:none}

/* ============================================================
   2. SECOND LAYER: PREFERENCE MODAL
   ============================================================ */
.consent-modal-layer{position:fixed;inset:0;z-index:2147480002;display:flex;align-items:center;justify-content:center;opacity:1;visibility:visible}
.consent-modal-backdrop{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:rgba(0,0,0,.6);backdrop-filter:blur(5px);cursor:default}
.consent-modal{position:relative;display:flex;flex-direction:column;width:100%;max-width:600px;max-height:90vh;margin:20px;overflow:hidden;border:0;border-radius: var(--radius-m);background:var(--surface-solid);color:var(--ink);box-shadow:0 25px 50px -12px rgba(0,0,0,.25);transform:scale(1) translateY(0);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.consent-modal__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line)}
.consent-modal__header h2{margin:0;color:var(--ink);font-family:inherit;font-size:18px;font-weight:700;line-height:1.25;letter-spacing:0}
.consent-modal__close{display:flex;align-items:center;justify-content:center;padding:4px;border:0;border-radius: var(--radius-s);background:transparent;color:var(--muted);font-size:24px;line-height:1;cursor:pointer;transition:color .2s ease}
.consent-modal__close:hover{color:var(--ink)}
.consent-modal__body{padding:24px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.consent-modal__intro{margin:0 0 24px;color:var(--muted);font-size:14px;font-weight:500;line-height:1.6}
.consent-categories{display:flex;flex-direction:column;gap:var(--gap)}
.consent-category{display:grid;grid-template-columns:1fr auto;align-items:flex-start;gap:var(--gap);padding:16px;border:1px solid var(--line);border-radius: var(--radius-m);background:var(--surface-solid);cursor:pointer;touch-action:manipulation;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}
.consent-category:hover{background:var(--surface-soft)}
.consent-category:has(.consent-switch input:checked){border-color:var(--brand-text);background:color-mix(in srgb,var(--brand-fill) 12.5%,transparent);box-shadow:0 4px 12px rgba(0,0,0,.05)}
.consent-category:has(.consent-switch input:disabled){border-color:var(--line);background:var(--surface-soft);cursor:not-allowed;opacity:.72;box-shadow:none}
.consent-category:has(.consent-switch input:disabled):hover{background:var(--surface-soft)}
.consent-switch:has(input:disabled),.consent-switch:has(input:disabled) *{cursor:not-allowed!important}
.consent-category__copy{min-width:0}
.consent-category__copy h3{margin:0 0 4px;color:var(--ink);font-size:14px;font-weight:600;line-height:1.4}
.consent-category__copy p{margin:0;color:var(--muted);font-size:12px;font-weight:500;line-height:1.4}
.consent-error{margin:16px 0 0;padding:11px 13px;border-radius: var(--radius-s);background:var(--danger-soft);color:var(--danger);font-size:12px;font-weight:700;line-height:1.5}
.consent-error.is-hidden{display:none}
.consent-modal__footer{display:flex;align-items:center;justify-content:flex-end;padding:20px 24px;border-top:1px solid var(--line);background:var(--canvas-warm)}
.consent-save{min-width:170px}

/* ============================================================
   3. TOGGLE SWITCH
   ============================================================ */
.consent-switch{position:relative;display:inline-block;flex-shrink:0;width:48px;height:28px;margin:6px 0 0}
.consent-switch input{position:absolute;width:0;height:0;opacity:0}
.consent-switch span{position:absolute;inset:0;border-radius: var(--radius-l);background:var(--line);cursor:pointer;transition:background-color .3s ease}
.consent-switch span::before{position:absolute;content:"";left:2px;top:2px;width:24px;height:24px;border-radius:50%;background:var(--on-inverse);box-shadow:0 2px 4px rgba(0,0,0,.2);transition:transform .3s cubic-bezier(.25,.8,.25,1)}
.consent-switch input:checked+span{background:var(--brand-fill)}
.consent-switch input:checked+span::before{transform:translateX(20px)}
.consent-switch--locked{opacity:.6;cursor:not-allowed}
.consent-switch--locked span{cursor:not-allowed}

.site-footer-consent-link{appearance:none;display:inline-flex;align-items:center;gap:var(--gap);padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:none;cursor:pointer}
.site-footer-consent-link:hover{text-decoration:underline}
body.consent-modal-open{overflow:hidden}
.site-footer-links .site-footer-consent-link{color:var(--muted);font-size:.66rem;line-height:1.4;transition:color var(--transition)}
.site-footer-links .site-footer-consent-link:hover{color:var(--brand-text);text-decoration:none}

/* ============================================================
   4. MOBILE RESPONSIVE
   Mirrors the supplied reference behavior:
   icon/content centered, first two actions share one row,
   remaining actions are full-width rows.
   ============================================================ */
@media(max-width:768px){
  .consent-banner{left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));width:auto;max-width:none;padding:20px;border:1px solid var(--line);border-radius: var(--radius-m);transform:none}
  .consent-banner__container{max-width:none}
  .consent-banner__inner{flex-direction:column;align-items:stretch;gap:var(--gap);text-align:center}
  .consent-cookie-icon{width:100%}
  .consent-banner__content{width:100%}
  .consent-banner__actions{flex-direction:column;width:100%;gap:var(--gap)}
  .consent-banner__actions-row{width:100%;gap:var(--gap)}
  .consent-banner__actions>.consent-button{width:100%;padding:12px}
  .consent-banner__actions-row .consent-button{flex:1;width:50%;padding:12px 10px;white-space:normal}
  .consent-modal{margin:16px;max-height:calc(100vh - 32px)}
  .consent-category{grid-template-columns:1fr auto;align-items:flex-start}
  .consent-modal__footer{flex-direction:column;gap:var(--gap)}
  .consent-modal__footer .consent-button{width:100%}
}

@media(prefers-reduced-motion:reduce){
  .consent-banner,.consent-button,.consent-modal,.consent-modal__close,.consent-category,.consent-switch span,.consent-switch span::before{transition:none}
}