/**
 * SafeLink Manager — Frontend CSS v1.1.1
 *
 * No display:none overrides needed.
 * Elements are built by JS only when a valid safelink hash is present.
 * These styles are only applied to dynamically created elements.
 */

:root {
    --slm-color:    #f89000;
    --slm-text:     #1a1a1a;
    --slm-bg:       #f8f8f8;
    --slm-border:   #e5e5e5;
    --slm-radius:   6px;
    --slm-shadow:   0 2px 8px rgba(0, 0, 0, 0.09);
}

/* ── Dark mode — applied via body class set before UI is built ── */
body.slm-dark {
    --slm-text:   #f0f0f0;
    --slm-bg:     #2a2a2a;
    --slm-border: #444;
}

@media (prefers-color-scheme: dark) {
    body:not(.slm-force-light) {
        --slm-text:   #f0f0f0;
        --slm-bg:     #2a2a2a;
        --slm-border: #444;
    }
}

/* ── Wrappers ── */
.slm-wrap {
    width:         100%;
    padding:       18px 20px;
    margin:        20px 0;
    background:    var(--slm-bg);
    border:        1px solid var(--slm-border);
    border-radius: var(--slm-radius);
    box-shadow:    var(--slm-shadow);
    text-align:    center;
    box-sizing:    border-box;
    color:         var(--slm-text);
    transition:    background 0.3s, border-color 0.3s;
    /* Animate in cleanly when JS injects it */
    animation:     slm-fadein 0.3s ease;
}

@keyframes slm-fadein {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.slm-top    { border-top:    3px solid var(--slm-color); }
.slm-bottom { border-bottom: 3px solid var(--slm-color); animation-direction: normal; }

/* ── Timer row ── */
.slm-timer-row {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             14px;
    margin-bottom:   14px;
    flex-wrap:       wrap;
}

/* ── Circular pie timer ── */
.slm-pie-timer {
    position:    relative;
    width:       52px;
    height:      52px;
    flex-shrink: 0;
}

/* Background ring */
.slm-pie-bg {
    position:      absolute;
    inset:         0;
    border-radius: 50%;
    border:        3px solid var(--slm-border);
}

/* Animated fill ring */
.slm-pie-fill {
    position:         absolute;
    inset:            0;
    border-radius:    50%;
    border:           3px solid var(--slm-color);
    transform:        rotate(0deg);
    transform-origin: center;
    transition:       transform 0.92s linear;
    /*
     * clip-path creates a half-circle mask.
     * As JS rotates this element from 0 → 360deg,
     * the visible arc grows from empty to full circle.
     * For angles > 180deg the .slm-pie-gt-half class
     * is added by JS to extend the clip correctly.
     */
    clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%, 50% 0%);
}

/* Numeric countdown in center */
.slm-pie-count {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       15px;
    font-weight:     700;
    color:           var(--slm-color);
    line-height:     1;
    user-select:     none;
}

.slm-wait-text {
    font-size: 14px;
    color:     var(--slm-text);
    opacity:   0.72;
}

/* ── Buttons ── */
.slm-btn {
    display:         inline-block;
    padding:         12px 36px;
    border:          2px solid var(--slm-color);
    border-radius:   var(--slm-radius);
    background:      var(--slm-color);
    color:           #ffffff;
    font-size:       15px;
    font-weight:     600;
    cursor:          pointer;
    transition:      background 0.2s, color 0.2s, opacity 0.2s, transform 0.15s;
    outline:         none;
    text-decoration: none;
    user-select:     none;
    -webkit-appearance: none;
    appearance:      none;
    letter-spacing:  0.02em;
}

.slm-btn:disabled,
.slm-btn[disabled] {
    opacity: 0.38;
    cursor:  not-allowed;
    transform: none !important;
}

.slm-btn:not(:disabled):hover {
    background: transparent;
    color:      var(--slm-color);
}

.slm-btn:not(:disabled):active {
    transform: scale(0.97);
}

/* Pulse animation when timer ends and button activates */
.slm-btn.slm-active {
    animation: slm-pulse 0.45s ease forwards;
}

@keyframes slm-pulse {
    0%   { transform: scale(1);    }
    40%  { transform: scale(1.06); }
    70%  { transform: scale(0.97); }
    100% { transform: scale(1);    }
}

/* ── Notice text below Go to Link ── */
.slm-notice {
    margin:    10px 0 0;
    font-size: 12px;
    color:     var(--slm-text);
    opacity:   0.45;
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .slm-btn {
        width:   100%;
        padding: 13px 20px;
    }
    .slm-wrap {
        padding: 14px;
    }
    .slm-timer-row {
        flex-direction: column;
        gap:            8px;
    }
}