@import url('https://fonts.googleapis.com/css2?family=Lexend+Giga:wght@300;400;500;600;700;800;900&display=swap');

:root {
    --ply-blue:   #000FFF;
    --ply-orange: #ef4c22;
    --ply-bg:     #fffaf8;
    --ply-white:  #ffffff;
    --ply-border: #e8e8f0;
    --ply-text:   #1a1a2e;
    --ply-muted:  #64748b;
    --ply-radius: 16px;
    --ply-shadow: 0 4px 24px rgba(0,0,0,.08);
}

.ply-gift-wrap * { box-sizing:border-box; font-family:'Lexend Giga',sans-serif; }
.ply-gift-wrap { max-width:640px; margin:0 auto; padding:0 0 60px; }

/* ── Hero ── */
.ply-gift-hero {
    background:linear-gradient(135deg, #000FFF 0%, #1a1aff 60%, #3333ff 100%);
    border-radius:24px; padding:48px 32px; text-align:center;
    margin-bottom:32px; position:relative; overflow:hidden;
}
.ply-gift-hero::before {
    content:''; position:absolute; top:-40px; right:-40px;
    width:200px; height:200px; background:rgba(255,255,255,.06);
    border-radius:50%;
}
.ply-gift-hero::after {
    content:''; position:absolute; bottom:-60px; left:-30px;
    width:160px; height:160px; background:rgba(239,76,34,.15);
    border-radius:50%;
}
.ply-gift-hero-emoji { font-size:56px; margin-bottom:16px; position:relative; z-index:1; }
.ply-gift-hero-title {
    font-size:32px; font-weight:900; color:#fff; margin:0 0 12px;
    line-height:1.15; text-transform:uppercase; letter-spacing:1px;
    position:relative; z-index:1;
}
.ply-gift-hero-title span { color:#ef4c22; }
.ply-gift-hero-sub { font-size:13px; color:rgba(255,255,255,.75); margin:0; position:relative; z-index:1; line-height:1.6; }

/* ── Form Wrap ── */
.ply-gift-form-wrap { background:#fff; border-radius:24px; padding:36px; box-shadow:var(--ply-shadow); border:1px solid var(--ply-border); }

/* ── Step Labels ── */
.ply-gift-step-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:2px; color:var(--ply-orange); margin-bottom:8px; }
.ply-gift-step-title { font-size:18px; font-weight:800; color:var(--ply-text); margin:0 0 24px; }

/* ── Plan Cards ── */
.ply-gift-plans { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:8px; }
.ply-gift-plan-card {
    border:2px solid var(--ply-border); border-radius:14px; padding:20px 14px;
    text-align:center; cursor:pointer; transition:all .2s;
}
.ply-gift-plan-card:hover { border-color:var(--ply-blue); background:#f5f5ff; }
.ply-gift-plan-card.selected { border-color:var(--ply-blue); background:#f0f0ff; box-shadow:0 0 0 3px rgba(0,15,255,.12); }
.ply-gift-plan-name { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:1.5px; color:var(--ply-blue); margin-bottom:8px; }
.ply-gift-plan-price { font-size:22px; font-weight:900; color:var(--ply-text); margin-bottom:4px; }
.ply-gift-plan-price span { font-size:11px; color:var(--ply-muted); font-weight:400; }
.ply-gift-plan-credits { font-size:11px; color:var(--ply-muted); display:flex; align-items:center; justify-content:center; gap:4px; }

/* ── Month Cards ── */
.ply-gift-months { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:8px; }
.ply-gift-month-card {
    border:2px solid var(--ply-border); border-radius:14px; padding:20px 10px;
    text-align:center; cursor:pointer; transition:all .2s; position:relative;
}
.ply-gift-month-card:hover { border-color:var(--ply-blue); background:#f5f5ff; }
.ply-gift-month-card.selected { border-color:var(--ply-blue); background:#f0f0ff; box-shadow:0 0 0 3px rgba(0,15,255,.12); }
.ply-gift-month-card.ply-popular { border-color:var(--ply-orange); }
.ply-gift-month-card.ply-popular.selected { background:#fff5f2; box-shadow:0 0 0 3px rgba(239,76,34,.15); }
.ply-popular-badge { position:absolute; top:-10px; left:50%; transform:translateX(-50%); background:var(--ply-orange); color:#fff; font-size:9px; font-weight:900; padding:3px 10px; border-radius:50px; text-transform:uppercase; letter-spacing:1px; white-space:nowrap; }
.ply-month-num { font-size:28px; font-weight:900; color:var(--ply-blue); line-height:1; }
.ply-month-label { font-size:11px; color:var(--ply-muted); margin:4px 0 8px; }
.ply-month-price { font-size:12px; font-weight:700; color:var(--ply-orange); }

/* ── Form Fields ── */
.ply-gift-fields { display:flex; flex-direction:column; gap:16px; }
.ply-gift-field { display:flex; flex-direction:column; gap:6px; }
.ply-gift-field label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--ply-text); }
.ply-gift-field input,
.ply-gift-field textarea {
    padding:14px 16px; border:2px solid var(--ply-border); border-radius:12px;
    font-family:'Lexend Giga',sans-serif; font-size:13px; color:var(--ply-text);
    outline:none; transition:border-color .15s; background:var(--ply-bg);
}
.ply-gift-field input:focus,
.ply-gift-field textarea:focus { border-color:var(--ply-blue); background:#fff; }
.ply-gift-field textarea { resize:vertical; min-height:100px; }
.ply-gift-field-hint { font-size:11px; color:var(--ply-muted); }

/* ── Buttons ── */
.ply-gift-btn-primary {
    width:100%; padding:16px; background:var(--ply-blue); color:#fff;
    border:none; border-radius:50px; font-family:'Lexend Giga',sans-serif;
    font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:1.5px;
    cursor:pointer; transition:all .2s; margin-top:20px; display:block; text-align:center;
}
.ply-gift-btn-primary:hover { background:#0000dd; transform:translateY(-1px); box-shadow:0 4px 16px rgba(0,15,255,.3); }
.ply-gift-btn-primary:disabled { opacity:.6; cursor:not-allowed; transform:none; }
.ply-gift-btn-back { background:none; border:none; font-family:'Lexend Giga',sans-serif; font-size:12px; color:var(--ply-muted); cursor:pointer; padding:0; }
.ply-gift-btn-back:hover { color:var(--ply-text); }

/* ── Summary ── */
.ply-gift-summary { background:var(--ply-bg); border-radius:14px; padding:20px; border:1px solid var(--ply-border); margin-bottom:20px; }
.ply-gift-summary-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; font-size:12px; border-bottom:1px solid var(--ply-border); }
.ply-gift-summary-row:last-child { border-bottom:none; }
.ply-gift-summary-row span { color:var(--ply-muted); font-weight:600; }
.ply-gift-summary-row strong { color:var(--ply-text); font-weight:700; }
.ply-gift-summary-divider { border:none; border-top:2px solid var(--ply-border); margin:8px 0; }
.ply-gift-total { padding-top:12px !important; }
.ply-gift-total span { font-size:13px; font-weight:800; color:var(--ply-text); }
.ply-gift-total strong { font-size:20px; font-weight:900; color:var(--ply-orange); }

/* ── Card Element ── */
.ply-gift-card-element { border:2px solid var(--ply-border); border-radius:12px; padding:14px 16px; background:#fff; margin-bottom:8px; transition:border-color .15s; }
.ply-gift-card-element.StripeElement--focus { border-color:var(--ply-blue); }
.ply-gift-card-errors { font-size:12px; color:#ef4444; min-height:18px; }

/* ── Secure Badge ── */
.ply-gift-secure { text-align:center; font-size:11px; color:var(--ply-muted); margin-top:16px; }

/* ── Messages ── */
.ply-gift-msg { padding:12px 16px; border-radius:10px; font-size:13px; font-weight:600; margin-bottom:16px; display:none; }
.ply-gift-msg.success { background:#ecfdf5; color:#065f46; border-left:4px solid #10b981; display:block; }
.ply-gift-msg.error   { background:#fef2f2; color:#b91c1c; border-left:4px solid #ef4444; display:block; }

/* ── Progress ── */
.ply-gift-nav { display:flex; align-items:center; gap:16px; margin-top:24px; }
.ply-gift-progress { flex:1; height:4px; background:var(--ply-border); border-radius:99px; overflow:hidden; }
.ply-gift-progress-bar { height:100%; background:var(--ply-blue); border-radius:99px; transition:width .3s ease; }

/* ── Message Preview ── */
.ply-gift-message-preview em { font-style:italic; color:var(--ply-muted); font-size:12px; }

/* ── Responsive ── */
@media(max-width:480px) {
    .ply-gift-hero-title { font-size:24px; }
    .ply-gift-form-wrap { padding:24px; }
    .ply-gift-plans { grid-template-columns:1fr; }
    .ply-gift-months { grid-template-columns:repeat(2,1fr); }
}

/* ── Top-Up Package Cards ── */
.ply-gift-packages { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:8px; }
.ply-gift-package-card {
    border:2px solid var(--ply-border); border-radius:14px; padding:20px 14px;
    text-align:center; cursor:pointer; transition:all .2s;
}
.ply-gift-package-card:hover  { border-color:var(--ply-blue); background:#f5f5ff; }
.ply-gift-package-card.selected { border-color:var(--ply-blue); background:#f0f0ff; box-shadow:0 0 0 3px rgba(0,15,255,.12); }
.ply-pkg-credits { font-size:18px; font-weight:900; color:var(--ply-blue); display:flex; align-items:center; justify-content:center; gap:6px; margin-bottom:6px; }
.ply-pkg-price   { font-size:20px; font-weight:900; color:var(--ply-orange); margin-bottom:4px; }
.ply-pkg-name    { font-size:10px; color:var(--ply-muted); text-transform:uppercase; letter-spacing:1px; }