/* Distinktive Gift Voucher — Frontend Styles v1.0.0 */

/* ── Layout ──────────────────────────────────────────── */
.mgv-form-wrap { font-family: 'Arvo', Georgia, serif; max-width: 960px; margin: 0 auto; }
.mgv-layout    { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }

/* ── Voucher card preview ────────────────────────────── */
.mgv-card-preview {
    background: var(--mgv-dark, #052452);
    border-radius: 12px;
    padding: clamp(1.5rem, 3vw, 2rem);
    aspect-ratio: 1.65 / 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 8px 32px rgba(5, 36, 82, .25);
    position: relative;
    overflow: hidden;
}
.mgv-card-preview::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 7px;
    background: linear-gradient(180deg, var(--mgv-accent, #2baec9) 0%, var(--mgv-primary, #1e73be) 100%);
}
.mgv-card-name   { font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.8); }
.mgv-card-script { font-family: 'Great Vibes', cursive; font-size: 1.4rem; color: var(--mgv-accent, #2baec9); margin-top: 2px; }
.mgv-card-amount { font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 700; color: var(--mgv-accent, #2baec9); line-height: 1; }
.mgv-card-bar    { height: 1px; background: rgba(255,255,255,.15); margin: .6rem 0; }
.mgv-card-for    { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.45); }
.mgv-card-top    { }

.mgv-subtext { font-size: 12px; color: #9ca3af; margin-top: .7rem; line-height: 1.6; font-family: 'Arvo', Georgia, serif; }

/* ── Code checker ─────────────────────────────────────── */
.mgv-check-wrap  { margin-top: 1.2rem; border-top: 1px solid #dce8f4; padding-top: 1rem; }
.mgv-check-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #9ca3af; margin-bottom: .5rem; }
.mgv-check-row   { display: flex; gap: 6px; }
.mgv-check-input { flex: 1; border: 1.5px solid #dce8f4; border-radius: 4px; padding: 8px 10px; font-family: 'Arvo', Georgia, serif; font-size: 13px; color: #052452; outline: none; }
.mgv-check-input:focus { border-color: var(--mgv-primary, #1e73be); }
.mgv-check-btn { background: var(--mgv-primary, #1e73be); color: #fff; border: none; border-radius: 4px; padding: 8px 16px; font-family: 'Arvo', Georgia, serif; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.mgv-check-btn:hover { opacity: .9; }
.mgv-check-result { margin-top: 8px; padding: 9px 12px; border-radius: 4px; font-size: 12px; font-family: 'Arvo', Georgia, serif; line-height: 1.5; }

/* ── Form fields ──────────────────────────────────────── */
.mgv-presets   { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 1rem; }
.mgv-preset {
    padding: 9px 18px;
    border: 1.5px solid #dce8f4;
    border-radius: 4px;
    background: #fff;
    color: #052452;
    font-family: 'Arvo', Georgia, serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s;
}
.mgv-preset:hover, .mgv-preset.mgv-active { background: var(--mgv-primary, #1e73be); color: #fff; border-color: var(--mgv-primary, #1e73be); }

.mgv-field       { margin-bottom: 11px; }
.mgv-field label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #6b7280; margin-bottom: 4px; }
.mgv-req         { color: #e53e3e; }
.mgv-field-row   { display: grid; grid-template-columns: 1fr; gap: 11px; }

.mgv-input, .mgv-textarea {
    width: 100%;
    border: 1.5px solid #dce8f4;
    border-radius: 4px;
    padding: 9px 12px;
    font-family: 'Arvo', Georgia, serif;
    font-size: 13px;
    color: #052452;
    outline: none;
    transition: border .15s;
    background: #fff;
}
.mgv-input:focus, .mgv-textarea:focus { border-color: var(--mgv-primary, #1e73be); }
.mgv-textarea { min-height: 72px; resize: vertical; }

/* ── Payment ──────────────────────────────────────────── */
.mgv-payment-wrap  { background: #f0f6fc; border-radius: 6px; padding: 14px; margin-bottom: 12px; }
.mgv-payment-label { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #6b7280; margin-bottom: 8px; }
.mgv-card-fields   { }
.mgv-card-row      { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 7px; }
.mgv-secure-note   { font-size: 11px; color: #9ca3af; margin-top: 8px; font-family: 'Arvo', Georgia, serif; }

/* ── Submit button ────────────────────────────────────── */
.mgv-submit-btn {
    width: 100%;
    background: var(--mgv-primary, #1e73be);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 14px;
    font-family: 'Arvo', Georgia, serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s;
    margin-bottom: 10px;
}
.mgv-submit-btn:hover   { background: var(--mgv-dark, #052452); }
.mgv-submit-btn:disabled{ opacity: .6; cursor: not-allowed; }

.mgv-terms-note { font-size: 11px; color: #9ca3af; line-height: 1.55; font-family: 'Arvo', Georgia, serif; text-align: center; }

/* ── Messages ─────────────────────────────────────────── */
.mgv-msg { padding: 10px 14px; border-radius: 4px; font-size: 13px; font-family: 'Arvo', Georgia, serif; margin-bottom: 10px; }
.mgv-msg-ok  { background: #d1fae5; color: #065f46; }
.mgv-msg-err { background: #fef3c7; color: #92400e; }

/* ── Success state ────────────────────────────────────── */
.mgv-success       { }
.mgv-success-inner { text-align: center; padding: 3rem 2rem; background: #fff; border: 1px solid #dce8f4; border-radius: 8px; }
.mgv-success-icon  { width: 60px; height: 60px; border-radius: 50%; background: #d1fae5; color: #059669; font-size: 28px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-family: sans-serif; }
.mgv-success-inner h3 { font-family: 'Arvo', Georgia, serif; font-size: 1.4rem; color: #052452; margin-bottom: .5rem; }
.mgv-success-inner p  { font-size: 14px; color: #6b7280; font-family: 'Arvo', Georgia, serif; line-height: 1.6; margin-bottom: .5rem; }
.mgv-success-code  { font-family: 'Courier New', monospace; font-size: 1.3rem; font-weight: 700; color: var(--mgv-primary, #1e73be); letter-spacing: 3px; margin: 1rem 0; padding: 10px; background: #f0f6fc; border-radius: 4px; }
.mgv-another-btn   { background: transparent; border: 1.5px solid var(--mgv-primary, #1e73be); color: var(--mgv-primary, #1e73be); border-radius: 4px; padding: 10px 24px; font-family: 'Arvo', Georgia, serif; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; margin-top: .5rem; }
.mgv-another-btn:hover { background: var(--mgv-primary, #1e73be); color: #fff; }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 720px) {
    .mgv-layout { grid-template-columns: 1fr; }
    .mgv-card-preview { aspect-ratio: auto; min-height: 180px; }
}
@media (max-width: 480px) {
    .mgv-presets { gap: 6px; }
    .mgv-preset  { padding: 8px 14px; font-size: 13px; }
}

/* ── Stripe Elements ──────────────────────────────────── */
.mgv-stripe-element {
    background: #fff;
    border: 1.5px solid #dce8f4;
    border-radius: 4px;
    padding: 11px 12px;
    transition: border-color .15s;
    min-height: 42px;
}
.mgv-stripe-element.focused,
.mgv-stripe-element:focus-within { border-color: var(--mgv-primary, #1e73be); }

.mgv-card-error {
    font-size: 12px;
    color: #e53e3e;
    min-height: 18px;
    margin-top: 5px;
    font-family: 'Arvo', Georgia, serif;
}

.mgv-stripe-notice {
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 4px;
    padding: 10px 12px;
    margin-bottom: 8px;
}
.mgv-stripe-notice p {
    font-size: 12px;
    color: #92400e;
    margin: 0;
    font-family: 'Arvo', Georgia, serif;
    line-height: 1.5;
}

/* ── Success meta (amount + expiry) ──────────────────── */
.mgv-success-meta {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    font-family: 'Arvo', Georgia, serif;
    font-size: 13px;
    color: #6b7280;
    margin: .5rem 0;
}
.mgv-success-meta strong { color: var(--mgv-primary, #1e73be); }