/* PinSaveVideo Pro — Frontend CSS v3.3 (minimal glass UI) */
/* @import MUST be first — before any other rule */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');

/* ── Scoped custom properties ── */
.psv-wrap {
    --psv-red:           #e60023;
    --psv-red-dk:        #ad081b;
    --psv-radius:        50px;
    --psv-font:          'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --psv-glass-bg:      rgba(255, 255, 255, 0.18);
    --psv-glass-border:  rgba(255, 255, 255, 0.40);
    --psv-blur:          blur(16px);
    --psv-text:          #1a1a1a;
}

/* ── Universal box-sizing reset scoped to plugin only ── */
.psv-wrap,
.psv-wrap * {
    box-sizing: border-box;
}

/* ── Wrapper ── */
.psv-wrap {
    display:     block;
    width:       100%;
    max-width:   680px;
    margin:      0 auto;
    padding:     32px 20px;
    font-family: var(--psv-font);
    font-size:   16px;
    line-height: 1.5;
    color:       var(--psv-text);
    text-align:  center;
    background:  transparent;
    position:    relative;
    overflow:    hidden;
}

/* ── Input area ── */
.psv-wrap .psv-input-area {
    display:    block;
    width:      100%;
    margin:     0 auto 20px auto;
    text-align: center;
}

/* ── Glass pill container ── */
.psv-wrap .psv-input-row {
    display:              flex;
    flex-direction:       row;
    align-items:          center;
    width:                100%;
    gap:                  0;
    background:           rgba(255, 255, 255, 0.55);
    border:               1.5px solid rgba(180, 180, 200, 0.50);
    border-radius:        var(--psv-radius);
    padding:              6px 6px 6px 22px;
    box-shadow:           0 4px 24px rgba(0, 0, 0, 0.10),
                          inset 0 1px 0 rgba(255, 255, 255, 0.80);
    backdrop-filter:      var(--psv-blur);
    -webkit-backdrop-filter: var(--psv-blur);
    transition:           border-color .2s ease, box-shadow .2s ease;
    margin:               0 auto;
}

.psv-wrap .psv-input-row:focus-within {
    border-color: rgba(230, 0, 35, 0.45);
    box-shadow:   0 4px 28px rgba(230, 0, 35, 0.12),
                  inset 0 1px 0 rgba(255, 255, 255, 0.80);
}

/* ── Input ── */
.psv-wrap .psv-input {
    flex:               1 1 auto !important;
    display:            block !important;
    width:              100% !important;
    min-width:          0 !important;
    border:             none !important;
    outline:            none !important;
    background:         transparent !important;
    box-shadow:         none !important;
    font-family:        var(--psv-font) !important;
    font-size:          15px !important;
    font-weight:        400 !important;
    color:              #1a1a1a !important;
    padding:            10px 10px 10px 0 !important;
    margin:             0 !important;
    border-radius:      0 !important;
    text-align:         left !important;
    line-height:        1.4 !important;
    -webkit-appearance: none;
    appearance:         none;
}

.psv-wrap .psv-input::placeholder {
    color:       rgba(80, 80, 100, 0.50);
    opacity:     1;
    font-weight: 400;
}

.psv-wrap .psv-input:focus {
    outline:    none !important;
    box-shadow: none !important;
}

/* ── Buttons — shared base ── */
.psv-wrap .psv-btn {
    display:            inline-flex !important;
    align-items:        center !important;
    justify-content:    center !important;
    position:           relative !important;
    flex-shrink:        0 !important;
    gap:                6px !important;
    font-family:        var(--psv-font) !important;
    font-size:          14px !important;
    font-weight:        700 !important;
    letter-spacing:     0.02em !important;
    line-height:        1 !important;
    cursor:             pointer !important;
    white-space:        nowrap !important;
    text-decoration:    none !important;
    text-align:         center !important;
    border-radius:      var(--psv-radius) !important;
    padding:            13px 28px !important;
    transition:         background .18s ease, transform .12s ease, box-shadow .18s ease;
    outline-offset:     2px;
    -webkit-appearance: none;
    appearance:         none;
    vertical-align:     middle;
}

