/* Modern, slim cookie banner styles
   - centered pill with sensible max-width
   - compact buttons and subtle glass effect
   - mobile: full-width rounded bar
   - static widget (optional) kept small at bottom-right
*/

:root{
  --cp-bg: rgba(255,255,255,0.98);
  --cp-text: #0b2440;
  --cp-accent: #0C3B5E;
  --cp-accent-weak: #286b9e;
  --cp-muted: #6b7280;
  --cp-shadow: rgba(12,59,94,0.08);
  --cp-border: rgba(12,59,94,0.06);
  --cp-radius: 12px;
  /* Raise above other UI (mobile nav used ~13000 z-index elsewhere).
    Set very high to outrank site overlays (e.g. 20k, 99k) that appear on some pages. */
  --cp-z: 400000;
  --cp-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Base for pill or optional widget */
.cookie-pill,
.cookie-widget{
  font-family: var(--cp-font);
  color: var(--cp-text);
  background: linear-gradient(180deg, var(--cp-bg), rgba(250,250,252,0.98));
  border: 1px solid var(--cp-border);
  box-shadow: 0 10px 30px var(--cp-shadow);
  border-radius: 999px;
  padding: 10px 14px;
  z-index: var(--cp-z);
  display: flex;
  gap: 12px;
  align-items: center;
  line-height: 1.35;
}

/* Ensure cookie UI sits above other overlays (defensive) */
.cookie-pill, .cookie-widget { z-index: var(--cp-z) !important; }

/* Slim centered pill for modern look */
.cookie-pill{
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 12px) + 10px);
  transform: translateX(-50%);
  width: min(92%, 720px); /* narrow on wide screens */
  max-width: 720px;
  padding: 12px 16px;
  font-size: 14px;
}

.cookie-pill .cp-text{
  flex: 1 1 auto;
  min-width: 0;
  color: var(--cp-text);
}

.cookie-pill .cp-actions{
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 0 0 auto;
}

.cp-btn{
  appearance: none;
  border: 1px solid var(--cp-accent);
  background: transparent;
  color: var(--cp-accent);
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}

.cp-btn.primary{
  background: var(--cp-accent);
  color: #fff;
  border-color: var(--cp-accent);
  box-shadow: 0 6px 14px rgba(12,59,94,0.12);
}

/* Optional static widget (smaller card bottom-right) */
.cookie-widget{
  position: fixed;
  right: 20px;
  bottom: calc(env(safe-area-inset-bottom, 12px) + 12px);
  width: 340px;
  max-width: calc(100% - 40px);
  flex-direction: column;
  padding: 12px;
  gap: 10px;
}

/* Polished modern look tweaks */
.cookie-pill{
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(250,250,252,0.78));
  border: 1px solid rgba(12,59,94,0.06);
}

.cookie-pill .brand {
  display:flex; align-items:center; gap:10px; flex:0 0 auto; margin-right:6px;
}
.cookie-pill .brand img{ width:32px; height:32px; border-radius:6px; object-fit:cover; }
.cookie-pill .cp-text{ font-size:13px; color:var(--cp-text); }

.cp-btn{ font-size:13px; padding:8px 12px; }

/* subtle entrance animation */
.cookie-pill{ transform: translate(-50%, 10px); opacity:0; transition: transform .32s cubic-bezier(.2,.9,.2,1), opacity .28s ease; }
.cookie-pill.show{ transform: translate(-50%,0); opacity:1; }

/* Make secondary link-style button subtle */
.cp-btn.ghost{ background:transparent; border:0; color:var(--cp-accent-weak); padding:6px 8px; font-weight:600; }

/* Tighten layout for desktop */
.cookie-pill .cp-actions{ align-items:center; }

/* Modal / settings styling */
.consent-backdrop{ position:fixed; inset:0; background:rgba(6,12,20,0.45); display:none; align-items:center; justify-content:center; z-index:450000; }
.consent-dialog{ width:640px; max-width:calc(100% - 40px); background: #fff; border-radius:12px; padding:20px; box-shadow:0 30px 60px rgba(5,10,20,0.25); position:relative; z-index:450001; }
.consent-dialog h2{ margin:0 0 10px; font-size:18px; }
/* increase spacing below paragraph so the divider line doesn't touch text */
.consent-dialog p{ margin:0 0 14px; }
.consent-dialog .row{ display:flex; justify-content:space-between; align-items:center; padding:14px 0 12px; border-top:1px dashed rgba(0,0,0,0.06);} 
.consent-dialog .row:first-of-type{ border-top:0; padding-top:0; }
.consent-dialog .row .desc{ color:var(--cp-muted); font-size:13px; }
.consent-dialog .modal-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }

