/* File: public_html/assets/css/klaro-td.css */
/* Klaro -> TD override (load AFTER klaro.min.css)
   Goals:
   - mobile: fits viewport, scrolls (NO fixed footer)
   - dark mode: readable
   - toggles: always clickable + no double knob
*/

/* =========================================================
   0) Backdrop + base modal sizing (scrollable modal)
   ========================================================= */

#klaro .cookie-modal{
  position: fixed;
  inset: 0;
  z-index: 99999;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

#klaro .cookie-modal .cm-bg{
  background: rgba(0,0,0,.55) !important;
  backdrop-filter: blur(8px);
}

/* Modal shell */
#klaro .cookie-modal .cm-modal.cm-klaro{
  /* Use your site theme variables if present */
  background: var(--bg-card, #fff) !important;
  color: var(--text-primary, #111) !important;
  border: 1px solid var(--border-color, rgba(0,0,0,.12)) !important;
  border-radius: 20px;
  box-shadow: 0 24px 90px rgba(0,0,0,.45);

  width: min(820px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);

  /* NO fixed footer: the modal itself scrolls */
  max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow: auto;

  /* center */
  margin: calc(12px + env(safe-area-inset-top)) auto calc(12px + env(safe-area-inset-bottom));
}

/* =========================================================
   1) Header / body / footer spacing (no sticky/fixed)
   ========================================================= */

#klaro .cookie-modal .cm-header{
  padding: 22px 22px 14px;
  border-bottom: 1px solid var(--border-color, rgba(0,0,0,.10));
  background: transparent !important;
}

#klaro .cookie-modal .cm-header .title,
#klaro .cookie-modal .cm-header h1{
  margin: 0 0 10px;
  font-family: Sora, Inter, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 3.2vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--text-primary, #111) !important;
}

#klaro .cookie-modal .cm-header p{
  margin: 0;
  color: var(--text-muted, rgba(0,0,0,.65)) !important;
  font-size: 1rem;
  line-height: 1.45;
}

#klaro .cookie-modal .cm-body{
  padding: 10px 22px 8px;
}

#klaro .cookie-modal .cm-footer{
  padding: 14px 22px calc(18px + env(safe-area-inset-bottom));
  background: transparent !important;
  border-top: 1px solid var(--border-color, rgba(0,0,0,.10));
}

/* =========================================================
   2) Purposes list (simple, no “details” UX)
   ========================================================= */

#klaro .cookie-modal .cm-purposes{
  list-style: none;
  margin: 0;
  padding: 0;
}

#klaro .cookie-modal .cm-purpose{
  position: relative;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-color, rgba(0,0,0,.10));
}

#klaro .cookie-modal .cm-purpose:last-child{
  border-bottom: 0;
}

/* Hide "details" UX entirely */
#klaro .cookie-modal .cm-services,
#klaro .cookie-modal .cm-caret,
#klaro .cookie-modal .cm-content,
#klaro .cookie-modal .cm-service,
#klaro .cookie-modal .cm-powered-by{
  display: none !important;
}

/* =========================================================
   3) Toggle row: title left, switch right (clickable)
   ========================================================= */

/* Visually hide the checkbox, keep it functional for a11y + :checked */
#klaro .cookie-modal .cm-list-input{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Row */
#klaro .cookie-modal .cm-list-label{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;

  width: 100% !important;
  margin: 0 !important;

  padding: 10px 10px !important;
  border-radius: 14px !important;

  cursor: pointer !important;
  user-select: none !important;

  background: rgba(0,0,0,.03) !important;
}

#klaro .cookie-modal .cm-list-label:hover{
  background: rgba(0,0,0,.05) !important;
}

#klaro .cookie-modal .cm-list-label:focus-within{
  outline: 3px solid rgba(242, 138, 46, .30) !important;
  outline-offset: 2px !important;
}

#klaro .cookie-modal .cm-list-title{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  line-height: 1.2 !important;
  color: var(--text-primary, #111) !important;
}

