/* Professional Card Payment Form — full RTL/LTR support */
.pcf-wrapper {
    --pcf-card-gradient: linear-gradient(135deg, #1a1f36 0%, #3d4f7c 50%, #5a6b8a 100%);
    --pcf-error: #df1b41;
    --pcf-success: #30b566;
    width: 100%;
    max-width: none;
    margin: 0;
    direction: inherit;
    text-align: start;
}

.pcf-amount-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: 14px;
    padding-inline: 24px;
    background: #f7f5f0;
    border: 1px solid #edebe7;
    border-radius: 30px;
    margin-bottom: 24px;
}

.pcf-amount-label {
    font-size: 16px;
    color: var(--dark-200, #697386);
    font-weight: 500;
}

.pcf-amount-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--dark-300, #252525);
    direction: ltr;
    unicode-bidi: isolate;
}

/* Two-column layout */
.pcf-layout {
    display: contents;
}

.pcf-checkout-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 32px;
    align-items: start;
    direction: inherit;
}

.pcf-checkout-form > .pcf-wrapper {
    display: contents;
}

.payment-commission-summary--card {
    grid-column: 1 / -1;
    margin-bottom: 0;
    padding: 16px 20px;
    background: #f7f5f0;
    border: 1px solid #edebe7;
    border-radius: 16px;
}

.pcf-amount-bar {
    grid-column: 1 / -1;
    grid-row: 1;
}

/* LTR: card left, form right */
.pcf-layout__card {
    grid-column: 1;
    grid-row: 2;
}

.pcf-layout__form {
    grid-column: 2;
    grid-row: 2;
}

.pcf-checkout-footer {
    grid-column: 2;
    grid-row: 3;
}

.pcf-checkout-summary-block {
    grid-column: 1 / -1;
    grid-row: 1;
}

.pcf-checkout-form--with-summary .pcf-amount-bar {
    grid-row: 2;
}

.pcf-checkout-form--with-summary .pcf-layout__card,
.pcf-checkout-form--with-summary .pcf-layout__form {
    grid-row: 3;
}

.pcf-checkout-form--with-summary .pcf-checkout-footer {
    grid-row: 4;
}

.pcf-checkout-form--with-commission .payment-commission-summary--card {
    grid-row: 1;
}

.pcf-checkout-form--with-commission .pcf-amount-bar {
    grid-row: 2;
}

.pcf-checkout-form--with-commission .pcf-layout__card,
.pcf-checkout-form--with-commission .pcf-layout__form {
    grid-row: 3;
}

.pcf-checkout-form--with-commission .pcf-checkout-footer {
    grid-row: 4;
}

.pcf-checkout-form--with-summary.pcf-checkout-form--with-commission .payment-commission-summary--card {
    display: none;
}

.payment-commission-summary__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--dark-300, #252525);
    margin-bottom: 12px;
}

.payment-commission-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--dark-200, #697386);
    margin-bottom: 8px;
}

