/*
 * GymFizz look for the Klaro cookie banner, settings panel and the "load this embed?" placeholders.
 * Loaded AFTER klaro.min.css. Brand colours: card #1A222B, base #101820, primary #009FDF, secondary #EAD2AC.
 */

.klaro {
    --font-family: inherit;
    --title-font-family: inherit;
    --font-size: 14px;
    --border-radius: 0px;
    --border-width: 1px;

    --dark1: #1A222B;   /* card surface */
    --dark2: #2A3542;   /* borders, neutral parts */
    --dark3: #9AA6B2;   /* descriptions */
    --light1: #FFFFFF;  /* main text */
    --light2: #C9D1D9;
    --light3: #94A3B8;

    --green1: #009FDF;  /* switches ON, primary actions */
    --green2: #0086BD;
    --green3: #EAD2AC;
    --blue1: #009FDF;
    --blue2: #33B3E8;
    --blue3: #66C6EE;
    --red1: #2A3542;
    --red2: #3A4858;
    --red3: #4A5A6C;
    --white1: #FFFFFF;
    --white2: #2A3542;  /* switch OFF track */
    --white3: #FFFFFF;  /* switch knob */

    --button-text-color: #FFFFFF;
}

/* ---------- buttons (banner, panel, placeholders) ---------- */
.klaro .cookie-modal .cm-btn,
.klaro .context-notice .cm-btn,
.klaro .cookie-notice .cm-btn {
    border: 1px solid transparent;
    border-radius: 0;
    padding: 12px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1.2;
    text-transform: uppercase;
    transition: background-color .2s, color .2s, border-color .2s;
}
.klaro .cookie-modal .cm-btn:focus-visible,
.klaro .context-notice .cm-btn:focus-visible,
.klaro .cookie-notice .cm-btn:focus-visible,
.klaro .cn-learn-more:focus-visible,
.klaro .cookie-modal .hide:focus-visible {
    outline: 2px solid #009FDF;
    outline-offset: 2px;
}
/* primary: "Összes elfogadása", "Betöltés most" */
.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .context-notice .cm-btn.cm-btn-success,
.klaro .cookie-notice .cm-btn.cm-btn-success {
    background-color: #009FDF;
    color: #101820;
}
.klaro .cookie-modal .cm-btn.cm-btn-success:hover,
.klaro .context-notice .cm-btn.cm-btn-success:hover,
.klaro .cookie-notice .cm-btn.cm-btn-success:hover {
    background-color: #FFFFFF;
}
/* secondary (outline): "Csak a szükségesek", "Kiválasztottak elfogadása", "Mindig engedélyezem" */
.klaro .cookie-modal .cm-btn.cm-btn-danger,
.klaro .cookie-modal .cm-btn.cm-btn-info,
.klaro .cookie-notice .cm-btn.cm-btn-danger,
.klaro .context-notice .cm-btn.cm-btn-success-var {
    background-color: transparent;
    border-color: rgba(255, 255, 255, .25);
    color: #FFFFFF;
}
.klaro .cookie-modal .cm-btn.cm-btn-danger:hover,
.klaro .cookie-modal .cm-btn.cm-btn-info:hover,
.klaro .cookie-notice .cm-btn.cm-btn-danger:hover,
.klaro .context-notice .cm-btn.cm-btn-success-var:hover {
    background-color: #FFFFFF;
    color: #101820;
}
/* "Mentés" after the choice was already made: primary */
.klaro .cookie-modal .cm-btn.cm-btn-accept:only-child {
    background-color: #009FDF;
    border-color: #009FDF;
    color: #101820;
}
.klaro .cookie-modal .cm-btn.cm-btn-accept:only-child:hover { background-color: #FFFFFF; border-color: #FFFFFF; }

/* ---------- bottom banner ---------- */
.klaro .cookie-notice:not(.cookie-modal-notice) {
    background-color: #1A222B;
    border-top: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .45);
    z-index: 999;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
    padding: 20px;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p {
    color: #D4D4D4;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.6;
    margin: 0 0 14px;
}
.klaro .cookie-notice a { color: #009FDF; }
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
    margin: 0;
    flex-direction: column-reverse;   /* buttons first, "Beállítások" link under them */
    align-items: stretch;
    gap: 12px;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok a,
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok div { margin-top: 0; }
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
    display: flex;
    gap: 8px;
    margin: 0;
    width: 100%;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn {
    flex: 1 1 0;
    margin: 0;
    width: auto;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cn-decline { order: 1; }
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn-success { order: 2; }
.klaro .cookie-notice .cn-learn-more {
    align-self: center;
    color: #9AA6B2;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.klaro .cookie-notice .cn-learn-more:hover { color: #009FDF; }

@media (min-width: 1024px) {
    .klaro .cookie-notice:not(.cookie-modal-notice) {
        --notice-max-width: 440px;
        --notice-right: 20px;
        --notice-bottom: 20px;
        border: 1px solid rgba(255, 255, 255, .12);
        box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
    }
}
@media (max-width: 1023px) {
    .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body { padding: 16px; }
    .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons { flex-direction: column; }
    .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn-success { order: 1; }
    .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cn-decline { order: 2; }
}

/* ---------- settings panel ---------- */
.klaro .cookie-modal .cm-bg {
    background: rgba(8, 12, 16, .82);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.klaro .cookie-modal .cm-modal.cm-klaro {
    background-color: #1A222B;
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.klaro .cookie-modal .cm-modal .cm-header,
.klaro .cookie-modal .cm-modal .cm-footer { padding: 24px; border-color: rgba(255, 255, 255, .08); }
.klaro .cookie-modal .cm-modal .cm-body { padding: 8px 24px 16px; }
.klaro .cookie-modal .cm-modal .cm-header h1.title {
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: -.01em;
    line-height: 1.1;
    text-transform: uppercase;
}
.klaro .cookie-modal .cm-modal .cm-header p {
    color: #9AA6B2;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.6;
}
.klaro .cookie-modal a { color: #009FDF; }
.klaro .cookie-modal .cm-list-title { font-size: .85rem; letter-spacing: .02em; }
.klaro .cookie-modal .cm-list-description { color: #9AA6B2; font-weight: 300; }
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service p.purposes { color: #9AA6B2; }
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li span.cm-required,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li span.cm-opt-out,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li span.cm-required { color: #9AA6B2; }
.klaro .cookie-modal .cm-switch-container { border-bottom-color: rgba(255, 255, 255, .08); }
.klaro .cookie-modal .cm-list-label .slider { box-shadow: none; border: 1px solid rgba(255, 255, 255, .15); }
.klaro .cookie-modal .cm-list-label .slider::before { background-color: #FFFFFF; }
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider { background-color: #009FDF; border-color: #009FDF; }
.klaro .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider,
.klaro .cookie-modal .cm-list-input.only-required + .cm-list-label .slider { background-color: #0086BD; border-color: #0086BD; opacity: .7; }
.klaro .cookie-modal .cm-list-input:focus + .cm-list-label .slider { box-shadow: 0 0 0 2px #009FDF; }
.klaro .cookie-modal .cm-modal .hide svg { stroke: #9AA6B2; }
.klaro .cookie-modal .cm-modal .hide:hover svg { stroke: #FFFFFF; }
.klaro .cookie-modal .cm-modal .cm-footer-buttons { gap: 8px; flex-wrap: wrap; }
.klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn { margin: 0; flex: 1 1 auto; }
.klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by { padding-top: 14px; }
.klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by a { color: #5C6B7A; }

/* ---------- placeholders that replace blocked embeds ---------- */
.klaro .context-notice {
    background-color: #1A222B;
    border-color: rgba(255, 255, 255, .1);
    padding: 24px;
    text-align: center;
}
.klaro .context-notice p {
    color: #D4D4D4;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6;
    max-width: 34rem;
}
.klaro .context-notice p a { color: #009FDF; }
.klaro .context-notice p.cm-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.klaro .context-notice p.cm-buttons .cm-btn { margin: 0; }
.klaro .context-notice p.ccn-description-empty-store { color: #9AA6B2; font-size: 12px; }

/* The placeholder is inserted next to the iframe: let it fill the same box. */
div[data-type="placeholder"][data-name="google-maps"],
div[data-type="placeholder"][data-name="instagram"] {
    position: absolute;
    inset: 0;
    max-width: none !important;
    height: auto !important;
}
div[data-type="placeholder"][data-name="motibro"] {
    max-width: none !important;
    height: 340px !important;
}
div[data-type="placeholder"] > .klaro.cm-as-context-notice {
    height: 100%;
    padding: 0;
}
div[data-type="placeholder"] > .klaro.cm-as-context-notice > .context-notice { height: 100%; }

/* ---------- discreet footer link "Süti beállítások" ---------- */
.cookie-settings-link {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: rgba(255, 255, 255, .2);
    transition: color .2s;
}
.cookie-settings-link:hover { color: #009FDF; text-decoration-color: currentColor; }
.cookie-settings-link:focus-visible { outline: 2px solid #009FDF; outline-offset: 4px; }