/* ==========================================================================
   PDF Popup Pro — Frontend CSS v2
   ========================================================================== */

/* ── BUTTON ────────────────────────────────────────────────────────────── */
.ppw-btn-wrap { display: flex; }

.ppw-trigger-btn {
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer; font-weight: 600; letter-spacing: .02em;
    border: none; outline: none; font-family: inherit; line-height: 1.4;
    transition: all .25s ease; text-decoration: none;
    padding: 13px 26px; border-radius: 8px;
    background: #e63946; color: #fff;
}

/* Sizes */
.ppw-btn-sm { padding: 8px 16px; font-size: 13px; }
.ppw-btn-md { padding: 13px 26px; font-size: 15px; }
.ppw-btn-lg { padding: 16px 34px; font-size: 17px; }
.ppw-btn-xl { padding: 20px 44px; font-size: 19px; }

/* Hover animations */
.ppw-anim-lift:hover  { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(230,57,70,.3); }
.ppw-anim-grow:hover  { transform: scale(1.04); }
.ppw-anim-glow:hover  { box-shadow: 0 0 0 4px rgba(230,57,70,.35); }
.ppw-anim-pulse:hover { animation: ppwPulse .6s ease; }
@keyframes ppwPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }

/* ── OVERLAY ───────────────────────────────────────────────────────────── */
.ppw-overlay {
    position: fixed; inset: 0; z-index: 999999;
    display: flex; padding: 20px;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}

/* Positions */
.ppw-pos-center  { align-items: center; justify-content: center; }
.ppw-pos-bottom  { align-items: flex-end; justify-content: center; padding: 0; }
.ppw-pos-right   { align-items: center; justify-content: flex-end; }

/* Animations */
.ppw-overlay { animation: ppwFadeIn .18s ease; }
.ppw-overlay.ppw-hiding { animation: ppwFadeOut .18s ease forwards; }
@keyframes ppwFadeIn  { from{opacity:0} to{opacity:1} }
@keyframes ppwFadeOut { from{opacity:1} to{opacity:0} }

/* ── MODAL ─────────────────────────────────────────────────────────────── */
.ppw-modal {
    position: relative; background: #fff; width: 100%; max-width: 480px;
    max-height: 92vh; overflow-y: auto; border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0,0,0,.22);
}
.ppw-modal::-webkit-scrollbar { width: 4px; }
.ppw-modal::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }

/* Position-specific modal shapes */
.ppw-pos-center .ppw-modal  { animation: ppwScaleIn .28s cubic-bezier(.34,1.56,.64,1); }
.ppw-pos-bottom .ppw-modal  { border-radius: 18px 18px 0 0; max-height: 88vh; animation: ppwSlideUp .28s cubic-bezier(.34,1.56,.64,1); }
.ppw-pos-right  .ppw-modal  { border-radius: 14px 0 0 14px; max-height: 100vh; height: 100%; animation: ppwSlideRight .28s cubic-bezier(.34,1.56,.64,1); margin: -20px 0; }

.ppw-pos-center.ppw-hiding  .ppw-modal { animation: ppwScaleOut .18s ease forwards; }
.ppw-pos-bottom.ppw-hiding  .ppw-modal { animation: ppwSlideDown .18s ease forwards; }
.ppw-pos-right.ppw-hiding   .ppw-modal { animation: ppwSlideLeft .18s ease forwards; }

@keyframes ppwScaleIn    { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }
@keyframes ppwScaleOut   { to{opacity:0;transform:scale(.95)} }
@keyframes ppwSlideUp    { from{transform:translateY(100%)} to{transform:translateY(0)} }
@keyframes ppwSlideDown  { to{transform:translateY(100%)} }
@keyframes ppwSlideRight { from{transform:translateX(100%)} to{transform:translateX(0)} }
@keyframes ppwSlideLeft  { to{transform:translateX(100%)} }

