/* Doc 512 İP-2 canonical — Screen 27 payment + Screen 28 payment-success styling.
   RTL day-0 (logical properties: margin-inline-*, padding-inline-*, text-align: start/end).
   Mobile-first with @media (min-width: 900px) desktop expansion. */

/* ═══════════════════════════════════════════════════════════════════════════
   Screen 27 — Payment (Stripe Elements)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Screen 22 canonical parity: `.mz-s22` in screen-22.css has NO max-width —
   card uses wizard-main's `max-width: 848px` (wizard.css L122
   `.mz-wizard-public .mz-wizard-main`). Payment mirrors: no max-width here,
   only sticky bar clearance below. */
.mz-s27 {
    padding-block-end: 200px; /* sticky bar clearance — sticky is fixed at bottom */
}

/* Payment form — üstten 16px boşluk (h1+subtitle ile form arasında hava). */
#mz-s27-payment-form {
    margin-block-start: 32px;
}

/* Fiyat superscript — cent kısmı ($328<sup>.00</sup>) estetik denge:
   fintech "big-integer + tiny-cents" pattern. */
#mz-s27-pay-button-amount sup {
    font-size: 0.62em;
    vertical-align: 0.45em;
    font-weight: 600;
    opacity: 0.9;
    margin-inline-start: 1px;
}

.mz-s27-field {
    margin-block-end: 20px;
}

.mz-s27-field label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin-block-end: 8px;
}

.mz-s27-field input[type="text"] {
    width: 100%;
    padding-inline: 14px;
    padding-block: 12px;
    font-size: 16px;
    border: 1px solid #d5d5d5;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 150ms ease;
}

.mz-s27-field input[type="text"]:focus {
    outline: none;
    border-color: #1a73e8;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
}

.mz-s27-stripe-mount {
    padding-inline: 14px;
    padding-block: 14px;
    border: 1px solid #d5d5d5;
    border-radius: 8px;
    background: #fff;
    min-height: 44px;
}

.mz-s27-stripe-mount.StripeElement--focus,
.mz-s27-stripe-mount:focus-within {
    border-color: #1a73e8;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
}

.mz-s27-card-errors {
    margin-block-start: 8px;
    color: #d32f2f;
    font-size: 13px;
    min-height: 18px;
}

/* Fintech-grade violet gradient CTA — Screen 22 canonical (screen-22.css
   `.mz-s22-sticky-continue` mirror) — tıklamaya cezbeden, brand trust anchor. */
.mz-s27-pay-btn {
    width: 100%;
    padding-inline: 24px;
    padding-block: 16px;
    font-size: 16px;
    font-weight: 700;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.28), 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: background 150ms ease, transform 100ms ease, box-shadow 150ms ease;
}

.mz-s27-pay-btn:hover:not(:disabled),
.mz-s27-pay-btn:focus-visible:not(:disabled) {
    background: linear-gradient(135deg, #6d28d9 0%, #5b21b6 100%);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.32), 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
    outline: none;
}

.mz-s27-pay-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.24);
}

.mz-s27-pay-btn:disabled {
    background: #cbd5e1;
    color: #64748b;
    cursor: not-allowed;
    box-shadow: none;
}

/* Trust badge wrap — Pay Now'un 40px altında, image "Stripe + VISA + Mastercard
   + Amex + PCI-DSS" görsel authority. Wizard payment mirror. */
.mz-s27-trust-badge-wrap {
    margin-block-start: 40px;
    text-align: center;
}

.mz-s27-trust-badge-wrap img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Sticky bar payment-context overrides (Screen 22 sticky HTML reuse).
   Skip + Continue actions removed (no batch submit on payment). Info button
   click → sheet modal (order details view-only).
   ═══════════════════════════════════════════════════════════════════════════ */

.mz-s27-sticky .mz-s22-sticky-actions {
    display: none;
}

/* actions bloğu display:none olunca info tek flex-child kalır; Screen 22
   sticky-inner display:flex default `flex: 0 1 auto` info'yu sola sıkıştırıp
   sağda boşluk bırakırdı. flex:1 → info parent'ı full doldurur. */