.payment-commission-summary__row strong {
    color: var(--dark-300, #252525);
    font-weight: 600;
    direction: ltr;
    unicode-bidi: isolate;
}

.payment-commission-summary__row--total {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid #edebe7;
    font-weight: 600;
    color: var(--dark-300, #252525);
}

.payment-commission-summary__row--total strong {
    font-weight: 700;
}

.payment-commission-summary__notice {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--dark-200, #697386);
}

/* RTL: form right (start), card left (end) */
.payment-card-modal[dir="rtl"] .pcf-layout__card,
html[dir="rtl"] .payment-card-modal .pcf-layout__card,
.lang-rtl .payment-card-modal .pcf-layout__card {
    grid-column: 2;
}

.payment-card-modal[dir="rtl"] .pcf-layout__form,
html[dir="rtl"] .payment-card-modal .pcf-layout__form,
.lang-rtl .payment-card-modal .pcf-layout__form {
    grid-column: 1;
}

.payment-card-modal[dir="rtl"] .pcf-checkout-footer,
html[dir="rtl"] .payment-card-modal .pcf-checkout-footer,
.lang-rtl .payment-card-modal .pcf-checkout-footer {
    grid-column: 1;
}

.pcf-card-panel {
    height: 100%;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-block: 32px;
    padding-inline: 24px;
    background: #f7f5f0;
    border-radius: 16px;
    border: 1px solid #edebe7;
}

/* 3D Card Preview — always LTR via dir="ltr" on scene */
.pcf-card-scene {
    perspective: 1000px;
    width: 100%;
    max-width: 340px;
    margin-bottom: 20px;
    direction: ltr;
}

.pcf-card {
    position: relative;
    width: 100%;
    height: 210px;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.pcf-card.pcf-flipped {
    transform: rotateY(180deg);
}

.pcf-card-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 16px;
    padding: 22px;
    background: var(--pcf-card-gradient);
    box-shadow: 0 12px 40px rgba(26, 31, 54, 0.22);
    color: #fff;
    overflow: hidden;
    text-align: left;
}

.pcf-card-face::before {
    content: '';
    position: absolute;
    top: -50%;
    inset-inline-end: -30%;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
}

.pcf-card-back {
    transform: rotateY(180deg);
}

.pcf-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.pcf-chip {
    width: 42px;
    height: 30px;
    background: linear-gradient(135deg, #d4af37 0%, #f5e6a3 50%, #c9a227 100%);
    border-radius: 6px;
    position: relative;
    flex-shrink: 0;
}

.pcf-chip::after {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

.pcf-brand {
    width: 52px;
    height: 32px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center right;
    opacity: 0.9;
    flex-shrink: 0;
}

.pcf-brand--visa {
    background-image: url('../img/cards/visa.svg');
}

.pcf-brand--mastercard {
    background-image: url('../img/cards/mastercard.svg');
}

.pcf-brand--unknown {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

.pcf-card-number {
    font-family: 'Courier New', Courier, monospace;
    font-size: 20px;
    letter-spacing: 2.5px;
    margin-bottom: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: ltr;
    text-align: left;
    unicode-bidi: isolate;
}

.pcf-card-bottom {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.pcf-card-label {
    display: block;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7;
    margin-bottom: 4px;
}

.pcf-card-value {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
    display: block;
}

.pcf-card-expiry .pcf-card-value {
    max-width: 60px;
}

.pcf-magnetic-strip {
    height: 40px;
    background: #1a1f36;
    margin-block: 20px 16px;
    margin-inline: -22px;
}

.pcf-signature-strip {
    background: #fff;
    height: 34px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-inline: 12px;
    gap: 8px;
}

.pcf-cvv-label {
    font-size: 10px;
    color: #697386;
    text-transform: uppercase;
}

.pcf-cvv-value {
    font-family: 'Courier New', Courier, monospace;
    font-size: 15px;
    color: #252525;
    letter-spacing: 2px;
    direction: ltr;
}

.pcf-accepted-brands {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    opacity: 0.9;
    direction: ltr;
}

/* Form fields — match site login form identity */
.pcf-layout__form {
    direction: inherit;
    text-align: start;
}

.pcf-layout__form .form-container {
    direction: inherit;
}

.pcf-layout__form .form-input {
    text-align: start;
}

.pcf-layout__form .form-input .form-label {
    font-size: 18px;
    margin-bottom: 10px;
    color: var(--dark-300, #252525);
    text-align: start;
    display: block;
}

.pcf-layout__form .form-input .form-control.pcf-field-input {
    border-radius: 50px;
    border: 1px solid #edebe7;
    padding-block: 16px;
    padding-inline: 30px;
    height: 56px;
    font-size: 16px;
    color: var(--dark-300, #252525);
    transition: border-color 0.2s, box-shadow 0.2s;
    text-align: start;
}

.pcf-layout__form .form-input .form-control.pcf-field-input[dir="ltr"] {
    text-align: left;
}

.pcf-layout__form .form-input .form-control.pcf-field-input::placeholder {
    color: #b1b1b1;
}

.pcf-layout__form .form-input .form-control.pcf-field-input:focus {
    border-color: var(--lime-300, #0B4F8A);
    box-shadow: 0 0 0 3px rgba(0, 108, 168, 0.12);
}

.pcf-layout__form .form-input .form-control.pcf-field-input.pcf-valid {
    border-color: var(--pcf-success);
}

.pcf-layout__form .form-input .form-control.pcf-field-input.pcf-invalid {
    border-color: var(--pcf-error);
    box-shadow: 0 0 0 3px rgba(223, 27, 65, 0.1);
}

.pcf-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    direction: inherit;
}

.pcf-error {
    display: block;
    font-size: 13px;
    color: var(--pcf-error);
    margin-top: 6px;
    min-height: 18px;
    padding-inline-start: 8px;
    text-align: start;
}

.pcf-secure-badge {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 16px;
    font-size: 13px;
    color: var(--dark-200, #697386);
    text-align: start;
}

.pcf-secure-badge i {
    color: var(--lime-300, #0B4F8A);
    flex-shrink: 0;
}

/* Modal shell */
.payment-card-modal .modal-dialog {
    max-width: 860px;
}

.payment-card-modal .modal-content {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(26, 31, 54, 0.18);
    direction: inherit;
    text-align: start;
}

.payment-card-modal .modal-body {
    padding: 0;
    direction: inherit;
}

.payment-card-modal__header {
    padding-block: 28px 0;
    padding-inline: 32px;
    text-align: start;
}

.payment-card-modal__header h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--dark-300, #252525);
    margin-bottom: 6px;
}

.payment-card-modal__header p {
    font-size: 15px;
    color: var(--dark-200, #697386);
    margin: 0;
}

.payment-card-modal__body {
    padding-block: 24px 32px;
    padding-inline: 32px;
    direction: inherit;
}

.payment-card-modal__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    justify-content: flex-start;
    margin-top: 20px;
    padding-top: 0;
    border-top: none;
    direction: inherit;
}

.payment-card-modal__actions .payment-card-modal__btn-cancel {
    margin-inline-start: auto;
}

.payment-card-modal__actions .w-btn-secondary-sm,
.payment-card-modal__actions .w-btn-gray-sm {
    min-width: 140px;
    position: relative;
}

.payment-card-modal__actions .w-btn-secondary-sm.pcf-loading {
    pointer-events: none;
    opacity: 0.8;
}

.payment-card-modal__actions .w-btn-secondary-sm.pcf-loading::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pcf-spin 0.7s linear infinite;
    inset-inline-end: 16px;
    top: 50%;
    margin-top: -9px;
}

@keyframes pcf-spin {
    to { transform: rotate(360deg); }
}

.stripe_error .alert-danger {
    border-radius: 30px;
    font-size: 14px;
    margin-top: 12px;
    text-align: start;
}

/* Override site-wide RTL text flips inside payment modal */
.payment-card-modal[dir="rtl"] .text-start,
html[dir="rtl"] .payment-card-modal .text-start,
.lang-rtl .payment-card-modal .text-start {
    text-align: start !important;
}

@media (max-width: 767.98px) {
    .pcf-checkout-form {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .pcf-layout__card,
    .pcf-layout__form,
    .pcf-checkout-footer,
    .payment-card-modal[dir="rtl"] .pcf-layout__card,
    .payment-card-modal[dir="rtl"] .pcf-layout__form,
    .payment-card-modal[dir="rtl"] .pcf-checkout-footer,
    html[dir="rtl"] .payment-card-modal .pcf-layout__card,
    html[dir="rtl"] .payment-card-modal .pcf-layout__form,
    html[dir="rtl"] .payment-card-modal .pcf-checkout-footer,
    .lang-rtl .payment-card-modal .pcf-layout__card,
    .lang-rtl .payment-card-modal .pcf-layout__form,
    .lang-rtl .payment-card-modal .pcf-checkout-footer {
        grid-column: 1;
        grid-row: auto;
    }

    .pcf-amount-bar {
        grid-row: auto;
    }

    .pcf-card-panel {
        min-height: auto;
        padding-block: 24px;
        padding-inline: 16px;
    }

    .pcf-card {
        height: 190px;
    }

    .pcf-card-number {
        font-size: 17px;
        letter-spacing: 2px;
    }

    .pcf-field-row {
        grid-template-columns: 1fr;
    }

    .payment-card-modal__body {
        padding-block: 20px 24px;
        padding-inline: 16px;
    }

    .payment-card-modal__header {
        padding-block: 24px 0;
        padding-inline: 16px;
    }
}