#klaro .cookie-modal .cm-required{
  flex: 0 0 auto !important;
  margin-left: 8px !important;
  font-size: .9rem !important;
  color: var(--text-muted, rgba(0,0,0,.6)) !important;
  white-space: nowrap !important;
}

#klaro .cookie-modal .cm-list-description{
  margin: 10px 0 0 !important;
  color: var(--text-muted, rgba(0,0,0,.70)) !important;
}

/* Switch (right aligned) */
#klaro .cookie-modal .cm-switch{
  position: static !important; /* override Klaro's absolute; left:0 */
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  pointer-events: none !important; /* click anywhere on the row toggles */
}

#klaro .cookie-modal .cm-switch .slider{
  width: 56px !important;
  height: 32px !important;
  border-radius: 999px !important;
  position: relative !important;

  background: rgba(0,0,0,.12) !important; /* OFF */
  border: 1px solid rgba(0,0,0,.14) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04) !important;
}

/* prevent double knob from any Klaro default */
#klaro .cookie-modal .cm-switch .slider::after{
  content: none !important;
}

#klaro .cookie-modal .cm-switch .slider::before{
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 4px !important;

  width: 24px !important;
  height: 24px !important;
  transform: translateY(-50%) !important;

  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.18) !important;

  transition: transform .18s ease, background-color .18s ease !important;
}

/* ON state comes from input:checked */
#klaro .cookie-modal .cm-list-input:checked + .cm-list-label .cm-switch .slider{
  background: var(--tangerine-500, #E67A3D) !important;
  border-color: transparent !important;
}

#klaro .cookie-modal .cm-list-input:checked + .cm-list-label .cm-switch .slider::before{
  transform: translate(24px, -50%) !important;
}

/* half-checked should NOT look ON */
#klaro .cookie-modal .cm-list-input.half-checked + .cm-list-label .cm-switch .slider{
  background: rgba(0,0,0,.12) !important;
  border: 1px solid rgba(0,0,0,.14) !important;
}
#klaro .cookie-modal .cm-list-input.half-checked + .cm-list-label .cm-switch .slider::before{
  transform: translateY(-50%) !important;
}

/* Disabled (necessary) */
#klaro .cookie-modal .cm-list-input:disabled + .cm-list-label{
  cursor: not-allowed !important;
  opacity: .95 !important;
}

/* =========================================================
   4) Buttons (only accept-all is orange)
   ========================================================= */

#klaro .cookie-modal .cm-footer-buttons{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

#klaro .cookie-modal .cm-btn{
  border-radius: 999px;
  padding: 12px 14px;
  font-weight: 800;
  border: 1px solid var(--border-color, rgba(0,0,0,.18));
  background: rgba(0,0,0,.02);
  color: var(--text-primary, #111);
  cursor: pointer;
}

#klaro .cookie-modal .cm-btn:hover{
  background: rgba(0,0,0,.05);
}

/* neutral (like decline) */
#klaro .cookie-modal .cm-btn-accept{
  background: transparent !important;
  color: var(--text-primary, #111) !important;
  border: 1px solid var(--border-color, rgba(0,0,0,.22)) !important;
}
#klaro .cookie-modal .cm-btn-accept:hover{
  background: rgba(0,0,0,.04) !important;
}

#klaro .cookie-modal .cm-btn-decline{
  background: transparent !important;
}

/* ONLY accept-all orange */
#klaro .cookie-modal .cm-btn-accept-all{
  background: var(--tangerine-500, #E67A3D) !important;
  color: #fff !important;
  border-color: transparent !important;
}
#klaro .cookie-modal .cm-btn-accept-all:hover{
  filter: brightness(1.03);
}

/* =========================================================
   5) Mobile tweaks (bigger tap targets, buttons stacked)
   ========================================================= */

