/* VRPOINT Pass — Modal */

/* ─── Variables ──────────────────────────────────────────────────────────────── */
:root {
    --vrp-blue:     #0075F2;
    --vrp-blue-lt:  #4DA3FF;
    --vrp-ink:      #1d1d1f;
    --vrp-sub:      #6e6e73;
    --vrp-fill:     #f5f5f7;
    --vrp-fill-2:   #e8e8ed;
    --vrp-sep:      rgba(0, 0, 0, 0.08);
    --vrp-r:        14px;
    --vrp-r-sm:     10px;
    --vrp-font:     -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
}

/* ─── Overlay ─────────────────────────────────────────────────────────────────── */
body.vrp-pass-open { overflow: hidden; }

.vrp-pass-overlay {
    position:                fixed;
    inset:                   0;
    z-index:                 99999;
    display:                 flex;
    align-items:             center;
    justify-content:         center;
    padding:                 20px;
    background:              rgba(0, 0, 0, 0.45);
    backdrop-filter:         blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* ─── Modal card ──────────────────────────────────────────────────────────────── */
.vrp-pass-modal {
    width:         100%;
    max-width:     400px;
    background:    #fff;
    border-radius: 20px;
    box-shadow:    0 20px 60px rgba(0, 0, 0, 0.22), 0 0 0 0.5px rgba(0,0,0,0.06);
    padding:       32px 28px 28px;
    position:      relative;
    font-family:   var(--vrp-font);
    color:         var(--vrp-ink);
    animation:     vrp-pass-in 0.28s cubic-bezier(0.32, 1.25, 0.55, 1);
}

@keyframes vrp-pass-in {
    from { opacity: 0; transform: scale(0.95) translateY(12px); }
    to   { opacity: 1; transform: none; }
}

/* ─── Close ───────────────────────────────────────────────────────────────────── */
.vrp-pass-close {
    position:        absolute;
    top:             16px;
    right:           16px;
    width:           28px;
    height:          28px;
    border-radius:   50%;
    border:          none;
    background:      var(--vrp-fill);
    color:           var(--vrp-sub);
    font-size:       16px;
    line-height:     1;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background 0.12s;
}
.vrp-pass-close:hover { background: var(--vrp-fill-2); }

/* ─── Title ───────────────────────────────────────────────────────────────────── */
.vrp-pass-modal-title {
    font-size:      22px;
    font-weight:    700;
    letter-spacing: -0.4px;
    color:          var(--vrp-ink);
    margin:         0 0 24px;
    padding-right:  32px;
}

/* ─── Generic row ─────────────────────────────────────────────────────────────── */
.vrp-pass-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         14px 0;
}

.vrp-pass-row-sep {
    border-bottom: 1px solid var(--vrp-sep);
}

.vrp-pass-row-label {
    font-size:   15px;
    font-weight: 400;
    color:       var(--vrp-ink);
}

/* ─── Stepper ─────────────────────────────────────────────────────────────────── */
.vrp-pass-stepper {
    display:     flex;
    align-items: center;
    gap:         14px;
}

.vrp-pass-step-btn {
    width:           30px;
    height:          30px;
    border-radius:   50%;
    border:          1.5px solid var(--vrp-fill-2);
    background:      var(--vrp-fill);
    color:           var(--vrp-ink);
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background 0.12s, border-color 0.12s, opacity 0.12s;
    flex-shrink:     0;
}

.vrp-pass-step-btn:hover:not(:disabled) {
    background:   var(--vrp-fill-2);
    border-color: rgba(0, 0, 0, 0.2);
}

.vrp-pass-step-btn:disabled {
    opacity: 0.28;
    cursor:  default;
}

.vrp-pass-step-val {
    font-size:            17px;
    font-weight:          500;
    min-width:            22px;
    text-align:           center;
    color:                var(--vrp-ink);
    font-variant-numeric: tabular-nums;
}

/* ─── Total row ───────────────────────────────────────────────────────────────── */
.vrp-pass-row-total {
    margin-bottom: 24px;
}

.vrp-pass-total {
    font-size:            17px;
    font-weight:          600;
    color:                var(--vrp-ink);
    letter-spacing:       -0.2px;
    font-variant-numeric: tabular-nums;
    transition:           opacity 0.15s;
}

/* ─── Fields ──────────────────────────────────────────────────────────────────── */
.vrp-pass-fields {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    margin-bottom:  10px;
}

.vrp-pass-field {
    display:        flex;
    flex-direction: column;
    gap:            5px;
    margin-bottom:  10px;
}

.vrp-pass-field label {
    font-size:      12px;
    font-weight:    500;
    color:          var(--vrp-sub);
    letter-spacing: 0.01em;
    display:        flex;
    align-items:    center;
    gap:            3px;
}

/* Required asterisk */
.vrp-pass-req {
    color:       #ff3b30;
    font-size:   11px;
    line-height: 1;
    margin-top:  1px;
}

/* Inline field error message */
.vrp-pass-field-error {
    display:     none;
    font-size:   11px;
    color:       #ff3b30;
    margin-top:  3px;
    line-height: 1.3;
}

.vrp-pass-field.is-invalid .vrp-pass-field-error { display: block; }

