/*
   Camada responsiva do simulador de licenças.
   Este ficheiro fica separado do CSS base para permitir manutenção segura:
   a página mantém a lógica existente e estas regras tratam somente do layout,
   acessibilidade visual e adaptação entre dispositivos.
*/

:root {
    --sim-navy: #102451;
    --sim-blue: #0877c1;
    --sim-cyan: #32c3ec;
    --sim-ink-soft: #536b83;
    --sim-border: #dce8f2;
    --sim-surface: #ffffff;
    --sim-surface-soft: #f5f9fc;
    --sim-radius-lg: 22px;
    --sim-radius-md: 14px;
    --sim-shadow: 0 18px 48px rgba(16, 36, 81, .09);
}

/* Evita que textos longos, e-mails ou referências provoquem scroll horizontal. */
.license-simulator,
.license-simulator * {
    min-width: 0;
}

.license-simulator {
    width: min(100%, 1440px);
    margin-inline: auto;
    padding: clamp(20px, 4vw, 64px) clamp(12px, 3.5vw, 44px) clamp(42px, 6vw, 88px);
}

/* Hero com duas colunas no desktop e composição vertical em ecrãs estreitos. */
.license-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr);
    gap: clamp(22px, 4vw, 56px);
    align-items: end;
    margin-bottom: clamp(18px, 3vw, 30px);
    padding: clamp(24px, 5vw, 58px);
    border-radius: var(--sim-radius-lg);
    background: linear-gradient(135deg, #092451 0%, #0877c1 72%, #32c3ec 100%);
    box-shadow: 0 24px 60px rgba(9, 36, 81, .14);
}

.license-hero h1 {
    max-width: 820px;
    margin: 12px 0 16px;
    font-size: clamp(2rem, 4.8vw, 4.35rem);
    line-height: 1.03;
    text-wrap: balance;
}

.license-hero p {
    max-width: 720px;
    margin: 0;
    font-size: clamp(.95rem, 1.4vw, 1.08rem);
    line-height: 1.7;
}

.hero-trust {
    display: grid;
    gap: 10px;
}

.hero-trust span {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 13px 14px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--sim-radius-md);
    background: rgba(255, 255, 255, .09);
    color: #effbff;
    line-height: 1.4;
}

.hero-trust strong {
    flex: 0 0 auto;
    color: #9aeaff;
}

/* Barra de etapas: pode ser percorrida horizontalmente sem esmagar os rótulos. */
.license-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(130px, 1fr));
    gap: 8px;
    margin-bottom: 22px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.license-steps button {
    min-height: 54px;
    white-space: nowrap;
    transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}

