/* TVS Save This v1.1.0 — Frontend */

/* ─── Default variables (overridden per-site by inline style from PHP) ─── */
:root {
    --st-bg:      #fffbee;
    --st-border:  #f1e0a0;
    --st-accent:  #f1c349;
    --st-radius:  14px;
    /* Static */
    --st-text:    #333;
    --st-muted:   #666;
    --st-subtle:  #999;
    --st-white:   #fff;
    --st-ease:    .22s ease;
}

/* ─── Reset inside widget ─── */
.tvs-st-wrap *,
.tvs-st-wrap *::before,
.tvs-st-wrap *::after { box-sizing: border-box; }

/* ─── Wrapper ─── */
.tvs-st-wrap {
    background:    var(--st-bg);
    border:        1.5px solid var(--st-border);
    border-radius: var(--st-radius);
    padding:       32px 28px 26px;
    margin:        36px auto;
    max-width:     600px;
    text-align:    center;
    position:      relative;
    font-family:   -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Accent top bar */
    overflow:      visible;
}

/* Gold top bar */
.tvs-st-wrap::before {
    content:          '';
    position:         absolute;
    top:              0;
    left:             50%;
    transform:        translateX(-50%);
    width:            56px;
    height:           3px;
    background:       var(--st-accent);
    border-radius:    0 0 3px 3px;
}

/* ─── Icon ─── */
.tvs-st-icon {
    font-size:     30px;
    line-height:   1;
    margin-bottom: 10px;
    display:       block;
}

/* ─── Heading ─── */
.tvs-st-heading {
    font-size:     20px !important;
    font-weight:   700 !important;
    color:         var(--st-text) !important;
    margin:        0 0 8px !important;
    line-height:   1.3 !important;
    padding:       0 !important;
    border:        none !important;
}

/* ─── Subtext ─── */
.tvs-st-sub {
    font-size:     14px;
    color:         var(--st-muted);
    margin:        0 0 20px;
    line-height:   1.6;
}

/* ─── Form row ─── */
.tvs-st-form-row {
    display:     flex;
    gap:         8px;
    max-width:   460px;
    margin:      0 auto 12px;
}

.tvs-st-email {
    flex:        1;
    padding:     12px 18px;
    border:      1.5px solid #e0e0e0;
    border-radius: 50px;
    font-size:   14px;
    color:       var(--st-text);
    background:  var(--st-white);
    outline:     none;
    font-family: inherit;
    min-width:   0;
    transition:  border-color var(--st-ease), box-shadow var(--st-ease);
    -webkit-appearance: none;
}
.tvs-st-email:focus {
    border-color: var(--st-accent);
    box-shadow:   0 0 0 3px color-mix(in srgb, var(--st-accent) 25%, transparent);
}
.tvs-st-email::placeholder { color: #c0c0c0; }

.tvs-st-btn {
    padding:       12px 20px;
    background:    var(--st-accent);
    color:         #333;
    border:        none;
    border-radius: 50px;
    font-size:     14px;
    font-weight:   700;
    cursor:        pointer;
    font-family:   inherit;
    white-space:   nowrap;
    flex-shrink:   0;
    transition:    filter var(--st-ease), transform var(--st-ease), box-shadow var(--st-ease);
    -webkit-appearance: none;
    line-height:   1.4;
}
.tvs-st-btn:hover:not(:disabled) {
    filter:    brightness(.94);
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
    transform: translateY(-1px);
}
.tvs-st-btn:active { transform: translateY(0); }
.tvs-st-btn:disabled {
    opacity: .6;
    cursor:  not-allowed;
    transform: none;
}

/* Spinner on loading state */
.tvs-st-btn.tvs-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.tvs-st-btn.tvs-loading::after {
    content: '';
    width:   14px;
    height:  14px;
    border:  2px solid rgba(0,0,0,.15);
    border-top-color: #333;
    border-radius: 50%;
    animation: tvsSpin .6s linear infinite;
    flex-shrink: 0;
}
@keyframes tvsSpin { to { transform: rotate(360deg); } }

/* ─── Newsletter checkbox ─── */
.tvs-st-opt {
    display:     inline-flex;
    align-items: center;
    gap:         7px;
    font-size:   13px;
    color:       var(--st-muted);
    cursor:      pointer;
    user-select: none;
    margin:      2px 0 0;
    line-height: 1.4;
}
.tvs-st-opt input[type="checkbox"] {
    width:        15px;
    height:       15px;
    accent-color: #5a5a5a;
    cursor:       pointer;
    flex-shrink:  0;
    margin:       0;
}

/* ─── Message area ─── */
.tvs-st-msg {
    min-height:  18px;
    font-size:   14px;
    font-weight: 600;
    margin-top:  10px;
    line-height: 1.4;
}
.tvs-st-msg.success { color: #276e2c; }
.tvs-st-msg.error   { color: #b91c1c; }

/* ─── Success state ─── */
.tvs-st-done .tvs-st-form-row,
.tvs-st-done .tvs-st-opt { display: none; }

.tvs-st-check-anim {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             10px;
    padding:         6px 0 2px;
}
.tvs-st-check-circle {
    width:           50px;
    height:          50px;
    border-radius:   50%;
    background:      var(--st-accent);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       22px;
    animation:       tvsPop .45s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes tvsPop {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* ─── Save count ─── */
.tvs-st-count {
    font-size:  12px;
    color:      var(--st-subtle);
    margin:     10px 0 0;
    font-style: italic;
}

/* ─── Mobile ─── */
@media (max-width: 520px) {
    .tvs-st-wrap      { padding: 26px 16px 20px; margin: 28px 0; }
    .tvs-st-heading   { font-size: 17px !important; }
    .tvs-st-form-row  { flex-direction: column; gap: 10px; }
    .tvs-st-email,
    .tvs-st-btn       { width: 100%; text-align: center; }
    .tvs-st-email     { border-radius: 50px; }
}