/* ── Red primary button ── */
.psv-wrap .psv-btn-red {
    background: linear-gradient(135deg, #e60023 0%, #c4001a 100%) !important;
    color:      #ffffff !important;
    border:     none !important;
    box-shadow: 0 2px 12px rgba(230, 0, 35, 0.28) !important;
}

.psv-wrap .psv-btn-red:hover,
.psv-wrap .psv-btn-red:focus-visible {
    background:      linear-gradient(135deg, #ff1a38 0%, #e60023 100%) !important;
    color:           #ffffff !important;
    transform:       translateY(-1px);
    box-shadow:      0 4px 20px rgba(230, 0, 35, 0.40) !important;
    text-decoration: none !important;
}

.psv-wrap .psv-btn-red:active {
    background: linear-gradient(135deg, #c4001a 0%, #a3001a 100%) !important;
    transform:  translateY(0) !important;
    box-shadow: 0 1px 8px rgba(230, 0, 35, 0.20) !important;
}

/* ── Outline secondary button ── */
.psv-wrap .psv-btn-outline {
    background:              rgba(255, 255, 255, 0.60) !important;
    color:                   #444444 !important;
    border:                  1.5px solid rgba(0, 0, 0, 0.15) !important;
    backdrop-filter:         blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow:              none !important;
}

.psv-wrap .psv-btn-outline:hover,
.psv-wrap .psv-btn-outline:focus-visible {
    border-color:    rgba(230, 0, 35, 0.50) !important;
    color:           #e60023 !important;
    background:      rgba(230, 0, 35, 0.05) !important;
    text-decoration: none !important;
}

/* ── Disabled ── */
.psv-wrap .psv-btn:disabled,
.psv-wrap .psv-btn[disabled] {
    opacity:        .50 !important;
    cursor:         not-allowed !important;
    transform:      none !important;
    pointer-events: none;
}

/* ── Loading spinner ── */
.psv-wrap .psv-spin {
    display:          none;
    position:         absolute;
    width:            17px;
    height:           17px;
    border:           2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius:    50%;
    animation:        psv-spin .65s linear infinite;
    pointer-events:   none;
    top:              50%;
    left:             50%;
    margin-top:       -8.5px;
    margin-left:      -8.5px;
}

@keyframes psv-spin { to { transform: rotate(360deg); } }

.psv-wrap .psv-btn.is-busy .psv-btn-label { opacity: 0; }
.psv-wrap .psv-btn.is-busy .psv-spin      { display: block; }

/* ── Error text ── */
.psv-wrap .psv-error {
    display:     block;
    width:       100%;
    margin-top:  10px;
    color:       #e60023;
    font-size:   13px;
    font-weight: 500;
    min-height:  18px;
    text-align:  left;
    line-height: 1.4;
    padding-left: 6px;
}

/* ── Result section ── */
.psv-wrap .psv-result {
    display:    block;
    width:      100%;
    margin-top: 16px;
}

/* ── Preview box ── */
.psv-wrap .psv-preview-box {
    display:                 flex;
    flex-direction:          column;
    align-items:             center;
    justify-content:         center;
    width:                   100%;
    background:              rgba(255, 255, 255, 0.55);
    border:                  1.5px solid rgba(180, 180, 200, 0.40);
    border-radius:           18px;
    overflow:                hidden;
    margin-bottom:           16px;
    min-height:              80px;
    padding:                 16px;
    text-align:              center;
    backdrop-filter:         var(--psv-blur);
    -webkit-backdrop-filter: var(--psv-blur);
}

.psv-wrap .psv-preview-box img {
    display:       block;
    max-width:     100%;
    max-height:    440px;
    height:        auto;
    margin:        0 auto;
    object-fit:    contain;
    border-radius: 8px;
}

.psv-wrap .psv-preview-box video {
    display:       block;
    max-width:     100%;
    max-height:    440px;
    height:        auto;
    width:         100%;
    margin:        0 auto;
    border-radius: 12px;
}

/* ── Action buttons row ── */
.psv-wrap .psv-actions {
    display:         flex;
    flex-direction:  row;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    flex-wrap:       wrap;
    width:           100%;
    text-align:      center;
}

/* ── Media-type label ── */
.psv-wrap .psv-type-label {
    display:        inline-block;
    text-align:     center;
    font-size:      11px;
    font-weight:    700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding:        3px 12px;
    border-radius:  20px;
    margin:         0 auto 10px auto;
    line-height:    1.6;
}

.psv-wrap .psv-type-label.tl-video { background: rgba(255,243,224,.90); color: #e65100; border: 1px solid #ffcc80; }
.psv-wrap .psv-type-label.tl-gif   { background: rgba(232,245,233,.90); color: #2e7d32; border: 1px solid #a5d6a7; }
.psv-wrap .psv-type-label.tl-image { background: rgba(227,242,253,.90); color: #1565c0; border: 1px solid #90caf9; }

/* ═══════════════════════════════════════
   RESPONSIVE — Tablet (≤900px)
   ═══════════════════════════════════════ */
@media (max-width: 900px) {
    .psv-wrap {
        max-width: 100%;
        padding:   28px 16px;
    }
}

/* ═══════════════════════════════════════
   RESPONSIVE — Mobile (≤768px)
   Pill dissolves: input + button stack vertically, each full-width.
   ═══════════════════════════════════════ */
@media (max-width: 768px) {
    .psv-wrap {
        padding: 20px 14px 28px;
    }

    /* Dissolve pill — become a plain column */
    .psv-wrap .psv-input-row {
        flex-direction:          column;
        align-items:             stretch;
        gap:                     10px;
        background:              transparent !important;
        border:                  none !important;
        border-radius:           0 !important;
        padding:                 0 !important;
        box-shadow:              none !important;
        backdrop-filter:         none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Input becomes its own full-width pill */
    .psv-wrap .psv-input {
        display:                 block !important;
        width:                   100% !important;
        background:              rgba(255, 255, 255, 0.72) !important;
        border:                  1.5px solid rgba(180, 180, 200, 0.55) !important;
        border-radius:           50px !important;
        padding:                 14px 22px !important;
        font-size:               16px !important;
        text-align:              left !important;
        backdrop-filter:         blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        box-shadow:              0 4px 20px rgba(0, 0, 0, 0.08) !important;
    }

    .psv-wrap .psv-input:focus {
        border-color: rgba(230, 0, 35, 0.45) !important;
        box-shadow:   0 4px 20px rgba(230, 0, 35, 0.12) !important;
    }

    /* Download button goes below input, full-width */
    .psv-wrap #psv-fetch-btn {
        display:       flex !important;
        width:         100% !important;
        padding:       15px 20px !important;
        font-size:     15px !important;
        border-radius: 50px !important;
    }

    /* Action buttons stack vertically */
    .psv-wrap .psv-actions {
        flex-direction: column;
        align-items:    stretch;
        gap:            10px;
    }

    .psv-wrap .psv-actions .psv-btn {
        width:   100% !important;
        padding: 14px 20px !important;
    }

    .psv-wrap .psv-error {
        text-align: left;
    }

    .psv-wrap .psv-preview-box {
        border-radius: 12px;
        padding:       10px;
    }
}

/* ═══════════════════════════════════════
   RESPONSIVE — Small phones (≤400px)
   ═══════════════════════════════════════ */
@media (max-width: 400px) {
    .psv-wrap {
        padding: 16px 10px 24px;
    }
}