/* =========================================================
   INNOVENTECH COOKIE CONSENT
   File: wwwroot/css/cookie-consent.css
   ========================================================= */

.cookie-consent,
.cookie-consent *,
.cookie-consent *::before,
.cookie-consent *::after{
    box-sizing:border-box;
}

.cookie-consent{
    --cookie-navy:#07152b;
    --cookie-blue:#2766c7;
    --cookie-blue-dark:#1f52a2;
    --cookie-cyan:#14c7e6;
    --cookie-text:#344860;
    --cookie-muted:#6b7d91;
    --cookie-line:#d9e4f1;
    --cookie-soft:#f2f7fd;
    --cookie-white:#fff;

    position:relative;
    z-index:9999;
}

.cookie-consent[hidden],
.cookie-banner[hidden],
.cookie-modal[hidden],
.cookie-modal-backdrop[hidden]{
    display:none !important;
}


/* =========================================================
   COMPACT BANNER
   ========================================================= */

.cookie-banner{
    position:fixed;
    left:24px;
    bottom:24px;
    z-index:10000;

    width:min(440px, calc(100vw - 48px));

    padding:24px;

    border:1px solid rgba(39,102,199,.18);
    border-radius:16px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(20,199,230,.11),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.99),
            rgba(245,249,255,.99)
        );

    box-shadow:
        0 24px 65px rgba(7,21,43,.18),
        0 4px 16px rgba(7,21,43,.07);

    font-family:inherit;

    animation:cookieBannerEnter .38s ease both;
}

