/* ══ TechVizo Cookie – Frontend Styles ══ */

/* ── Backdrop ── */
#tvc-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999998;
    background: var(--tvc-backdrop-color, #000);
    opacity: var(--tvc-backdrop-opacity, 0.5);
    pointer-events: all;
}
#tvc-backdrop.tvc-visible { display: block; }
#tvc-backdrop.tvc-hidden  { display: none !important; }

/* ── Overlay ── */
#tvc-overlay {
    position: fixed;
    z-index: 999999;
    padding: 0 16px 24px;
    left: 0; right: 0; bottom: 0;
    display: none;
    justify-content: center;
    align-items: flex-end;
    pointer-events: none;
}
#tvc-overlay.tvc-visible        { display: flex; }
#tvc-overlay.tvc-pos-bottom-left  { justify-content: flex-start; }
#tvc-overlay.tvc-pos-bottom-right { justify-content: flex-end; }
#tvc-overlay.tvc-pos-bottom-center{ justify-content: center; }
#tvc-overlay.tvc-pos-top-center   { align-items: flex-start; padding: 24px 16px 0; top: 0; bottom: auto; }
#tvc-overlay.tvc-hidden           { display: none !important; }

/* ── Box ── */
#tvc-box {
    background: var(--tvc-popup-bg, #1e1e22);
    border: 1px solid var(--tvc-popup-border, #333);
    border-radius: var(--tvc-radius, 6px);
    padding: 20px 24px 18px;
    width: 100%;
    max-width: var(--tvc-max-width, 860px);
    pointer-events: all;
    position: relative;
    font-family: var(--tvc-font, 'Barlow', sans-serif);
    box-shadow: var(--tvc-shadow, none);
}

/* ══ BOX ENTRY ANIMATIONS ══ */
#tvc-box.tvc-anim-fade-bottom { animation: tvcFadeBottom var(--tvc-anim-dur,.5s) ease both; }
#tvc-box.tvc-anim-fade        { animation: tvcFade       var(--tvc-anim-dur,.5s) ease both; }
#tvc-box.tvc-anim-slide-left  { animation: tvcSlideLeft  var(--tvc-anim-dur,.5s) ease both; }
#tvc-box.tvc-anim-zoom        { animation: tvcZoom       var(--tvc-anim-dur,.5s) ease both; }
#tvc-box.tvc-hiding           { animation: tvcHideDown   var(--tvc-anim-dur,.4s) ease both !important; }

@keyframes tvcFadeBottom { from{opacity:0;transform:translateY(36px)} to{opacity:1;transform:translateY(0)} }
@keyframes tvcFade       { from{opacity:0}                             to{opacity:1} }
@keyframes tvcSlideLeft  { from{opacity:0;transform:translateX(-40px)} to{opacity:1;transform:translateX(0)} }
@keyframes tvcZoom       { from{opacity:0;transform:scale(.9)}         to{opacity:1;transform:scale(1)} }
@keyframes tvcHideDown   { from{opacity:1;transform:translateY(0)}     to{opacity:0;transform:translateY(40px)} }

/* ══ TEXT ANIMATIONS ══ */
.tvc-text-el { opacity: 0; }

.tvc-ta-fade-up-stagger .tvc-text-el {
    animation: tvcTaFadeUp var(--tvc-tdur,.5s) ease both;
    animation-delay: calc(var(--tvc-box-dur,.5s) + var(--tvc-tdel,.1s) * var(--tvc-ti,0));
}
@keyframes tvcTaFadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

.tvc-ta-fade-in .tvc-text-el {
    animation: tvcTaFade var(--tvc-tdur,.5s) ease both;
    animation-delay: calc(var(--tvc-box-dur,.5s) + var(--tvc-tdel,.1s) * var(--tvc-ti,0));
}
@keyframes tvcTaFade { from{opacity:0} to{opacity:1} }

.tvc-ta-slide-right .tvc-text-el {
    animation: tvcTaSlideR var(--tvc-tdur,.5s) ease both;
    animation-delay: calc(var(--tvc-box-dur,.5s) + var(--tvc-tdel,.1s) * var(--tvc-ti,0));
}
@keyframes tvcTaSlideR { from{opacity:0;transform:translateX(-22px)} to{opacity:1;transform:translateX(0)} }

.tvc-ta-zoom-in .tvc-text-el {
    animation: tvcTaZoom var(--tvc-tdur,.5s) ease both;
    animation-delay: calc(var(--tvc-box-dur,.5s) + var(--tvc-tdel,.1s) * var(--tvc-ti,0));
}
@keyframes tvcTaZoom { from{opacity:0;transform:scale(.82)} to{opacity:1;transform:scale(1)} }

.tvc-ta-bounce-up .tvc-text-el {
    animation: tvcTaBounce var(--tvc-tdur,.65s) cubic-bezier(.36,.07,.19,.97) both;
    animation-delay: calc(var(--tvc-box-dur,.5s) + var(--tvc-tdel,.12s) * var(--tvc-ti,0));
}
@keyframes tvcTaBounce {
    0%  {opacity:0;transform:translateY(24px)}
    55% {opacity:1;transform:translateY(-7px)}
    75% {transform:translateY(3px)}
    90% {transform:translateY(-2px)}
    100%{opacity:1;transform:translateY(0)}
}

.tvc-ta-typewriter .tvc-header { opacity: 1 !important; }
.tvc-ta-typewriter .tvc-title {
    overflow: hidden; white-space: nowrap;
    border-right: 2px solid var(--tvc-title-color, #fff);
    width: 0; opacity: 1 !important;
    animation:
        tvcTaCaret calc(var(--tvc-tdur,.5s) * 0.8) step-end infinite,
        tvcTaType  calc(var(--tvc-tdur,.5s) * 3)   steps(30,end) both;
    animation-delay: var(--tvc-box-dur,.5s), var(--tvc-box-dur,.5s);
}
.tvc-ta-typewriter .tvc-text,
.tvc-ta-typewriter .tvc-actions {
    animation: tvcTaFade var(--tvc-tdur,.5s) ease both;
    animation-delay: calc(var(--tvc-box-dur,.5s) + var(--tvc-tdel,.1s) * var(--tvc-ti,0));
}
@keyframes tvcTaType   { from{width:0}      to{width:100%} }
@keyframes tvcTaCaret  { 0%,100%{border-color:transparent} 50%{border-color:var(--tvc-title-color,#fff)} }

.tvc-ta-none .tvc-text-el { opacity:1 !important; animation:none !important; }

/* ── Close ── */
.tvc-close {
    position:absolute; top:10px; right:12px;
    background:none; border:none; cursor:pointer;
    color:var(--tvc-close-color,#777);
    font-size:20px; line-height:1; padding:4px 6px;
    transition:color .2s;
}
.tvc-close:hover { color:#fff; }

/* ── Header ── */
.tvc-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.tvc-icon   { font-size:18px; flex-shrink:0; }
.tvc-title  {
    font-family: var(--tvc-title-font, var(--tvc-font, 'Barlow', sans-serif));
    font-size: var(--tvc-title-size, 14px);
    font-weight: var(--tvc-title-weight, 700);
    font-style: var(--tvc-title-style, normal);
    color: var(--tvc-title-color, #fff);
    letter-spacing: var(--tvc-title-ls, 1px);
    line-height: var(--tvc-title-lh, 1.2);
    text-transform: var(--tvc-title-transform, uppercase);
}

/* ── Body ── */
.tvc-text {
    font-size: var(--tvc-body-size, 13px);
    font-weight: var(--tvc-body-weight, 400);
    font-style: var(--tvc-body-style, normal);
    color: var(--tvc-body-color, #aaa);
    line-height: var(--tvc-body-lh, 1.6);
    text-align: var(--tvc-body-align, left);
    margin: 0;
}
.tvc-link { color:var(--tvc-link-color,#e03030); text-decoration:none; }
.tvc-link:hover { text-decoration:underline; }

/* ── Actions ── */
.tvc-actions { display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; }

/* ── Buttons ── */
.tvc-btn {
    font-family: var(--tvc-btn-font, 'Barlow Condensed', sans-serif);
    font-size: var(--tvc-btn-size, 12px);
    font-weight: var(--tvc-btn-weight, 700);
    font-style: var(--tvc-btn-style, normal);
    letter-spacing: var(--tvc-btn-ls, 1.5px);
    border-radius: var(--tvc-btn-radius, 4px);
    padding: var(--tvc-btn-py, 10px) var(--tvc-btn-px, 22px);
    cursor: pointer;
    text-transform: var(--tvc-btn-transform, uppercase);
    border: 1px solid transparent;
    transition: background .2s, color .2s, border-color .2s, transform .1s;
    white-space: nowrap; line-height: 1;
}
.tvc-btn:active { transform:scale(.97); }

.tvc-btn-accept {
    background: var(--tvc-accept-bg, #e03030);
    color: var(--tvc-accept-color, #fff);
    border-color: var(--tvc-accept-border, #e03030);
}
.tvc-btn-accept:hover {
    background: var(--tvc-accept-hover-bg, #c02020);
    color: var(--tvc-accept-hover-color, #fff);
    border-color: var(--tvc-accept-hover-border, #c02020);
}
.tvc-btn-decline {
    background: var(--tvc-decline-bg, transparent);
    color: var(--tvc-decline-color, #ccc);
    border-color: var(--tvc-decline-border, #555);
}
.tvc-btn-decline:hover {
    background: var(--tvc-decline-hover-bg, #333);
    color: var(--tvc-decline-hover-color, #fff);
    border-color: var(--tvc-decline-hover-border, #666);
}

@media(max-width:600px){
    .tvc-actions { flex-direction:column; }
    .tvc-btn { text-align:center; }
}


.tvc-gdpr-note { color: var(--tvc-body-color, #aaa); font-size: calc(var(--tvc-body-size, 13px) - 1px); line-height: var(--tvc-body-lh, 1.6); margin: 12px 0 0; }
.tvc-btn-manage { background: transparent; color: var(--tvc-link-color, #e03030); border-color: var(--tvc-link-color, #e03030); }
.tvc-btn-manage:hover { background: rgba(224,48,48,.1); color: var(--tvc-link-color, #e03030); }
.tvc-pref-modal { position: fixed; inset: 0; z-index: 1000000; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; padding: 20px; }
.tvc-pref-modal.tvc-hidden { display: none !important; }
.tvc-pref-dialog { width: min(560px, 100%); max-height: 90vh; overflow: auto; background: var(--tvc-popup-bg, #1e1e22); color: var(--tvc-body-color, #aaa); border: 1px solid var(--tvc-popup-border, #333); border-radius: var(--tvc-radius, 6px); padding: 22px; position: relative; font-family: var(--tvc-font, 'Barlow', sans-serif); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.tvc-pref-dialog h3 { color: var(--tvc-title-color, #fff); margin: 0 34px 8px 0; font-family: var(--tvc-title-font, var(--tvc-font, 'Barlow', sans-serif)); }
.tvc-pref-dialog p { margin: 0 0 16px; line-height: 1.5; }
.tvc-pref-close { top: 14px; right: 14px; }
.tvc-pref-list { display: grid; gap: 10px; margin-bottom: 18px; }
.tvc-pref-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--tvc-popup-border, #333); border-radius: 6px; padding: 12px; }
.tvc-pref-row strong { display: block; color: var(--tvc-title-color, #fff); margin-bottom: 4px; }
.tvc-pref-row small { display: block; line-height: 1.4; }
.tvc-pref-row input { flex: 0 0 auto; }
.tvc-pref-row-disabled { opacity: .72; }