/* Meios de pagamento: cartões acessíveis e fáceis de tocar em qualquer ecrã. */
.payment-method-panel {
    margin-top: 20px;
    padding: clamp(16px, 2.4vw, 24px);
    border: 1px solid #d9e7f1;
    border-radius: 16px;
    background: linear-gradient(145deg, #f7fcff, #fff);
}

.payment-method-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.payment-method-kicker {
    display: block;
    margin-bottom: 5px;
    color: #0877c8;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.payment-method-title-row h3 {
    margin: 0;
    color: #082b5c;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
}

.payment-method-title-row p {
    margin: 5px 0 0;
    color: #60758c;
}

.payment-method-toggle {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 10px 15px;
    border: 1px solid #0aa8df;
    border-radius: 10px;
    background: #fff;
    color: #075ca8;
    font-weight: 800;
    cursor: pointer;
}

.payment-method-toggle:hover,
.payment-method-toggle:focus-visible {
    background: #eaf8fe;
}

.payment-method-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.payment-method-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 142px;
    padding: 16px;
    border: 1px solid #cbddea;
    border-radius: 13px;
    background: #fff;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.payment-method-card:hover,
.payment-method-card:has(input:checked) {
    border-color: #0aa8df;
    box-shadow: 0 10px 24px rgba(7, 92, 168, .12);
    transform: translateY(-1px);
}

.payment-method-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.payment-method-radio {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    border: 2px solid #9db6c9;
    border-radius: 50%;
}

.payment-method-card input:checked + .payment-method-radio {
    border: 6px solid #0aa8df;
}

.payment-method-card input:focus-visible + .payment-method-radio {
    outline: 3px solid rgba(10, 168, 223, .25);
    outline-offset: 3px;
}

.payment-method-content {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.payment-method-content strong {
    color: #082b5c;
    font-size: 1rem;
}

.payment-method-content small {
    color: #60758c;
    line-height: 1.35;
}

.payment-method-content small b {
    color: #075ca8;
}

.payment-method-selection {
    margin: 14px 0 0;
    color: #9b6200;
    font-size: .9rem;
    font-weight: 700;
}

.payment-method-selection.is-selected {
    color: #167044;
}

@media (max-width: 680px) {
    .payment-method-title-row {
        flex-direction: column;
    }

    .payment-method-toggle {
        width: 100%;
    }

    .payment-method-options {
        grid-template-columns: 1fr;
    }
}

.license-steps button:hover {
    transform: translateY(-1px);
}

.license-checkout {
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, .72fr);
    gap: clamp(16px, 2.4vw, 28px);
}

.step-panel,
.purchase-summary,
.confirmation-card {
    border-radius: var(--sim-radius-lg);
    box-shadow: var(--sim-shadow);
}

.step-panel {
    padding: clamp(18px, 3.2vw, 36px);
}

.section-heading {
    gap: 12px;
    margin-bottom: clamp(18px, 3vw, 28px);
}

.section-heading h2 {
    font-size: clamp(1.45rem, 2.5vw, 2.15rem);
    line-height: 1.15;
}

.section-heading p,
.info-strip,
.account-card p,
.payment-explanation p {
    line-height: 1.65;
}

/* Cards com altura natural para não criar buracos em tablets ou zoom elevado. */
.plan-choice-grid,
.module-grid {
    align-items: stretch;
}

.plan-choice {
    min-height: 190px;
    padding: clamp(14px, 2vw, 20px);
}

.plan-description {
    min-height: 0;
    flex: 1 1 auto;
}

.plan-choice:focus-within,
.module-choice:focus-within {
    outline: 3px solid rgba(50, 195, 236, .32);
    outline-offset: 2px;
}

.config-grid,
.form-grid {
    gap: clamp(12px, 2vw, 20px);
}

.field-block input:not([type=checkbox]):not([type=radio]),
.stepper-input input {
    min-height: 48px;
    font-size: 1rem;
}

.verify-row {
    align-items: center;
}

.verify-button,
.continue-button,
.submit-button,
.back-button,
.stepper-input button {
    min-height: 48px;
}

.module-choice {
    min-height: 112px;
    align-items: flex-start;
}

.purchase-summary {
    align-self: start;
}

.summary-sticky {
    top: clamp(76px, 8vh, 112px);
    padding: clamp(18px, 2.4vw, 28px);
}

.summary-lines > div,
.summary-total {
    gap: 18px;
}

.summary-lines b,
.summary-total strong {
    text-align: right;
    overflow-wrap: anywhere;
}

/* Modal e alertas mantêm leitura confortável mesmo com zoom ou teclado virtual. */
.license-modal-backdrop {
    padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}

.license-modal {
    max-height: min(90svh, 680px);
    overflow: auto;
}

/* Tablets em retrato: mantém o resumo abaixo do formulário para evitar aperto. */
@media (max-width: 1080px) {
    .license-hero {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .hero-trust {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .license-checkout {
        grid-template-columns: 1fr;
    }

    .purchase-summary {
        order: -1;
    }

    .summary-sticky {
        position: static;
    }
}

@media (max-width: 760px) {
    .license-simulator {
        padding-top: 18px;
    }

    .license-hero {
        border-radius: 18px;
    }

    .hero-trust,
    .config-grid,
    .form-grid,
    .plan-choice-grid,
    .module-grid {
        grid-template-columns: 1fr;
    }

    .license-steps {
        display: flex;
        gap: 8px;
        margin-inline: -4px;
        padding: 2px 4px 8px;
    }

    .license-steps button {
        flex: 0 0 142px;
    }

    .step-actions {
        flex-direction: column-reverse;
    }

    .step-actions > button,
    .step-panel > .continue-button,
    .receipt-form .submit-button {
        width: 100%;
    }

    .confirmation-grid,
    .payment-reference {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .license-simulator {
        padding-inline: 10px;
    }

    .license-hero,
    .step-panel,
    .summary-sticky,
    .confirmation-card {
        padding: 18px;
    }

    .license-hero h1 {
        font-size: clamp(1.9rem, 10vw, 2.7rem);
    }

    .section-heading {
        gap: 8px;
    }

    .period-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .verify-row {
        align-items: stretch;
        flex-direction: column;
    }

    .verify-button {
        width: 100%;
    }

    .summary-total strong {
        font-size: 1.35rem;
    }
}

/* Ecrãs muito largos: limita a densidade visual sem deixar o conteúdo pequeno. */
@media (min-width: 1600px) {
    .license-simulator {
        width: min(100%, 1520px);
    }

    .license-checkout {
        grid-template-columns: minmax(0, 1.65fr) minmax(340px, .7fr);
    }
}

/* Utilizadores que preferem menos movimento não recebem transições decorativas. */
@media (prefers-reduced-motion: reduce) {
    .license-steps button,
    .plan-choice {
        transition: none;
    }
}