/*
|--------------------------------------------------------------------------
| Entête paiement
|--------------------------------------------------------------------------
*/

.mobile-payment-header {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: flex-start;
    gap: 14px;

    margin-bottom: 22px;
}

.mobile-back-button {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    border: 1px solid var(--mobile-border);
    border-radius: 15px;

    background: var(--mobile-surface);

    box-shadow: var(--mobile-shadow-sm);

    color: var(--mobile-primary);
    font-size: 1.15rem;
}

.mobile-payment-header-content {
    min-width: 0;
}

.mobile-payment-header h1 {
    margin: 0;

    color: var(--mobile-text);
    font-size: 1.65rem;
    font-weight: 850;
    line-height: 1.15;

    letter-spacing: -0.035em;
}

.mobile-payment-header p {
    margin: 7px 0 0;

    color: var(--mobile-text-soft);
    font-size: 0.86rem;
    line-height: 1.55;
}

/*
|--------------------------------------------------------------------------
| Choix du paiement
|--------------------------------------------------------------------------
*/

.mobile-payment-options {
    display: grid;
    gap: 16px;
}

.mobile-payment-option {
    position: relative;

    min-height: 210px;

    padding: 23px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;

    overflow: hidden;

    border: 1px solid var(--mobile-border);
    border-radius: var(--mobile-radius-lg);

    background: var(--mobile-surface);

    box-shadow: var(--mobile-shadow-sm);

    transition:
        transform var(--mobile-transition),
        box-shadow var(--mobile-transition);
}

.mobile-payment-option:active {
    transform: scale(0.985);
}

.mobile-payment-option:hover {
    box-shadow: var(--mobile-shadow);
}

.mobile-payment-option-primary {
    border-color: transparent;

    background:
        linear-gradient(
            145deg,
            var(--mobile-primary),
            #0a685c
        );

    box-shadow:
        0 20px 42px rgba(6, 63, 56, 0.22);

    color: #ffffff;
}

.mobile-payment-option-primary::after {
    position: absolute;
    right: -45px;
    bottom: -55px;

    width: 170px;
    height: 170px;

    border: 30px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;

    content: "";
}

.mobile-payment-option-icon {
    position: relative;
    z-index: 2;

    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    border-radius: 19px;

    background: var(--mobile-primary-light);

    color: var(--mobile-primary);
    font-size: 1.55rem;
}