/* Ensure modal is always visible when displayed */
.consent-backdrop[style*="display: flex"],
.consent-backdrop[style*="display:flex"] { 
  display: flex !important; 
  visibility: visible !important;
  opacity: 1 !important;
}

/* Dark mode support for modal */
[data-theme="dark"] .consent-backdrop{ background:rgba(0,0,0,0.7); }
[data-theme="dark"] .consent-dialog{ background: #1a2332; color: #e8eef5; box-shadow:0 30px 60px rgba(0,0,0,0.5); }
[data-theme="dark"] .consent-dialog h2{ color: #ffffff; }
[data-theme="dark"] .consent-dialog .row{ border-top:1px dashed rgba(255,255,255,0.1); }
[data-theme="dark"] .consent-dialog .row .desc{ color: #9ca3af; }
[data-theme="dark"] .cp-btn{ color: #60a5fa; border-color: #60a5fa; }
[data-theme="dark"] .cp-btn.primary{ background: #2563eb; border-color: #2563eb; color: #ffffff; }


.cookie-widget .widget-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.cookie-widget .widget-header h3{
  margin:0; font-size:15px; font-weight:700; color:var(--cp-accent);
}

.cookie-widget .widget-body{ font-size:13px; color:var(--cp-text); }

.cookie-widget .widget-actions{ display:flex; gap:8px; justify-content:flex-end; }

/* Switch styling (simple) */
.switch{ width:44px; height:24px; border-radius:16px; background:#eef4fb; position:relative; cursor:pointer; border:1px solid rgba(0,0,0,0.04); }
.switch .knob{ position:absolute; top:3px; left:3px; width:18px; height:18px; background:#fff; border-radius:50%; box-shadow:0 2px 6px rgba(0,0,0,0.08); transition:left .14s ease; }
.switch.on{ background:var(--cp-accent); }
.switch.on .knob{ left:23px; }

/* Accessibility focus */
.cookie-pill button:focus, .cookie-widget button:focus{ outline:3px solid rgba(12,59,94,0.12); outline-offset:2px; }

/* Mobile: pill becomes full-width rounded bar with stacked actions */
@media (max-width:640px){
  .cookie-pill{
    left: 12px;
    right: 12px;
    transform: none;
    width: calc(100% - 24px);
    border-radius: 12px;
    padding: 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .cookie-pill .cp-actions{ justify-content:flex-end; }
  .cookie-widget{ right:12px; bottom:12px; width: calc(100% - 24px); }
}

/* Helper to hide if JS sets hidden */
.cookie-pill[hidden], .cookie-widget[hidden]{ display:none !important; }

/* End of cookie styles */
/*
 * Cookie widget as a full-width bar at the bottom of the screen.
 * Replaces the previous floating widget in the bottom-right corner.
 * Uses CSS variables for background and text colours so that it adapts
 * automatically to the light or dark theme. It slides up into view
 * when active, just like the original widget.
 */
.cookie-widget{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* A sáv a képernyő alján fut végig; a szélességet 90%-ra korlátozzuk, hogy ne legyen túl széles nagy kijelzőn. */
    width: 90%;
    max-width: none;
    /* Kényelmesebb méretű belső margó a jobb olvashatóság érdekében */
    padding: 0.75rem 1rem;
    background: var(--card-bg, #ffffff);
    color: var(--text-color, #003366);
    border-radius: 0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
    /* Modern, konzisztens cookie pill / widget stílus (mobilra és asztalra) */
  /* Keep a consistent cp-z for the whole stylesheet so overrides work predictably */
  :root{
    --cp-bg: #ffffff;
    --cp-text: #0b2440;
    --cp-accent: #0C3B5E;
    --cp-accent-2: #0E5A8A;
    --cp-muted: #6b7280;
    --cp-shadow: rgba(12,59,94,0.12);
    --cp-border: #e8e8ef;
    --cp-radius: 12px;
    --cp-z: 400000;
    --cp-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  }

    /* Shared base for dynamic pill and optional static widget */
    .cookie-pill,
    .cookie-widget{
        font-family: var(--cp-font);
        color: var(--cp-text);
        background: linear-gradient(180deg,var(--cp-bg),#fbfdff);
        border: 1px solid var(--cp-border);
        box-shadow: 0 12px 30px var(--cp-shadow);
        border-radius: 999px;
        padding: 12px 16px;
        z-index: var(--cp-z);
        display: flex;
        gap: 12px;
        align-items: center;
        max-width: 980px;
        width: calc(100% - 48px);
        line-height: 1.35;
        font-size: 15px;
    }

    /* Centered pill (dynamic, JS-inserted) */
    .cookie-pill{
        position: fixed;
        bottom: 22px;
        left: 50%;
        transform: translateX(-50%);
        transition: transform .18s ease, opacity .18s ease;
    }

    /* Static widget style (if you place .cookie-widget in HTML) */
    .cookie-widget{
        position: fixed;
        right: 22px;
        bottom: 22px;
        width: 420px;
        max-width: calc(100% - 40px);
        border-radius: var(--cp-radius);
        flex-direction: column;
        padding: 14px;
        gap: 10px;
        align-items: stretch;
        transition: transform .24s ease, opacity .24s ease;
    }

    /* Header inside widget */
    .cookie-widget .widget-header{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        padding-bottom:6px;
        border-bottom:1px solid var(--cp-border);
    }
    .cookie-widget .widget-header h3{
        margin:0;
        font-size:16px;
        font-weight:600;
        color:var(--cp-accent);
    }
    .cookie-widget .close-widget{
        background:transparent;
        border:0;
        font-size:18px;
        line-height:1;
        cursor:pointer;
        color:var(--cp-muted);
        padding:6px;
        border-radius:8px;
    }
    .cookie-widget .close-widget:hover{ background:rgba(12,59,94,0.04); color:var(--cp-accent); }

    /* Text blocks */
    .cookie-pill .cp-text,
    .cookie-widget .cp-text{
        flex:1 1 auto;
        min-width:0;
        color:var(--cp-text);
        font-size:14px;
    }

    /* Actions (buttons) */
    .cookie-pill .cp-actions,
    .cookie-widget .widget-actions{
        display:flex;
        gap:10px;
        align-items:center;
        justify-content:flex-end;
        flex:0 0 auto;
    }

    /* Button styles */
    .cp-btn,
    .cookie-widget .accept-all,
    .cookie-widget .save-settings{
        border:1px solid var(--cp-accent);
        background:transparent;
        color:var(--cp-accent);
        padding:8px 12px;
        border-radius:999px;
        cursor:pointer;
        font-weight:600;
    }
    .cp-btn.primary,
    .cookie-widget .accept-all.primary{
        background:var(--cp-accent);
        color:#fff;
        border-color:var(--cp-accent);
        box-shadow:0 8px 18px rgba(12,59,94,0.12);
    }
    .cookie-widget .save-settings{ background:var(--cp-accent-2); color:#fff; border-color:var(--cp-accent-2); }

    /* Toggle / switch */
    .switch { position:relative; width:48px; height:28px; border-radius:20px; background:#e9eef5; cursor:pointer; display:inline-block; border:1px solid rgba(0,0,0,0.03); }
    .switch .knob{ position:absolute; top:3px; left:3px; width:20px; height:20px; background:#fff; border-radius:50%; box-shadow:0 2px 6px rgba(0,0,0,0.12); transition:left .16s ease; }
    .switch.on{ background:var(--cp-accent); }
    .switch.on .knob{ left:23px; }

    /* Toggle item layout inside widget */
    .cookie-widget .category-toggle{ padding:8px 0; display:flex; flex-direction:column; gap:8px; }
    .cookie-widget .toggle-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0; border-top:1px dashed transparent; }
    .cookie-widget .toggle-item:first-child{ border-top:0; }
    .cookie-widget .toggle-item span{ font-weight:600; color:var(--cp-text); font-size:14px; }
    .cookie-widget .toggle-item .small-note{ color:var(--cp-muted); font-size:12px; margin-top:4px; }

    /* Accessibility focus */
    .cookie-widget button:focus,
    .cookie-pill button:focus,
    .cp-btn:focus{ outline:3px solid rgba(12,59,94,0.12); outline-offset:2px; }

    /* Responsive: pill / widget becomes full-width bottom bar on small screens */
    @media (max-width:640px){
        .cookie-pill, .cookie-widget{
            left:16px;
            right:16px;
            width: calc(100% - 32px);
            border-radius:12px;
        }
        .cookie-widget{
          bottom: calc(env(safe-area-inset-bottom, 10px) + 12px);
          right:16px;
          width: calc(100% - 32px);
            padding:12px;
        }
        .cookie-widget .widget-header h3{ font-size:15px; }
        .cookie-widget .accept-all,
        .cookie-widget .save-settings{ padding:8px 10px; }
    }

    /* Hidden helper (JS can set hidden attribute) */
    .cookie-widget[hidden],
    .cookie-pill[hidden]{ display:none !important; }

    /* Subtle entrance */
    .cookie-widget.show { transform: translateY(0); opacity:1; }
    .cookie-widget { transform: translateY(6px); opacity:0.98; transition:transform .22s ease, opacity .22s ease; }

    /* ...existing code... */



/* Defensive emergency override for mobile/tablet to ensure cookie banner is always fully visible
   This forces the cookie pill/widget to be fixed above other overlays, removes transforms that
   can push it out of viewport on some browsers, and respects safe-area insets. */
    @media (max-width: 1024px) {
  .cookie-pill, .cookie-widget {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: calc(env(safe-area-inset-bottom, 8px) + 8px) !important;
    width: calc(100% - 16px) !important;
    max-width: none !important;
    border-radius: 12px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    transform: none !important;
    opacity: 1 !important;
    z-index: 16000 !important;
    display: flex !important;
    
    /* Ensure inner actions are visible and stacked on narrow screens */
  .cookie-pill .cp-actions, .cookie-widget .widget-actions { flex-wrap:wrap; gap:8px; }
  .cookie-pill .cp-text, .cookie-widget .cp-text { font-size: 15px !important; }

  /* Force a very high z-index on small screens so the cookie UI floats above
     slide-in navs, fixed headers and any page-level overlays that use large z-indexes. */
  .cookie-pill, .cookie-widget { z-index: 500000 !important; }
}

/* Extra tablet-specific lift: if the cookie would be overlapped by the
   services/cards region on medium-width devices, push it further up. */
@media (min-width: 600px) and (max-width: 1024px) {
  .cookie-pill, .cookie-widget {
    bottom: calc(env(safe-area-inset-bottom, 8px) + 120px) !important;
    transform: none !important;
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    width: calc(100% - 32px) !important;
    max-width: none !important;
    z-index: 99999999 !important;
    pointer-events: auto !important;
  }
}

/* Desktop-only: restore centered/narrow pill and non-full-width widget
   This ensures large-screen (desktop) appearance remains a centered pill or
   a right-side widget instead of the full-width bottom bar used on mobile. */
@media (min-width: 1201px) {
  .cookie-pill {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(92%, 720px) !important;
    max-width: 720px !important;
    bottom: calc(env(safe-area-inset-bottom, 12px) + 10px) !important;
    border-radius: 999px !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
    z-index: var(--cp-z, 400000) !important;
  }

  .cookie-widget {
    right: 22px !important;
    left: auto !important;
    width: 420px !important;
    max-width: calc(100% - 40px) !important;
    bottom: 22px !important;
    border-radius: var(--cp-radius, 12px) !important;
    transform: none !important;
    z-index: var(--cp-z, 400000) !important;
  }
}

/* Also apply restored desktop layout starting at 1025px so standard desktop
   viewports (where tablet media queries end at 1024px) get the narrow pill
   instead of the full-width bar. This addresses desktop widths between
   1025px and 1200px where the previous rule did not apply. */
@media (min-width: 1025px) and (max-width: 1200px) {
  .cookie-pill {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(92%, 720px) !important;
    max-width: 720px !important;
    bottom: calc(env(safe-area-inset-bottom, 12px) + 10px) !important;
    border-radius: 999px !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
    z-index: var(--cp-z, 400000) !important;
  }

  .cookie-widget {
    right: 22px !important;
    left: auto !important;
    width: 420px !important;
    max-width: calc(100% - 40px) !important;
    bottom: 22px !important;
    border-radius: var(--cp-radius, 12px) !important;
    transform: none !important;
    z-index: var(--cp-z, 400000) !important;
  }
}

/* Final, highest-specificity desktop override (cover all desktop widths >=1025px)
   Use direct child selector so inline/full-width legacy selectors are overridden.
   This is kept last in the file to win cascade and uses !important for safety. */
@media (min-width: 1025px) {
  body > .cookie-pill,
  body > .cookie-widget {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(92%, 720px) !important;
    max-width: 720px !important;
    bottom: calc(env(safe-area-inset-bottom, 12px) + 10px) !important;
    border-radius: 999px !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
    z-index: var(--cp-z, 400000) !important;
  }

  /* keep widget in the right-bottom corner for desktop */
  body > .cookie-widget {
    left: auto !important;
    right: 22px !important;
    width: 420px !important;
    max-width: calc(100% - 40px) !important;
  }
}

/* Toggle switch styles for cookie settings (adatkezeles.php) */
.cookie-settings label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: var(--cp-text, #0b2440);
}

.cookie-settings label:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.6;
}

.toggle {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
  flex-shrink: 0;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .3s;
  border-radius: 28px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

input:checked + .slider {
  background-color: var(--cp-accent, #0C3B5E);
}

input:checked + .slider:before {
  transform: translateX(22px);
}

input:disabled + .slider {
  cursor: not-allowed;
  opacity: 0.6;
}