@media (max-width: 520px){
  #klaro .cookie-modal .cm-modal.cm-klaro{
    border-radius: 16px;
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    margin: calc(10px + env(safe-area-inset-top)) auto calc(10px + env(safe-area-inset-bottom));
  }

  #klaro .cookie-modal .cm-header,
  #klaro .cookie-modal .cm-body,
  #klaro .cookie-modal .cm-footer{
    padding-left: 14px;
    padding-right: 14px;
  }

  #klaro .cookie-modal .cm-footer-buttons{
    flex-direction: column;
  }

  #klaro .cookie-modal .cm-btn{
    width: 100%;
  }
}

/* =========================================================
   6) Dark mode
   - works with your .theme-dark variables
   - plus fallback for prefers-color-scheme
   ========================================================= */

.theme-dark #klaro .cookie-modal .cm-modal.cm-klaro{
  background: var(--bg-card, #111) !important;
  color: var(--text-primary, #f2f2f2) !important;
  border-color: var(--border-color, rgba(255,255,255,.14)) !important;
}

.theme-dark #klaro .cookie-modal .cm-header{
  border-bottom-color: var(--border-color, rgba(255,255,255,.14)) !important;
}

.theme-dark #klaro .cookie-modal .cm-footer{
  border-top-color: var(--border-color, rgba(255,255,255,.14)) !important;
}

.theme-dark #klaro .cookie-modal .cm-header p,
.theme-dark #klaro .cookie-modal .cm-list-description,
.theme-dark #klaro .cookie-modal .cm-required{
  color: var(--text-muted, rgba(242,242,242,.78)) !important;
}

.theme-dark #klaro .cookie-modal .cm-list-label{
  background: rgba(255,255,255,.06) !important;
}
.theme-dark #klaro .cookie-modal .cm-list-label:hover{
  background: rgba(255,255,255,.08) !important;
}

.theme-dark #klaro .cookie-modal .cm-switch .slider{
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.18) !important;
}

.theme-dark #klaro .cookie-modal .cm-btn{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: var(--text-primary, #fff) !important;
}
.theme-dark #klaro .cookie-modal .cm-btn:hover{
  background: rgba(255,255,255,.10) !important;
}
.theme-dark #td-cookie-settings{
  background: #333 !important;
  color: var(--tangerine-500, #E67A3D) !important;
  border-color: var(--tangerine-500, #E67A3D) !important;
}

/* fallback if someone uses OS dark mode without theme class */
@media (prefers-color-scheme: dark){
  #klaro .cookie-modal .cm-modal.cm-klaro{
    background: #111 !important;
    color: #f2f2f2 !important;
    border-color: rgba(255,255,255,.14) !important;
  }
  #klaro .cookie-modal .cm-header p,
  #klaro .cookie-modal .cm-list-description,
  #klaro .cookie-modal .cm-required{
    color: rgba(242,242,242,.78) !important;
  }
  #klaro .cookie-modal .cm-list-label{
    background: rgba(255,255,255,.06) !important;
  }
  #klaro .cookie-modal .cm-list-label:hover{
    background: rgba(255,255,255,.08) !important;
  }
  #klaro .cookie-modal .cm-switch .slider{
    background: rgba(255,255,255,.16) !important;
    border-color: rgba(255,255,255,.18) !important;
  }
  #klaro .cookie-modal .cm-btn{
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.14) !important;
    color: #fff !important;
  }
  #klaro .cookie-modal .cm-btn:hover{
    background: rgba(255,255,255,.10) !important;
  }
  #td-cookie-settings{
    background: #333 !important;
    color: #E67A3D !important;
    border-color: #E67A3D !important;
  }
}

/* =========================================================
   7) Cookie settings floating button (unchanged)
   ========================================================= */

#td-cookie-settings{
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 9999;

  width: 64px;
  height: 64px;
  border-radius: 50%;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: #fff;
  color: var(--tangerine-500, #E67A3D);

  border: 2px solid var(--tangerine-500, #E67A3D);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);

  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

#td-cookie-settings:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}

#td-cookie-settings i{
  font-size: 36px;
}