.mobile-payment-option-primary .mobile-payment-option-icon {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.mobile-payment-option-content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.mobile-payment-option-badge {
    margin-bottom: 8px;
    padding: 5px 9px;

    border-radius: 999px;

    background: var(--mobile-primary-light);

    color: var(--mobile-primary);
    font-size: 0.67rem;
    font-weight: 800;

    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.mobile-payment-option-primary .mobile-payment-option-badge {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
}

.mobile-payment-option-content strong {
    font-size: 1.25rem;
    font-weight: 850;
    line-height: 1.2;
}

.mobile-payment-option-content small {
    margin-top: 7px;

    color: var(--mobile-text-soft);
    font-size: 0.81rem;
    line-height: 1.55;
}

.mobile-payment-option-primary .mobile-payment-option-content small {
    color: rgba(255, 255, 255, 0.78);
}

.mobile-payment-option-action {
    margin-top: 17px;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--mobile-primary);
    font-size: 0.8rem;
    font-weight: 800;
}

.mobile-payment-option-primary .mobile-payment-option-action {
    color: #ffffff;
}

/*
|--------------------------------------------------------------------------
| Sécurité et aide
|--------------------------------------------------------------------------
*/

.mobile-payment-security,
.mobile-payment-help {
    margin-top: 18px;
    padding: 17px;

    display: flex;
    align-items: center;
    gap: 13px;

    border: 1px solid var(--mobile-border);
    border-radius: var(--mobile-radius);

    background: var(--mobile-surface);

    box-shadow: var(--mobile-shadow-sm);
}

.mobile-payment-security-icon {
    width: 47px;
    height: 47px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    border-radius: 15px;

    background: var(--mobile-primary-light);

    color: var(--mobile-primary);
    font-size: 1.25rem;
}

.mobile-payment-security strong,
.mobile-payment-help strong {
    display: block;

    color: var(--mobile-text);
    font-size: 0.85rem;
    font-weight: 800;
}

.mobile-payment-security p,
.mobile-payment-help p {
    margin: 4px 0 0;

    color: var(--mobile-text-soft);
    font-size: 0.73rem;
    line-height: 1.45;
}

.mobile-payment-help > i {
    color: var(--mobile-accent);
    font-size: 1.4rem;
}

.mobile-payment-help > div {
    min-width: 0;
    flex: 1;
}

.mobile-payment-help > a {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    color: var(--mobile-primary);
}

/*
|--------------------------------------------------------------------------
| Carte formulaire
|--------------------------------------------------------------------------
*/

.mobile-payment-card {
    padding: 20px;

    border: 1px solid var(--mobile-border);
    border-radius: var(--mobile-radius-lg);

    background: var(--mobile-surface);

    box-shadow: var(--mobile-shadow-sm);
}

.mobile-payment-card-heading {
    display: flex;
    align-items: center;
    gap: 14px;

    padding-bottom: 19px;

    border-bottom: 1px solid var(--mobile-border);
}

.mobile-payment-card-icon {
    width: 53px;
    height: 53px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    border-radius: 17px;

    background: var(--mobile-primary-light);

    color: var(--mobile-primary);
    font-size: 1.4rem;
}

.mobile-payment-card-icon-donation {
    background: #fff0f1;
    color: #bf4051;
}

.mobile-payment-card-heading h2 {
    margin: 0;

    color: var(--mobile-text);
    font-size: 1.08rem;
    font-weight: 830;
}

.mobile-payment-card-heading p {
    margin: 4px 0 0;

    color: var(--mobile-text-soft);
    font-size: 0.75rem;
    line-height: 1.45;
}

/*
|--------------------------------------------------------------------------
| Formulaires
|--------------------------------------------------------------------------
*/

.mobile-payment-form {
    margin-top: 21px;
}

.mobile-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-form-group label {
    color: var(--mobile-text);
    font-size: 0.79rem;
    font-weight: 780;
}

.mobile-input-wrap {
    min-height: 55px;

    padding: 0 15px;

    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 10px;

    border: 1px solid var(--mobile-border);
    border-radius: 17px;

    background: var(--mobile-surface-soft);

    transition:
        border-color var(--mobile-transition),
        box-shadow var(--mobile-transition);
}

.mobile-input-wrap:focus-within {
    border-color: var(--mobile-primary);

    box-shadow:
        0 0 0 4px rgba(6, 63, 56, 0.08);
}

.mobile-input-wrap > i {
    color: var(--mobile-primary);
    font-size: 1rem;
}

.mobile-input-wrap input {
    width: 100%;
    min-width: 0;
    height: 53px;

    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;

    color: var(--mobile-text);
    font-size: 0.92rem;
}

.mobile-input-wrap input::placeholder {
    color: #9aa7a3;
}

.mobile-form-error {
    color: var(--mobile-danger);
    font-size: 0.74rem;
    font-weight: 650;
}

.mobile-payment-submit {
    width: 100%;
    min-height: 55px;

    margin-top: 20px;
    padding: 0 18px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    border: 0;
    border-radius: 17px;

    background: var(--mobile-primary);

    box-shadow:
        0 12px 26px rgba(6, 63, 56, 0.2);

    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 820;

    cursor: pointer;
}

.mobile-payment-submit:disabled {
    box-shadow: none;

    opacity: 0.48;
    cursor: not-allowed;
}

/*
|--------------------------------------------------------------------------
| Montants
|--------------------------------------------------------------------------
*/

.mobile-amount-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.mobile-amount-button {
    min-height: 58px;

    border: 1px solid var(--mobile-border);
    border-radius: 17px;

    background: var(--mobile-surface-soft);

    color: var(--mobile-text);
    font-size: 1rem;
    font-weight: 850;

    cursor: pointer;

    transition:
        background var(--mobile-transition),
        color var(--mobile-transition),
        border-color var(--mobile-transition),
        transform var(--mobile-transition);
}

.mobile-amount-button:active {
    transform: scale(0.97);
}

.mobile-amount-button.active {
    border-color: var(--mobile-primary);
    background: var(--mobile-primary);
    color: #ffffff;
}

.mobile-form-separator {
    margin: 20px 0;

    display: flex;
    align-items: center;
    gap: 13px;

    color: var(--mobile-text-soft);
    font-size: 0.72rem;
    font-weight: 700;

    text-transform: uppercase;
}

.mobile-form-separator::before,
.mobile-form-separator::after {
    height: 1px;
    flex: 1;

    background: var(--mobile-border);

    content: "";
}

.mobile-amount-input-wrap {
    grid-template-columns: 22px minmax(0, 1fr) 20px;
}

.mobile-amount-input-wrap > span {
    color: var(--mobile-text-soft);
    font-weight: 800;
}

.mobile-selected-amount {
    margin-top: 17px;
    padding: 14px 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    border: 1px solid rgba(6, 63, 56, 0.12);
    border-radius: 16px;

    background: var(--mobile-primary-light);

    color: var(--mobile-primary);
}

.mobile-selected-amount span {
    font-size: 0.77rem;
    font-weight: 720;
}

.mobile-selected-amount strong {
    font-size: 1.05rem;
    font-weight: 850;
}

/*
|--------------------------------------------------------------------------
| Notice
|--------------------------------------------------------------------------
*/

.mobile-payment-notice {
    margin-top: 18px;
    padding: 13px;

    display: flex;
    align-items: flex-start;
    gap: 9px;

    border-radius: 14px;

    background: #fff8e8;

    color: #8e650f;
}

.mobile-payment-notice i {
    margin-top: 1px;
}

.mobile-payment-notice p {
    margin: 0;

    font-size: 0.72rem;
    line-height: 1.5;
}

/*
|--------------------------------------------------------------------------
| Grand écran
|--------------------------------------------------------------------------
*/

@media (min-width: 620px) {
    .mobile-payment-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mobile-payment-option {
        min-height: 245px;
    }

    .mobile-payment-card {
        padding: 26px;
    }

    .mobile-amount-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/*
|--------------------------------------------------------------------------
| Confidentialité
|--------------------------------------------------------------------------
*/

.mobile-payment-privacy {
    margin-top: 17px;
    padding: 12px 13px;

    display: flex;
    align-items: flex-start;
    gap: 9px;

    border-radius: 14px;

    background: var(--mobile-primary-light);

    color: var(--mobile-primary);
}

.mobile-payment-privacy i {
    margin-top: 1px;
}

.mobile-payment-privacy p {
    margin: 0;

    font-size: 0.72rem;
    line-height: 1.5;
}

/*
|--------------------------------------------------------------------------
| Chargement
|--------------------------------------------------------------------------
*/

.mobile-button-spinner {
    width: 18px;
    height: 18px;

    display: inline-block;

    border: 2px solid rgba(255, 255, 255, 0.38);
    border-top-color: #ffffff;
    border-radius: 50%;

    animation: mobile-button-spin 0.7s linear infinite;
}

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

/*
|--------------------------------------------------------------------------
| Résultat famille
|--------------------------------------------------------------------------
*/

.mobile-family-panel {
    display: grid;
    gap: 18px;
}

.mobile-family-card {
    overflow: hidden;

    border: 1px solid rgba(6, 63, 56, 0.15);
    border-radius: var(--mobile-radius-lg);

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #edf8f5
        );

    box-shadow: var(--mobile-shadow);
}

.mobile-family-identity {
    padding: 20px;

    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 14px;
}

.mobile-family-avatar {
    width: 56px;
    height: 56px;

    display: grid;
    place-items: center;

    border-radius: 18px;

    background: var(--mobile-primary);

    color: #ffffff;
    font-size: 1.5rem;
}

.mobile-family-name {
    min-width: 0;
}

.mobile-family-name h2 {
    margin: 0;

    overflow: hidden;

    color: var(--mobile-text);
    font-size: 1.15rem;
    font-weight: 850;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-family-name p {
    margin: 4px 0 0;

    overflow: hidden;

    color: var(--mobile-text-soft);
    font-size: 0.77rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-family-check {
    color: var(--mobile-success);
    font-size: 1.4rem;
}

.mobile-family-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    border-top: 1px solid var(--mobile-border);
}

.mobile-family-stat {
    min-height: 90px;

    padding: 15px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    border-right: 1px solid var(--mobile-border);
    border-bottom: 1px solid var(--mobile-border);
}

.mobile-family-stat:nth-child(2n) {
    border-right: 0;
}

.mobile-family-stat:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.mobile-family-stat span {
    color: var(--mobile-text-soft);
    font-size: 0.69rem;
    font-weight: 700;
}

.mobile-family-stat strong {
    margin-top: 5px;

    color: var(--mobile-text);
    font-size: 1rem;
    font-weight: 850;
}

.mobile-family-stat-highlight {
    background: var(--mobile-primary);
}

.mobile-family-stat-highlight span {
    color: rgba(255, 255, 255, 0.72);
}

.mobile-family-stat-highlight strong {
    color: #ffffff;
}

/*
|--------------------------------------------------------------------------
| Choix cotisation
|--------------------------------------------------------------------------
*/

.mobile-contribution-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.mobile-contribution-option {
    min-height: 82px;

    padding: 12px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;

    border: 1px solid var(--mobile-border);
    border-radius: 17px;

    background: var(--mobile-surface-soft);

    color: var(--mobile-text);

    cursor: pointer;
}

.mobile-contribution-option span {
    font-size: 0.73rem;
    font-weight: 700;
}

.mobile-contribution-option strong {
    color: var(--mobile-primary);
    font-size: 1rem;
    font-weight: 850;
}

.mobile-contribution-option.active {
    border-color: var(--mobile-primary);
    background: var(--mobile-primary);
    color: #ffffff;
}

.mobile-contribution-option.active strong {
    color: #ffffff;
}

.mobile-contribution-option:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/*
|--------------------------------------------------------------------------
| Historique
|--------------------------------------------------------------------------
*/

.mobile-payment-history {
    margin-top: 18px;

    display: grid;
}

.mobile-payment-history-item {
    min-height: 67px;

    padding: 11px 2px;

    display: grid;
    grid-template-columns: 43px minmax(0, 1fr) 26px;
    align-items: center;
    gap: 11px;

    border-bottom: 1px solid var(--mobile-border);
}

.mobile-payment-history-item:last-child {
    border-bottom: 0;
}

.mobile-payment-history-icon {
    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    border-radius: 14px;

    background: var(--mobile-primary-light);

    color: var(--mobile-primary);
}

.mobile-payment-history-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.mobile-payment-history-content strong {
    color: var(--mobile-text);
    font-size: 0.89rem;
    font-weight: 820;
}

.mobile-payment-history-content small {
    margin-top: 3px;

    color: var(--mobile-text-soft);
    font-size: 0.71rem;
}

.mobile-payment-history-check {
    color: var(--mobile-success);
}

.mobile-empty-state {
    padding: 28px 16px 8px;

    color: var(--mobile-text-soft);

    text-align: center;
}

.mobile-empty-state i {
    font-size: 1.8rem;
}

.mobile-empty-state p {
    margin: 8px 0 0;

    font-size: 0.78rem;
}

/*
|--------------------------------------------------------------------------
| Cotisation soldée
|--------------------------------------------------------------------------
*/

.mobile-contribution-paid {
    padding: 19px;

    display: flex;
    align-items: center;
    gap: 13px;

    border: 1px solid rgba(22, 120, 76, 0.18);
    border-radius: var(--mobile-radius);

    background: #edf9f3;

    color: var(--mobile-success);
}

.mobile-contribution-paid > span {
    font-size: 1.7rem;
}

.mobile-contribution-paid strong {
    display: block;

    font-size: 0.92rem;
    font-weight: 850;
}

.mobile-contribution-paid p {
    margin: 4px 0 0;

    font-size: 0.75rem;
}

/*
|--------------------------------------------------------------------------
| Bouton secondaire
|--------------------------------------------------------------------------
*/

.mobile-secondary-button {
    width: 100%;
    min-height: 52px;

    padding: 0 18px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border: 1px solid var(--mobile-border);
    border-radius: 17px;

    background: var(--mobile-surface);

    color: var(--mobile-primary);
    font-size: 0.83rem;
    font-weight: 800;

    cursor: pointer;
}

@media (min-width: 620px) {
    .mobile-family-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .mobile-family-stat {
        border-right: 1px solid var(--mobile-border);
        border-bottom: 0;
    }

    .mobile-family-stat:nth-child(2n) {
        border-right: 1px solid var(--mobile-border);
    }

    .mobile-family-stat:last-child {
        border-right: 0;
    }

    .mobile-contribution-options {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/*
|--------------------------------------------------------------------------
| Statut du paiement
|--------------------------------------------------------------------------
*/

.mobile-payment-status {
    min-height: 65vh;

    padding: 38px 22px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--mobile-border);
    border-radius: var(--mobile-radius-lg);

    background: var(--mobile-surface);

    box-shadow: var(--mobile-shadow);

    text-align: center;
}

.mobile-payment-status-icon {
    width: 88px;
    height: 88px;

    margin-bottom: 22px;

    display: grid;
    place-items: center;

    border-radius: 28px;

    font-size: 2.5rem;
}

.mobile-payment-status-success .mobile-payment-status-icon {
    background: #edf9f3;
    color: var(--mobile-success);
}

.mobile-payment-status-warning .mobile-payment-status-icon {
    background: #fff8e9;
    color: var(--mobile-warning);
}

.mobile-payment-status-danger .mobile-payment-status-icon {
    background: #fff0f0;
    color: var(--mobile-danger);
}

.mobile-payment-status h1 {
    margin: 0;

    color: var(--mobile-text);
    font-size: 1.7rem;
    font-weight: 850;
    line-height: 1.2;
}

.mobile-payment-status > p {
    max-width: 420px;

    margin: 13px 0 0;

    color: var(--mobile-text-soft);
    font-size: 0.88rem;
    line-height: 1.6;
}

.mobile-payment-status-summary {
    width: 100%;

    margin-top: 24px;
    padding: 5px 17px;

    border-radius: 17px;

    background: var(--mobile-surface-soft);
}

.mobile-payment-status-row {
    min-height: 55px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    border-bottom: 1px solid var(--mobile-border);
}

.mobile-payment-status-row:last-child {
    border-bottom: 0;
}

.mobile-payment-status-row span {
    color: var(--mobile-text-soft);
    font-size: 0.78rem;
    font-weight: 700;
}

.mobile-payment-status-row strong {
    color: var(--mobile-primary);
    font-size: 0.92rem;
    font-weight: 850;

    text-align: right;
}

[dir="rtl"] .mobile-payment-status-row strong {
    text-align: left;
}

.mobile-payment-status-actions {
    width: 100%;

    margin-top: 25px;

    display: grid;
    gap: 11px;
}

.mobile-payment-status-actions .mobile-primary-button,
.mobile-payment-status-actions .mobile-secondary-button {
    width: 100%;
    min-height: 54px;
}
/*
|--------------------------------------------------------------------------
| Formulaire don
|--------------------------------------------------------------------------
*/

.mobile-donation-divider {
    height: 1px;

    margin: 26px 0;

    background: var(--mobile-border);
}

.mobile-payment-card-subheading {
    margin-bottom: 19px;

    display: flex;
    align-items: center;
    gap: 13px;
}

.mobile-payment-card-subheading h2 {
    margin: 0;

    color: var(--mobile-text);
    font-size: 1.05rem;
    font-weight: 830;
}

.mobile-payment-card-subheading p {
    margin: 4px 0 0;

    color: var(--mobile-text-soft);
    font-size: 0.75rem;
    line-height: 1.45;
}

.mobile-form-grid {
    display: grid;
    gap: 16px;
}

.mobile-form-group-spaced {
    margin-top: 16px;
}

.mobile-form-help {
    color: var(--mobile-text-soft);
    font-size: 0.7rem;
    line-height: 1.45;
}

.mobile-required {
    color: var(--mobile-danger);
}

.mobile-donation-security {
    margin-top: 22px;
    box-shadow: none;
}

.mobile-form-alert {
    margin-bottom: 18px;
    padding: 15px;

    display: flex;
    align-items: flex-start;
    gap: 11px;

    border: 1px solid transparent;
    border-radius: 17px;

    font-size: 0.8rem;
}

.mobile-form-alert-error {
    border-color: rgba(185, 54, 54, 0.18);
    background: #fff0f0;
    color: var(--mobile-danger);
}

.mobile-form-alert strong {
    display: block;
    font-weight: 850;
}

.mobile-form-alert ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

[dir="rtl"] .mobile-form-alert ul {
    padding-right: 18px;
    padding-left: 0;
}

@media (min-width: 620px) {
    .mobile-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}