/* Invalid input state */
.vrp-pass-field.is-invalid input {
    box-shadow: 0 0 0 2px rgba(255, 59, 48, 0.35);
    background: #fff8f8;
}

.vrp-pass-field input {
    width:         100%;
    padding:       12px 14px;
    background:    var(--vrp-fill);
    border:        none;
    border-radius: var(--vrp-r-sm);
    font-family:   var(--vrp-font);
    font-size:     15px;
    color:         var(--vrp-ink);
    outline:       none;
    box-sizing:    border-box;
    transition:    background 0.14s, box-shadow 0.14s;
    -webkit-appearance: none;
    appearance:    none;
}

.vrp-pass-field input::placeholder { color: #aeaeb2; }

.vrp-pass-field input:focus {
    background: #eff6ff;
    box-shadow: 0 0 0 2px rgba(0, 117, 242, 0.35);
}

/* ─── Payment Request Button (Apple Pay / Google Pay) ────────────────────────── */
#vrp-pass-pr-button { border-radius: var(--vrp-r-sm); overflow: hidden; }

.vrp-pass-or-divider {
    display:     flex;
    align-items: center;
    gap:         10px;
    margin:      16px 0;
    color:       #aeaeb2;
    font-size:   12px;
    font-weight: 500;
}

.vrp-pass-or-divider::before,
.vrp-pass-or-divider::after {
    content:    '';
    flex:       1;
    height:     1px;
    background: #e5e5ea;
}

/* ─── Card element ────────────────────────────────────────────────────────────── */
.vrp-pass-card-field { margin-bottom: 0; }

.vrp-pass-card-element {
    padding:       12px 14px;
    background:    var(--vrp-fill);
    border:        none;
    border-radius: var(--vrp-r-sm);
    transition:    background 0.14s, box-shadow 0.14s;
}

.vrp-pass-card-element.StripeElement--focus {
    background: #eff6ff;
    box-shadow: 0 0 0 2px rgba(0, 117, 242, 0.35);
}

.vrp-pass-card-element.StripeElement--invalid {
    box-shadow: 0 0 0 2px rgba(255, 59, 48, 0.4);
}

.vrp-pass-card-errors {
    font-size:  12px;
    color:      #ff3b30;
    min-height: 16px;
    margin:     4px 0 0;
}

/* ─── Submit ──────────────────────────────────────────────────────────────────── */
.vrp-pass-submit {
    display:        block;
    width:          100%;
    margin-top:     20px;
    padding:        15px;
    background:     linear-gradient(135deg, var(--vrp-blue) 0%, var(--vrp-blue-lt) 100%);
    color:          #fff;
    border:         none;
    border-radius:  var(--vrp-r-sm);
    font-family:    var(--vrp-font);
    font-size:      15px;
    font-weight:    600;
    letter-spacing: -0.1px;
    cursor:         pointer;
    transition:     opacity 0.16s, transform 0.14s;
    -webkit-appearance: none;
    appearance:     none;
}

.vrp-pass-submit:hover:not(:disabled) {
    opacity:   0.88;
    transform: translateY(-1px);
}

.vrp-pass-submit:active:not(:disabled) { transform: none; }

.vrp-pass-submit:disabled {
    opacity:   0.5;
    cursor:    wait;
    transform: none;
}

/* ─── Error ───────────────────────────────────────────────────────────────────── */
.vrp-pass-error {
    margin-top:    12px;
    padding:       10px 14px;
    background:    #fff2f2;
    border-radius: var(--vrp-r-sm);
    color:         #ff3b30;
    font-size:     13px;
    line-height:   1.4;
}

/* ─── Success ─────────────────────────────────────────────────────────────────── */
#vrp-pass-success {
    text-align: center;
    padding:    20px 8px 8px;
    animation:  vrp-pass-in 0.28s ease;
}

.vrp-pass-success-icon {
    width:           56px;
    height:          56px;
    background:      linear-gradient(135deg, #34c759, #30d158);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin:          0 auto 18px;
    color:           #fff;
}

.vrp-pass-success-title {
    font-size:      22px;
    font-weight:    700;
    letter-spacing: -0.4px;
    margin:         0 0 8px;
}

.vrp-pass-success-sub {
    font-size:   15px;
    color:       var(--vrp-sub);
    line-height: 1.5;
    margin:      0;
}

/* ─── WhatsApp button ─────────────────────────────────────────────────────────── */
.vrp-pass-whatsapp-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    margin-top:      20px;
    padding:         13px 20px;
    background:      #25d366;
    color:           #fff;
    border-radius:   var(--vrp-r-sm);
    font-family:     var(--vrp-font);
    font-size:       15px;
    font-weight:     600;
    text-decoration: none;
    transition:      opacity 0.16s, transform 0.14s;
}

.vrp-pass-whatsapp-btn:hover {
    opacity:   0.88;
    transform: translateY(-1px);
    color:     #fff;
}

/* ─── Mobile ──────────────────────────────────────────────────────────────────── */
@media (max-width: 440px) {
    .vrp-pass-modal       { padding: 26px 20px 22px; border-radius: 18px; }
    .vrp-pass-modal-title { font-size: 20px; }
}