.mechkai-payment{box-sizing:border-box;max-width:520px;margin:40px auto;padding:32px;border:1px solid #e3e3e3;border-radius:18px;background:#fff;box-shadow:0 12px 32px rgba(0,0,0,.08);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.mechkai-payment *{box-sizing:border-box}.mechkai-payment__eyebrow{margin-bottom:8px;font-size:12px;font-weight:700;letter-spacing:.14em;color:#6b6b6b}.mechkai-payment__title{margin:0;font-size:30px;line-height:1.15}.mechkai-payment__price{margin:12px 0 26px;font-size:24px;font-weight:700}.mechkai-payment__fields{display:grid;gap:14px;margin-bottom:20px}.mechkai-payment__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mechkai-payment label{display:grid;gap:6px;font-size:13px;font-weight:600}.mechkai-payment input{width:100%;min-height:46px;padding:10px 12px;border:1px solid #cfcfcf;border-radius:8px;background:#fff;color:#111;font:inherit}.mechkai-card-container{min-height:90px;margin-bottom:18px}.mechkai-pay-button{width:100%;min-height:54px;border:0;border-radius:10px;background:#111;color:#fff;font-size:17px;font-weight:700;cursor:pointer}.mechkai-pay-button:disabled{cursor:default;opacity:.65}.mechkai-payment-status{min-height:24px;margin-top:16px;font-size:14px;line-height:1.45}.mechkai-payment-status.is-error{color:#a40000}.mechkai-payment-status.is-success{color:#176b2c;font-weight:600}.mechkai-payment-status.is-working{color:#555}.mechkai-payment__sandbox{margin:18px 0 0;color:#777;font-size:12px;text-align:center}@media(max-width:560px){.mechkai-payment{margin:18px auto;padding:22px;border-radius:14px}.mechkai-payment__row{grid-template-columns:1fr}}


/* ============================================================
   APPLE PAY
   ============================================================ */

.mechkai-apple-pay-wrap {
    width: 100%;
    margin: 0 0 18px;
}

.mechkai-apple-pay-button {
    display: block;
    width: 100%;
    height: 54px;
    border: 0;
    border-radius: 10px;
    cursor: pointer;

    -webkit-appearance: -apple-pay-button;
    -apple-pay-button-type: buy;
    -apple-pay-button-style: black;
}

.mechkai-apple-pay-button:disabled {
    cursor: default;
    opacity: 0.65;
}

.mechkai-payment__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 20px;
    color: #777;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.mechkai-payment__divider::before,
.mechkai-payment__divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: #dedede;
}

.mechkai-payment__divider[hidden],
.mechkai-apple-pay-wrap[hidden] {
    display: none !important;
}


/* ============================================================
   COLLAPSED CARD PAYMENT - VERSION 0.2.1
   ============================================================ */

.mechkai-show-card-button {
    width: 100%;
    min-height: 54px;
    border: 1px solid #111;
    border-radius: 10px;
    background: #fff;
    color: #111;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
}

.mechkai-show-card-button:disabled {
    cursor: default;
    opacity: .65;
}

.mechkai-card-panel {
    margin-top: 18px;
}

.mechkai-card-panel[hidden],
.mechkai-show-card-button[hidden] {
    display: none !important;
}


/* ============================================================
   DEDICATED KIOSK PAGE - VERSION 0.2.2
   ============================================================ */

html,
body.mechkai-vending-kiosk-body {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100%;
    background: #fff !important;
}

body.mechkai-vending-kiosk-body {
    min-height: 100vh;
    min-height: 100dvh;
}

.mechkai-vending-kiosk-main {
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding:
        max(20px, env(safe-area-inset-top))
        max(16px, env(safe-area-inset-right))
        max(24px, env(safe-area-inset-bottom))
        max(16px, env(safe-area-inset-left));
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: #fff;
}

.mechkai-vending-kiosk-main > * {
    width: 100%;
}

body.mechkai-vending-kiosk-body header,
body.mechkai-vending-kiosk-body footer,
body.mechkai-vending-kiosk-body nav,
body.mechkai-vending-kiosk-body aside,
body.mechkai-vending-kiosk-body .site-header,
body.mechkai-vending-kiosk-body .site-footer,
body.mechkai-vending-kiosk-body .site-navigation,
body.mechkai-vending-kiosk-body .main-navigation,
body.mechkai-vending-kiosk-body .entry-title,
body.mechkai-vending-kiosk-body .page-title,
body.mechkai-vending-kiosk-body #masthead,
body.mechkai-vending-kiosk-body #colophon {
    display: none !important;
}

/*
 * The kiosk template already supplies outer spacing, so remove the
 * normal shortcode card's large page margin.
 */
body.mechkai-vending-kiosk-body .mechkai-payment {
    margin-top: 0;
    margin-bottom: 0;
}

@media (max-width: 560px) {
    .mechkai-vending-kiosk-main {
        padding:
            max(12px, env(safe-area-inset-top))
            max(12px, env(safe-area-inset-right))
            max(18px, env(safe-area-inset-bottom))
            max(12px, env(safe-area-inset-left));
    }

    body.mechkai-vending-kiosk-body .mechkai-payment {
        margin: 0 auto;
    }
}


/* ============================================================
   SESSION-GATED PAYMENT - VERSION 0.3.0
   ============================================================ */

.mechkai-session-message {
    text-align: center;
}

.mechkai-session-message__text {
    max-width: 420px;
    margin: 18px auto 0;
    font-size: 17px;
    line-height: 1.5;
    color: #333;
}


/* ============================================================
   PHONE SESSION STATE / RECEIPT - VERSION 0.5.2
   ============================================================ */

.mechkai-payment--status-only .mechkai-payment-tools,
.mechkai-payment--status-only .mechkai-payment__price,
.mechkai-payment--status-only .mechkai-payment__sandbox {
    display: none !important;
}

.mechkai-session-state-icon {
    width: 72px;
    height: 72px;
    margin: 6px auto 20px;
    border: 2px solid currentColor;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 38px;
    line-height: 1;
    font-weight: 700;
}

.mechkai-session-live--success .mechkai-session-state-icon {
    color: #176b2c;
}

.mechkai-session-live--error .mechkai-session-state-icon {
    color: #a40000;
}

.mechkai-session-live--working .mechkai-session-state-icon {
    color: #555;
}

.mechkai-session-reference {
    max-width: 420px;
    margin: 20px auto 0;
    padding-top: 16px;
    border-top: 1px solid #e8e8e8;
    color: #555;
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.mechkai-session-countdown {
    margin: 14px auto 0;
    color: #777;
    font-size: 12px;
    line-height: 1.4;
}
