/* ======================================================
   LAYOUT — structural containers, grids, positioning.
   Load after tokens.css so var(--…) references resolve.
   ====================================================== */

.reset-container {
    margin: 0 auto;
    padding: var(--space-2_5);
    background: var(--primary-bg-color);
    border-radius: var(--radius-md);
    color: var(--color-text);
}

.control-wrapper {
    max-width: 700px;
    margin: 0 auto;
    padding: var(--space-2_5);
    background: var(--primary-bg-color);
    border-radius: var(--radius-md);
    color: var(--color-text);
}

.step-content {
    padding: var(--space-2_5);
    background: var(--primary-bg-color);
    border-radius: var(--radius-md);
    color: var(--color-text);
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-2_5) var(--space-4);
    align-items: center;
    padding: var(--space-2_5);
}

.grid-item.label {
    text-align: right;
    font-weight: bold;
}

.grid-item.value {
    text-align: left;
}

.input-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    width: 100%;
}

.grid-heading {
    font-size: 1.2rem;
    font-weight: bold;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    text-align: center;
    border-bottom: 2px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.button-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--space-2_5);
}

.cabin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(300px, 1fr));
    gap: var(--space-4);
    padding: var(--space-2_5);
}

.form-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--space-2_5);
}

#payment-element {
    width: 400px;
    max-width: 100%;
    height: 50px;
    padding: var(--space-2_5);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-md);
    background-color: var(--color-primary-50);
    transition: border-color var(--transition);
}

    #payment-element:focus,
    #payment-element:hover {
        border-color: var(--color-primary-700);
        background-color: var(--color-primary-100);
    }

.payment-grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2_5);
    padding: var(--space-2_5);
}

.payment-grid-item {
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
}

.price-summary-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* position: fixed is broken by ancestor transforms (Syncfusion .e-mobile-layout).
   !important is required here to escape the containing block, not to win specificity. */
.step-footer-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 700px !important;
    z-index: 1000 !important;
    padding: 10px !important;
    margin: 0 !important;
    background: var(--primary-bg-color) !important;
    border-top: 1px solid var(--color-border) !important;
    border-left: 1px solid var(--color-border) !important;
    border-right: 1px solid var(--color-border) !important;
    border-top-left-radius: var(--radius-md) !important;
    border-top-right-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-up) !important;
    box-sizing: border-box !important;
}

    .step-footer-nav .step-nav-box {
        display: block !important;
        width: 100% !important;
        border: none !important;
        padding: 0 !important;
        background: transparent !important;
    }

    .step-footer-nav .button-container {
        display: flex !important;
        width: 100% !important;
        padding: 0 !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

.step-nav-spacer {
    flex: 1 1 auto;
}

body:has(.step-footer-nav) {
    padding-bottom: 90px;
}

/* Mobile: full-width layout on small screens */
.mobile .control-wrapper {
    max-width: 100%;
}

@media (max-width: 768px) {
    .container,
    .content-wrapper,
    .e-mobile-layout,
    .e-mobile-content {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .cabin-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .content-wrapper {
        padding-left: var(--space-2_5);
        padding-right: var(--space-2_5);
    }

    .e-mobile-content {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 400px) {
    #payment-element {
        max-width: 320px;
    }
}