.mz-s27-sticky .mz-s22-sticky-info {
    flex: 1;
    width: 100%;
}

/* NOT: Screen 22 sheet ortak stilleri (.mz-s22-sheet-feat*, .mz-s22-sheet-addon*,
   .mz-s22-sheet-dl .row[hidden] guard) screen-22.css'e taşındı — sheet partial
   hem /addons hem /payment sayfasında kullanılıyor, canonical scope screen-22. */

/* ═══════════════════════════════════════════════════════════════════════════
   Screen 28 — Payment Success
   ═══════════════════════════════════════════════════════════════════════════ */

.mz-s28 {
    max-width: 620px;
    margin-inline: auto;
    padding-inline: 32px;
    padding-block: 48px;
    text-align: center;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.mz-s28-icon {
    color: #16a34a;
    margin-block-end: 20px;
    display: inline-flex;
}

.mz-s28-order-card {
    margin-block: 32px;
    padding-inline: 24px;
    padding-block: 20px;
    background: #fafafa;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    text-align: start;
}

.mz-s28-order-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: 10px;
    border-block-end: 1px solid #efefef;
}

.mz-s28-order-row:last-child {
    border-block-end: none;
}

.mz-s28-order-label {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

.mz-s28-order-value {
    font-size: 14px;
    color: #1a1a1a;
    font-weight: 500;
    text-align: end;
}

.mz-s28-order-amount {
    font-size: 18px;
    font-weight: 700;
}

.mz-s28-order-value code {
    background: #fff;
    padding-inline: 8px;
    padding-block: 3px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    /* Order ref uzun (`ord_` + 32 char = 36 char) — mobile 320-390px viewport'ta
       satırı patlatıyordu. 9px + logical wrap (Orhan 2026-08-29). */
    font-size: 9px;
    color: #333;
    overflow-wrap: anywhere;
    word-break: break-all;
    max-inline-size: 100%;
    display: inline-block;
}

/* Payment success expanded summary — screen_22_summary_body partial'ı sayfa
   içine inline (modal wrapper YOK) yerleştirdiğinde spacing için wrapper.
   Modal içinde `.mz-s22-sheet-body { gap: 20px }` var; burada `.mz-s28-summary`
   flex+gap ile section'lar arasına 16px boşluk (Orhan 2026-08-29). */
.mz-s28-summary {
    margin-block: 24px 0;
    text-align: start;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.mz-s28-summary .mz-s22-config,
.mz-s28-summary .mz-s22-sheet-section {
    /* Sheet content sayfa card'ının içinde — modal padding'lerine ihtiyaç yok. */
    margin-inline: 0;
}

.mz-s28-next-steps {
    text-align: start;
    margin-block: 24px 32px;
}

.mz-s28-next-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin-block: 0 12px;
}

.mz-s28-next-list {
    margin: 0;
    padding-inline-start: 20px;
    color: #444;
    font-size: 14px;
    line-height: 1.6;
}

.mz-s28-next-list li {
    margin-block-end: 6px;
}

.mz-s28-cta {
    display: inline-block;
    padding-inline: 32px;
    padding-block: 14px;
    background: #1a1a1a;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    transition: background 150ms ease;
}

.mz-s28-cta:hover {
    background: #333;
    color: #fff;
}

/* Magic-link inbox note — CTA butonu ile arasında 20px hava
   (Orhan 2026-09-20 UI polish). RTL/LTR ortak. */
.mz-s28-email-note {
    margin-block-start: 20px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RTL — logical properties zaten desteklerine ek, override yok gerekli
   (browsers automatically flip margin-inline / padding-inline / text-align:end).
   Additional adjustments if needed for Stripe Elements Arabic locale (Doc 512 §16.2
   — Stripe('...').elements({ locale: 'ar' }) — deferred to full audit pass).
   ═══════════════════════════════════════════════════════════════════════════ */