@keyframes cookieBannerEnter{
    from{
        opacity:0;
        transform:translateY(18px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

.cookie-banner__close{
    position:absolute;
    top:14px;
    right:14px;

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

    width:34px;
    height:34px;

    padding:0;

    border:0;
    border-radius:50%;

    color:#667b92;
    background:transparent;

    cursor:pointer;
}

.cookie-banner__close:hover{
    color:var(--cookie-navy);
    background:rgba(39,102,199,.07);
}

.cookie-banner__close svg{
    width:18px;
    height:18px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
}

.cookie-banner__header{
    display:flex;
    align-items:center;
    gap:13px;

    padding-right:38px;
    margin-bottom:15px;
}

.cookie-banner__icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:43px;
    height:43px;
    flex:0 0 43px;

    border:1px solid rgba(39,102,199,.15);
    border-radius:11px;

    color:var(--cookie-blue);
    background:#ebf3ff;
}

.cookie-banner__icon svg{
    width:23px;
    height:23px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.cookie-banner__eyebrow,
.cookie-modal__eyebrow{
    display:block;
    margin-bottom:2px;

    color:var(--cookie-blue);

    font-size:.64rem;
    font-weight:850;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.cookie-banner h2{
    margin:0;

    color:var(--cookie-navy);

    font-size:1.22rem;
    font-weight:800;
    line-height:1.2;
    letter-spacing:-.025em;
}

.cookie-banner__text{
    margin:0 0 19px;

    color:var(--cookie-text);

    font-size:.87rem;
    line-height:1.68;
}

.cookie-banner__actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.cookie-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:44px;
    padding:10px 16px;

    border-radius:9px;

    font:inherit;
    font-size:.8rem;
    font-weight:750;
    line-height:1.2;

    cursor:pointer;

    transition:
        transform .18s ease,
        background-color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.cookie-button:hover{
    transform:translateY(-1px);
}

.cookie-button--primary{
    border:1px solid var(--cookie-blue);

    color:#fff;
    background:var(--cookie-blue);

    box-shadow:0 8px 20px rgba(39,102,199,.19);
}

.cookie-button--primary:hover{
    border-color:var(--cookie-blue-dark);
    background:var(--cookie-blue-dark);
}

.cookie-button--secondary{
    border:1px solid #cbd9ea;

    color:var(--cookie-navy);
    background:#fff;
}

.cookie-button--secondary:hover{
    border-color:#a9bfdc;
    background:#f7faff;
}

.cookie-manage-link{
    display:inline-flex;
    align-items:center;
    gap:5px;

    margin-top:13px;
    padding:0;

    border:0;

    color:var(--cookie-blue);
    background:transparent;

    font:inherit;
    font-size:.76rem;
    font-weight:750;

    cursor:pointer;
}

.cookie-manage-link svg{
    width:14px;
    height:14px;

    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;

    transition:transform .18s ease;
}

.cookie-manage-link:hover svg{
    transform:translateX(3px);
}

.cookie-banner__policy{
    margin:13px 0 0;

    color:var(--cookie-muted);

    font-size:.68rem;
    line-height:1.5;
}

.cookie-banner__policy a,
.cookie-modal__policy a{
    color:var(--cookie-blue);
    font-weight:700;
    text-underline-offset:2px;
}


/* =========================================================
   MODAL BACKDROP
   ========================================================= */

.cookie-modal-backdrop{
    position:fixed;
    inset:0;
    z-index:10010;

    background:rgba(4,14,30,.55);
    backdrop-filter:blur(4px);
}


/* =========================================================
   SETTINGS MODAL
   ========================================================= */

.cookie-modal{
    position:fixed;
    top:50%;
    left:50%;
    z-index:10020;

    width:min(620px, calc(100vw - 40px));
    max-height:calc(100vh - 40px);

    overflow:auto;

    padding:28px;

    border:1px solid rgba(39,102,199,.18);
    border-radius:17px;

    background:#fff;

    box-shadow:
        0 32px 90px rgba(4,14,30,.28);

    transform:translate(-50%, -50%);

    animation:cookieModalEnter .25s ease both;
}

@keyframes cookieModalEnter{
    from{
        opacity:0;
        transform:translate(-50%, calc(-50% + 12px)) scale(.985);
    }

    to{
        opacity:1;
        transform:translate(-50%, -50%) scale(1);
    }
}

.cookie-modal__header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;

    margin-bottom:12px;
}

.cookie-modal h2{
    margin:0;

    color:var(--cookie-navy);

    font-size:1.65rem;
    font-weight:800;
    line-height:1.18;
    letter-spacing:-.035em;
}

.cookie-modal__close{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:38px;
    height:38px;
    flex:0 0 38px;

    padding:0;

    border:1px solid var(--cookie-line);
    border-radius:9px;

    color:#62758b;
    background:#fff;

    cursor:pointer;
}

.cookie-modal__close:hover{
    color:var(--cookie-navy);
    background:var(--cookie-soft);
}

.cookie-modal__close svg{
    width:19px;
    height:19px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
}

.cookie-modal__description{
    margin:0 0 23px;

    color:var(--cookie-text);

    font-size:.88rem;
    line-height:1.7;
}

.cookie-preference-list{
    overflow:hidden;

    border:1px solid var(--cookie-line);
    border-radius:12px;
}

.cookie-preference{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:center;
    gap:22px;

    padding:20px;

    background:#fff;
}

.cookie-preference + .cookie-preference{
    border-top:1px solid var(--cookie-line);
}

.cookie-preference__title-row{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:9px;

    margin-bottom:6px;
}

.cookie-preference h3{
    margin:0;

    color:var(--cookie-navy);

    font-size:.94rem;
    font-weight:800;
    line-height:1.35;
}

.cookie-preference p{
    margin:0;

    color:var(--cookie-muted);

    font-size:.78rem;
    line-height:1.65;
}

.cookie-required-badge{
    display:inline-flex;
    align-items:center;

    padding:4px 7px;

    border:1px solid rgba(39,102,199,.14);
    border-radius:999px;

    color:var(--cookie-blue);
    background:#edf4ff;

    font-size:.58rem;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
}


/* =========================================================
   SWITCHES
   ========================================================= */

.cookie-toggle,
.cookie-switch__track{
    position:relative;

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

    width:46px;
    height:25px;
    flex:0 0 46px;

    border-radius:999px;
}

.cookie-toggle--locked{
    background:#dce8f8;
}

.cookie-toggle--locked span{
    position:absolute;
    right:3px;

    width:19px;
    height:19px;

    border-radius:50%;

    background:var(--cookie-blue);

    box-shadow:0 2px 5px rgba(7,21,43,.18);
}

.cookie-switch{
    display:inline-flex;
    cursor:pointer;
}

.cookie-switch input{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
}

.cookie-switch__track{
    border:1px solid #bdcad9;
    background:#dce3eb;

    transition:
        background-color .18s ease,
        border-color .18s ease;
}

.cookie-switch__thumb{
    position:absolute;
    left:3px;

    width:19px;
    height:19px;

    border-radius:50%;

    background:#fff;

    box-shadow:0 2px 6px rgba(7,21,43,.22);

    transition:transform .18s ease;
}

.cookie-switch input:checked + .cookie-switch__track{
    border-color:var(--cookie-blue);
    background:var(--cookie-blue);
}

.cookie-switch input:checked +
.cookie-switch__track
.cookie-switch__thumb{
    transform:translateX(21px);
}

.cookie-switch input:focus-visible +
.cookie-switch__track{
    outline:3px solid rgba(39,102,199,.22);
    outline-offset:3px;
}


/* =========================================================
   MODAL FOOTER
   ========================================================= */

.cookie-modal__policy{
    margin:17px 0 0;

    color:var(--cookie-muted);

    font-size:.72rem;
    line-height:1.55;
}

.cookie-modal__actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;

    margin-top:22px;
}

.cookie-modal__actions .cookie-button{
    min-width:145px;
}


/* =========================================================
   ACCESSIBILITY FOCUS
   ========================================================= */

.cookie-consent button:focus-visible,
.cookie-consent a:focus-visible{
    outline:3px solid rgba(39,102,199,.28);
    outline-offset:3px;
}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width:700px){

    .cookie-banner{
        right:14px;
        bottom:14px;
        left:14px;

        width:auto;

        padding:20px;

        border-radius:14px;
    }

    .cookie-modal{
        width:calc(100vw - 28px);
        max-height:calc(100vh - 28px);

        padding:21px;
        border-radius:14px;
    }

    .cookie-modal h2{
        font-size:1.4rem;
    }

    .cookie-preference{
        gap:14px;
        padding:17px;
    }
}

@media (max-width:480px){

    .cookie-banner__actions{
        grid-template-columns:1fr;
    }

    .cookie-modal__actions{
        flex-direction:column-reverse;
    }

    .cookie-modal__actions .cookie-button{
        width:100%;
    }

    .cookie-preference{
        grid-template-columns:minmax(0, 1fr);
    }

    .cookie-switch,
    .cookie-toggle{
        justify-self:start;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){

    .cookie-banner,
    .cookie-modal{
        animation:none;
    }

    .cookie-consent *,
    .cookie-consent *::before,
    .cookie-consent *::after{
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
    }
}
body.cookie-modal-open{
    overflow:hidden;
}


/* =========================================================
   COOKIE BANNER — LAPTOP COMPACT VERSION
   ========================================================= */

@media (min-width:701px) and (max-width:1440px){

    .cookie-banner{
        width:360px;
        padding:18px;
        left:18px;
        bottom:18px;
        border-radius:14px;
    }

    .cookie-banner__header{
        gap:10px;
        margin-bottom:10px;
        padding-right:30px;
    }

    .cookie-banner__icon{
        width:36px;
        height:36px;
        flex:0 0 36px;
        border-radius:9px;
    }

    .cookie-banner__icon svg{
        width:19px;
        height:19px;
    }

    .cookie-banner__eyebrow{
        font-size:.56rem;
    }

    .cookie-banner h2{
        font-size:1rem;
    }

    .cookie-banner__text{
        margin-bottom:13px;
        font-size:.74rem;
        line-height:1.5;
    }

    .cookie-banner__actions{
        gap:8px;
    }

    .cookie-button{
        min-height:38px;
        padding:8px 11px;
        font-size:.7rem;
    }

    .cookie-manage-link{
        margin-top:9px;
        font-size:.67rem;
    }

    .cookie-banner__policy{
        margin-top:8px;
        font-size:.6rem;
    }

    .cookie-banner__close{
        top:10px;
        right:10px;
        width:30px;
        height:30px;
    }
}

.cookie-banner__actions--stacked{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.cookie-essential-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    margin:0;
    padding:2px 4px;

    border:0;
    background:transparent;

    color:#52657c;

    font:inherit;
    font-size:.72rem;
    font-weight:700;
    line-height:1.4;

    text-decoration:underline;
    text-underline-offset:3px;

    cursor:pointer;
}

.cookie-essential-link:hover{
    color:#1f52a2;
}

@media (min-width:701px) and (max-width:1440px){

    .cookie-essential-link{
        font-size:.64rem;
    }
}