/* ── CLOSE ─────────────────────────────────────────────────────────────── */
.ppw-close {
    position: absolute; top: 12px; right: 14px; z-index: 10;
    width: 32px; height: 32px; border: none; border-radius: 50%;
    background: #f0f0f0; color: #555; font-size: 16px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
}
.ppw-close:hover { background: #e63946; color: #fff; }

/* ── MODAL HEADER ──────────────────────────────────────────────────────── */
.ppw-modal-head {
    padding: 30px 32px 20px; text-align: center;
    background: #fafafa; border-bottom: 1px solid #f0f0f0;
}

.ppw-hd-icon {
    width: 60px; height: 60px; background: #e63946;
    border-radius: 14px; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px rgba(230,57,70,.28);
}
.ppw-hd-icon i, .ppw-hd-icon svg { font-size: 26px; width: 26px; height: 26px; color: #fff; }

.ppw-modal-title    { font-size: 20px; font-weight: 700; color: #1a1a2e; margin: 0 0 6px; line-height: 1.3; }
.ppw-modal-subtitle { font-size: 13px; color: #666; margin: 0; line-height: 1.6; }

/* ── MODAL BODY ────────────────────────────────────────────────────────── */
.ppw-modal-body { padding: 26px 32px 30px; }

/* ── FORM GRID ─────────────────────────────────────────────────────────── */
.ppw-fields-grid { display: flex; flex-wrap: wrap; gap: 14px 12px; margin-bottom: 14px; }

.ppw-field        { display: flex; flex-direction: column; gap: 5px; }
.ppw-col-100      { width: 100%; }
.ppw-col-50       { width: calc(50% - 6px); }
.ppw-col-33       { width: calc(33.33% - 8px); }

.ppw-field label  { font-size: 12px; font-weight: 600; color: #333; letter-spacing: .02em; }
.ppw-req          { color: #e63946; margin-left: 2px; }

.ppw-field input,
.ppw-field textarea,
.ppw-field select {
    width: 100%; padding: 10px 14px;
    border: 1.5px solid #dee2e6; border-radius: 8px;
    font-size: 14px; font-family: inherit; color: #222;
    background: #f8f9fa; transition: border-color .18s, box-shadow .18s, background .18s;
    outline: none; box-sizing: border-box;
}
.ppw-field textarea { resize: vertical; min-height: 80px; }
.ppw-field select   { cursor: pointer; }

.ppw-field input:focus,
.ppw-field textarea:focus,
.ppw-field select:focus {
    border-color: #e63946; background: #fff;
    box-shadow: 0 0 0 3px rgba(230,57,70,.12);
}

.ppw-field input.ppw-invalid,
.ppw-field textarea.ppw-invalid { border-color: #dc3545; background: #fff8f8; }

.ppw-field-err { font-size: 11px; color: #dc3545; margin-top: 2px; }

/* Checkbox */
.ppw-checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.ppw-checkbox-label input { width: 16px; height: 16px; flex-shrink: 0; }

/* ── SUBMIT BUTTON ─────────────────────────────────────────────────────── */
.ppw-submit-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 13px 24px;
    background: #e63946; color: #fff; border: none;
    border-radius: 8px; font-size: 15px; font-weight: 700;
    font-family: inherit; cursor: pointer; transition: all .2s ease;
    letter-spacing: .02em;
}
.ppw-submit-btn:hover:not(:disabled) { background: #c1121f; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(230,57,70,.32); }
.ppw-submit-btn:disabled { opacity: .72; cursor: default; transform: none; }

.ppw-spin-svg { width: 17px; height: 17px; animation: ppwRotate .75s linear infinite; }
@keyframes ppwRotate { to { transform: rotate(360deg); } }

/* ── MESSAGES ──────────────────────────────────────────────────────────── */
.ppw-error-msg {
    padding: 11px 16px; margin-bottom: 10px; border-radius: 8px;
    font-size: 13px; color: #842029; background: #f8d7da;
}

.ppw-success-area {
    text-align: center; padding: 24px 16px;
    animation: ppwScaleIn .3s ease;
}
.ppw-success-icon { font-size: 42px; margin-bottom: 10px; }
.ppw-success-text { font-size: 16px; font-weight: 600; color: #1a6e3c; line-height: 1.5; }

/* ── PRIVACY NOTE ──────────────────────────────────────────────────────── */
.ppw-privacy {
    display: flex; align-items: center; justify-content: center;
    gap: 4px; font-size: 11px; color: #aaa; margin-top: 10px; text-align: center;
}

/* ── DOWNLOAD TOAST ────────────────────────────────────────────────────── */
.ppw-toast {
    position: fixed; bottom: 24px; right: 24px; z-index: 9999999;
    display: flex; align-items: center; gap: 10px;
    padding: 12px 18px; border-radius: 10px; font-size: 13px; font-weight: 600;
    background: #1a1a2e; color: #fff;
    box-shadow: 0 8px 28px rgba(0,0,0,.22);
    animation: ppwScaleIn .25s ease;
}
.ppw-toast.ppw-hiding { animation: ppwFadeOut .25s ease forwards; }

/* ── BODY LOCK ─────────────────────────────────────────────────────────── */
body.ppw-open { overflow: hidden; }

/* ── RESPONSIVE ────────────────────────────────────────────────────────── */
@media (max-width: 540px) {
    .ppw-pos-center { align-items: flex-end; padding: 0; }
    .ppw-pos-center .ppw-modal { border-radius: 18px 18px 0 0; max-height: 88vh; animation: ppwSlideUp .28s cubic-bezier(.34,1.56,.64,1); }
    .ppw-col-50, .ppw-col-33 { width: 100%; }
    .ppw-modal-head { padding: 22px 22px 16px; }
    .ppw-modal-body { padding: 20px 22px 24px; }
    .ppw-toast { left: 16px; right: 16px; bottom: 16px; }
}