:root {
    --background: #f3f4f6;
    --surface: #ffffff;
    --text: #17191d;
    --muted: #6b7280;
    --border: #e5e7eb;
    --dark: #111318;
    --danger: #a32121;
    --danger-background: #fdeaea;
    --success-background: #e8f7ed;
    --success: #176b35;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--background);
    color: var(--text);
    font-family:
        Arial,
        Helvetica,
        sans-serif;
}

button,
input {
    font: inherit;
}

.member-login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(
            circle at top,
            #30343b,
            #111318 60%
        );
}

.member-login-card {
    width: 100%;
    max-width: 430px;
    padding: 36px;
    background: var(--surface);
    border-radius: 18px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.28);
}

.member-logo,
.member-brand-mark {
    display: grid;
    place-items: center;
    background: var(--dark);
    color: #ffffff;
    font-weight: 800;
}

.member-logo {
    width: 50px;
    height: 50px;
    border-radius: 13px;
    font-size: 23px;
}

.member-login-card h1 {
    margin: 24px 0 7px;
    font-size: 28px;
}

.member-login-subtitle {
    margin: 0 0 28px;
    color: var(--muted);
}

.user-alert {
    margin-bottom: 20px;
    padding: 12px 14px;
    border-radius: 9px;
    font-size: 14px;
}

.user-alert-error {
    background: var(--danger-background);
    color: var(--danger);
}

.user-form-group {
    margin-bottom: 18px;
}

.user-form-group label {
    display: block;
    margin-bottom: 7px;
    font-size: 14px;
    font-weight: 700;
}

.user-form-group input {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid #d1d5db;
    border-radius: 9px;
    outline: none;
}

.user-form-group input:focus {
    border-color: #111111;
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08);
}

.user-form-group small {
    display: block;
    margin-top: 7px;
    color: var(--muted);
}

.member-primary-button {
    width: 100%;
    padding: 14px;
    border: 0;
    border-radius: 9px;
    background: var(--dark);
    color: #ffffff;
    cursor: pointer;
    font-weight: 700;
}

.member-support-note {
    margin: 22px 0 0;
    color: var(--muted);
    text-align: center;
    font-size: 12px;
}

.member-header {
    position: sticky;
    z-index: 20;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 76px;
    padding: 14px 5%;
    background: #ffffff;
    border-bottom: 1px solid var(--border);
}

.member-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--text);
    text-decoration: none;
}

.member-brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 11px;
}

.member-brand strong,
.member-brand small,
.member-header-profile strong,
.member-header-profile small {
    display: block;
}

.member-brand small,
.member-header-profile small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
}

.member-header-profile {
    display: flex;
    align-items: center;
    gap: 18px;
    text-align: right;
}

.member-logout-button {
    padding: 9px 13px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
    font-weight: 700;
}

.member-page-content {
    width: min(1200px, calc(100% - 32px));
    margin: 30px auto 60px;
}

.member-welcome-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 30px;
    background: var(--dark);
    color: #ffffff;
    border-radius: 18px;
}

.member-category-chip {
    display: inline-flex;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.13);
    font-size: 12px;
    font-weight: 700;
}

.member-welcome-card h1 {
    margin: 16px 0 9px;
    font-size: 31px;
}

.member-welcome-card p {
    max-width: 590px;
    margin: 0;
    color: #c9cdd3;
    line-height: 1.6;
}

.member-entitlement-summary {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(120px, 1fr));
    gap: 10px;
}

.member-entitlement-summary div {
    padding: 15px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

.member-entitlement-summary span,
.member-entitlement-summary strong {
    display: block;
}

.member-entitlement-summary span {
    margin-bottom: 7px;
    color: #bfc3c9;
    font-size: 11px;
}

.member-entitlement-summary strong {
    font-size: 14px;
}

.member-family-section,
.available-movies-section {
    margin-top: 30px;
}

.member-family-section h2,
.member-section-heading h2 {
    margin: 0 0 6px;
}

.member-family-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.member-family-list article {
    min-width: 190px;
    padding: 15px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 11px;
}

.member-family-list strong,
.member-family-list span,
.member-family-list small {
    display: block;
}

.member-family-list span {
    margin-top: 5px;
    color: var(--muted);
    font-size: 13px;
}

.member-family-list small {
    margin-top: 7px;
    font-size: 11px;
}

.member-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.member-section-heading p {
    margin: 0;
    color: var(--muted);
}

.member-section-heading > span {
    padding: 7px 10px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.member-show-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.member-show-card {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 15px;
}

.member-movie-poster,
.member-movie-poster-placeholder {
    width: 100%;
    height: 240px;
}

.member-movie-poster {
    display: block;
    object-fit: cover;
}

.member-movie-poster-placeholder {
    display: grid;
    place-items: center;
    background: #22252a;
    color: #ffffff;
    font-size: 42px;
    font-weight: 800;
}

.member-show-card-content {
    padding: 20px;
}

.member-show-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.member-show-meta span {
    padding: 5px 8px;
    border-radius: 999px;
    background: #f3f4f6;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.member-show-card h3 {
    margin: 16px 0;
    font-size: 21px;
}

.member-show-date {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.member-show-date span {
    font-weight: 700;
}

.member-seat-availability {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 9px;
}

.member-seat-availability span {
    color: var(--muted);
    font-size: 12px;
}

.member-seat-availability strong {
    color: var(--success);
    font-size: 12px;
}

.member-booking-coming-next,
.member-sold-out {
    margin-top: 13px;
    padding: 11px;
    border-radius: 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
}

.member-booking-coming-next {
    background: #eef2ff;
    color: #3730a3;
}

.member-sold-out {
    background: var(--danger-background);
    color: var(--danger);
}

.member-empty-state {
    padding: 55px 20px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 14px;
    text-align: center;
}

.member-empty-state h3 {
    margin-top: 0;
}

.member-empty-state p {
    margin-bottom: 0;
    color: var(--muted);
}

@media (max-width: 1000px) {
    .member-welcome-card {
        align-items: stretch;
        flex-direction: column;
    }

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

@media (max-width: 700px) {
    .member-header {
        align-items: flex-start;
        gap: 15px;
    }

    .member-header-profile {
        align-items: flex-end;
        flex-direction: column;
        gap: 8px;
    }

    .member-welcome-card {
        padding: 22px;
    }

    .member-entitlement-summary {
        grid-template-columns: 1fr;
    }

    .member-show-grid {
        grid-template-columns: 1fr;
    }

    .member-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }
}
.member-book-button,
.booking-dashboard-button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    padding: 12px;
    border-radius: 9px;
    background: var(--dark);
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
}

.booking-page {
    max-width: 1050px;
}

.booking-back-link {
    display: inline-block;
    margin-bottom: 20px;
    color: var(--text);
    font-weight: 700;
    text-decoration: none;
}

.booking-show-summary {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    padding: 22px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 15px;
}

.booking-show-summary img {
    width: 90px;
    height: 120px;
    border-radius: 9px;
    object-fit: cover;
}

.booking-show-summary span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.booking-show-summary h1 {
    margin: 8px 0;
}

.booking-show-summary p {
    margin: 0;
    color: var(--muted);
}

.booking-section-card {
    margin-bottom: 20px;
    padding: 24px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 14px;
}

.booking-section-card h2 {
    margin-top: 0;
}

.booking-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.booking-section-heading h2 {
    margin: 0 0 6px;
}

.booking-section-heading p {
    margin: 0;
    color: var(--muted);
}

.booking-section-heading > span {
    padding: 7px 10px;
    border-radius: 999px;
    background: #f3f4f6;
    font-size: 12px;
    font-weight: 700;
}

.pass-selection-list {
    display: grid;
    gap: 10px;
}

.pass-selection-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
}

.pass-selection-item input {
    width: 19px;
    height: 19px;
}

.pass-selection-details {
    flex: 1;
}

.pass-selection-details strong,
.pass-selection-details small {
    display: block;
}

.pass-selection-details small {
    margin-top: 5px;
    color: var(--muted);
}

.pass-ticket-status {
    color: var(--success);
    font-size: 12px;
    font-weight: 700;
}

.pass-unavailable {
    cursor: not-allowed;
    opacity: 0.55;
}

.pass-unavailable .pass-ticket-status {
    color: var(--danger);
}

.guest-count-control {
    display: flex;
    align-items: center;
    gap: 12px;
}

.guest-count-control button {
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #ffffff;
    cursor: pointer;
    font-size: 22px;
}

.guest-count-control input {
    width: 70px;
    padding: 11px;
    border: 1px solid var(--border);
    border-radius: 9px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
}

.booking-submit-panel,
.seat-selection-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 14px;
}

.booking-submit-panel span,
.booking-submit-panel strong,
.seat-selection-footer span,
.seat-selection-footer strong {
    display: block;
}

.booking-submit-panel span,
.seat-selection-footer span {
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 12px;
}

.booking-continue-button {
    width: auto;
    min-width: 230px;
}

.booking-seat-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.booking-seat-heading span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.booking-seat-heading h1 {
    margin: 7px 0;
}

.booking-seat-heading p {
    margin: 0;
    color: var(--muted);
}

.booking-seat-count {
    padding: 15px 20px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 11px;
    text-align: center;
}

.booking-seat-count strong,
.booking-seat-count span {
    display: block;
}

.booking-seat-count strong {
    font-size: 22px;
}

.member-seat-map-card {
    margin-bottom: 20px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 14px;
}

.member-seat-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 20px;
}

.member-seat-legend span {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
}

.member-seat-legend-box {
    width: 17px;
    height: 17px;
    border-radius: 4px;
}

.member-seat-legend-box.available {
    background: #e8f7ed;
    border: 1px solid #57a773;
}

.member-seat-legend-box.selected {
    background: #111111;
}

.member-seat-legend-box.unavailable {
    background: #e5e7eb;
}

.member-seat-map-scroll {
    overflow-x: auto;
}

.member-booking-seat-map {
    min-width: 1120px;
    padding: 25px;
    background: #fafafa;
    border-radius: 12px;
}

.member-cinema-screen {
    width: 70%;
    margin: 0 auto 30px;
    padding: 8px;
    border-radius: 5px 5px 30px 30px;
    background: #111111;
    color: #ffffff;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.25em;
}

.member-booking-seat-row {
    display: flex;
    align-items: center;
    min-height: 38px;
    margin-bottom: 7px;
}

.member-seat-row-name {
    width: 34px;
    flex: 0 0 auto;
    font-weight: 800;
    text-align: center;
}

.member-seat-blocks {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 23px;
}

.member-seat-block {
    display: flex;
    gap: 4px;
}

.member-booking-seat {
    width: 27px;
    min-width: 27px;
    height: 27px;
    padding: 0;
    border: 1px solid;
    border-radius: 5px 5px 8px 8px;
    cursor: pointer;
    font-size: 8px;
    font-weight: 800;
}

.member-booking-seat.available {
    background: #e8f7ed;
    border-color: #57a773;
    color: #176b35;
}

.member-booking-seat.unavailable {
    background: #e5e7eb;
    border-color: #9ca3af;
    color: #6b7280;
    cursor: not-allowed;
}

.member-booking-seat.selected {
    background: #111111;
    border-color: #111111;
    color: #ffffff;
}

.member-booking-seat.vip {
    width: 43px;
    min-width: 43px;
    height: 32px;
    border-radius: 9px;
}

.member-main-passage {
    margin: 22px 0;
    padding: 7px;
    border-top: 1px dashed #c7cbd1;
    border-bottom: 1px dashed #c7cbd1;
    color: var(--muted);
    text-align: center;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.booking-review-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.booking-review-list {
    display: grid;
    gap: 13px;
}

.booking-review-list > div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--border);
}

.booking-review-list span {
    color: var(--muted);
}

.booking-review-list strong {
    text-align: right;
}

.booking-total-row {
    font-size: 18px;
}

.selected-pass-summary {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.selected-pass-summary div {
    padding: 14px;
    background: #f8f9fa;
    border-radius: 9px;
}

.selected-pass-summary strong,
.selected-pass-summary span {
    display: block;
}

.selected-pass-summary span {
    margin-top: 5px;
    color: var(--muted);
    font-size: 12px;
}

.final-booking-button {
    max-width: 320px;
    margin-left: auto;
}

.booking-success-card {
    margin-bottom: 22px;
    padding: 35px;
    background: var(--dark);
    color: #ffffff;
    border-radius: 17px;
    text-align: center;
}

.booking-success-icon {
    width: 55px;
    height: 55px;
    display: grid;
    place-items: center;
    margin: 0 auto 17px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--dark);
    font-size: 28px;
    font-weight: 800;
}

.booking-success-card h1 {
    margin: 10px 0;
    font-size: 32px;
}

.booking-success-card p {
    margin-bottom: 0;
    color: #c9cdd3;
}

.booking-ticket-list {
    display: grid;
    gap: 10px;
}

.booking-ticket-list article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px;
    background: #f8f9fa;
    border-radius: 9px;
}

.booking-ticket-list strong,
.booking-ticket-list span {
    display: block;
}

.booking-ticket-list span {
    margin-top: 5px;
    color: var(--muted);
    font-size: 12px;
}

.booking-seat-label {
    padding: 8px 11px;
    border-radius: 8px;
    background: #111111;
    color: #ffffff;
}

.booking-dashboard-button {
    max-width: 260px;
    margin-left: auto;
}

@media (max-width: 750px) {
    .booking-section-heading,
    .booking-submit-panel,
    .seat-selection-footer,
    .booking-seat-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .booking-continue-button,
    .final-booking-button,
    .booking-dashboard-button {
        width: 100%;
        max-width: none;
    }

    .booking-review-grid,
    .selected-pass-summary {
        grid-template-columns: 1fr;
    }

    .booking-show-summary {
        align-items: flex-start;
    }
}
.user-alert-success {
    background: var(--success-background);
    color: var(--success);
}

.member-header-nav {
    display: flex;
    align-items: center;
    gap: 18px;
}

.member-header-nav a {
    color: var(--muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
}

.member-header-nav a.active,
.member-header-nav a:hover {
    color: var(--text);
}

.member-booking-list {
    display: grid;
    gap: 16px;
}

.member-booking-card {
    display: grid;
    grid-template-columns:
        100px
        minmax(0, 1fr)
        190px;
    gap: 20px;
    align-items: center;
    padding: 18px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 14px;
}

.member-booking-card img,
.member-booking-poster {
    width: 100px;
    height: 130px;
    border-radius: 9px;
}

.member-booking-card img {
    object-fit: cover;
}

.member-booking-poster {
    display: grid;
    place-items: center;
    background: var(--dark);
    color: #ffffff;
    font-size: 28px;
    font-weight: 800;
}

.member-booking-code {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.member-booking-information h2 {
    margin: 8px 0;
}

.member-booking-information p {
    margin: 0;
    color: var(--muted);
}

.member-booking-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.member-booking-meta span {
    padding: 6px 8px;
    background: #f3f4f6;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.member-booking-amount {
    text-align: right;
}

.member-booking-amount span,
.member-booking-amount strong,
.member-booking-amount small {
    display: block;
}

.member-booking-amount span {
    color: var(--muted);
    font-size: 11px;
}

.member-booking-amount strong {
    margin-top: 5px;
    font-size: 24px;
}

.member-booking-amount small {
    margin-top: 5px;
    color: var(--muted);
}

.member-food-button {
    display: inline-flex;
    justify-content: center;
    margin-top: 14px;
    padding: 10px 13px;
    border-radius: 8px;
    background: var(--dark);
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}

.food-order-page {
    max-width: 1100px;
}

.food-booking-summary {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}

.food-booking-summary div {
    padding: 16px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.food-booking-summary span,
.food-booking-summary strong {
    display: block;
}

.food-booking-summary span {
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 11px;
}

.food-category-section {
    margin-bottom: 28px;
}

.food-item-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.member-food-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 190px;
    padding: 18px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.member-food-item h3 {
    margin: 0 0 8px;
}

.member-food-item p {
    margin: 0 0 13px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.member-food-item > div > strong {
    font-size: 18px;
}

.food-quantity-control {
    display: grid;
    grid-template-columns:
        40px
        55px
        40px;
    gap: 7px;
    margin-top: 18px;
}

.food-quantity-control button,
.food-quantity-control input {
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #ffffff;
    text-align: center;
    font-weight: 800;
}

.food-quantity-control button {
    cursor: pointer;
    font-size: 19px;
}

.food-order-footer {
    position: sticky;
    bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
    background: var(--dark);
    color: #ffffff;
    border-radius: 14px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.food-order-footer span,
.food-order-footer strong,
.food-order-footer small {
    display: block;
}

.food-order-footer span,
.food-order-footer small {
    color: #c9cdd3;
}

.food-order-footer strong {
    margin: 5px 0;
    font-size: 26px;
}

.food-save-button {
    width: auto;
    min-width: 230px;
    background: #ffffff;
    color: var(--dark);
}

.food-save-button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

@media (max-width: 900px) {
    .member-booking-card {
        grid-template-columns:
            85px
            minmax(0, 1fr);
    }

    .member-booking-card img,
    .member-booking-poster {
        width: 85px;
        height: 115px;
    }

    .member-booking-amount {
        grid-column: 1 / -1;
        text-align: left;
    }

    .food-booking-summary,
    .food-item-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .member-header-nav {
        display: none;
    }

    .member-booking-card,
    .food-booking-summary,
    .food-item-grid {
        grid-template-columns: 1fr;
    }

    .member-booking-card img,
    .member-booking-poster {
        width: 100%;
        height: 210px;
    }

    .food-order-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .food-save-button {
        width: 100%;
    }
}


/* =========================================================
   GLOBAL MOBILE / ANDROID APP LAYOUT FIXES
   Applies automatically to every user PHP page using user.css
   ========================================================= */

:root {
    --user-safe-top: env(safe-area-inset-top, 0px);
    --user-safe-bottom: env(safe-area-inset-bottom, 0px);
    --user-mobile-side-space: 16px;
}

/* Prevent browser/app bars from covering page content. */
html {
    min-height: 100%;
    background: var(--background);
}

body {
    min-height: 100vh;
}

/* Keep the member header above page content. */
.member-header {
    box-sizing: border-box;
}

/* Consistent separation below the member header on every page. */
.member-page-content {
    box-sizing: border-box;
}

/* Login page also respects phone safe areas. */
.member-login-page {
    padding-top: calc(24px + var(--user-safe-top));
    padding-bottom: calc(24px + var(--user-safe-bottom));
}

@media (max-width: 700px) {
    /*
     * Extra space above all logged-in user pages.
     * This prevents Android status bars or app WebViews
     * from covering the header.
     */
    body:not(.member-login-page) {
        padding-top: calc(14px + var(--user-safe-top));
        padding-bottom: var(--user-safe-bottom);
    }

    .member-header {
        position: sticky;
        top: 0;
        z-index: 1000;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 72px;
        padding: 12px var(--user-mobile-side-space);
        background: #ffffff;
    }

    .member-brand {
        min-width: 0;
    }

    .member-brand > span:last-child {
        min-width: 0;
    }

    .member-brand strong,
    .member-brand small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /*
     * Keep Shows and My Bookings visible on mobile.
     * This overrides the older rule that hid the navigation.
     */
    .member-header-nav {
        display: flex !important;
        grid-column: 1 / -1;
        width: 100%;
        gap: 8px;
        margin-top: 4px;
    }

    .member-header-nav a {
        flex: 1;
        min-width: 0;
        padding: 10px 8px;
        border: 1px solid var(--border);
        border-radius: 9px;
        background: #ffffff;
        text-align: center;
        white-space: nowrap;
        font-size: 13px;
    }

    .member-header-nav a.active {
        border-color: var(--dark);
        background: var(--dark);
        color: #ffffff;
    }

    .member-header-profile {
        align-items: flex-end;
        justify-content: flex-end;
        gap: 6px;
    }

    .member-header-profile > div {
        display: none;
    }

    .member-logout-button {
        min-height: 40px;
        padding: 9px 12px;
        white-space: nowrap;
    }

    /*
     * Global top and side padding for dashboard,
     * bookings, ticket, seat selection and food pages.
     */
    .member-page-content {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding:
            24px
            var(--user-mobile-side-space)
            calc(40px + var(--user-safe-bottom));
    }

    .member-welcome-card,
    .booking-show-summary,
    .booking-section-card,
    .member-seat-map-card,
    .booking-success-card {
        margin-top: 0;
    }
}

@media (max-width: 420px) {
    .member-header {
        padding-right: 12px;
        padding-left: 12px;
    }

    .member-brand-mark {
        width: 38px;
        height: 38px;
    }

    .member-brand strong {
        font-size: 14px;
    }

    .member-brand small {
        font-size: 10px;
    }

    .member-header-nav a {
        padding: 9px 6px;
        font-size: 12px;
    }

    .member-page-content {
        padding-right: 12px;
        padding-left: 12px;
    }
}


/* =========================================================
   ANDROID STICKY HEADER STATUS-BAR FIX
   Keeps the sticky header below the phone status bar
   while scrolling on every user page.
   ========================================================= */

@media (max-width: 700px) {
    /*
     * Permanent layer behind the Android status bar.
     * Unlike body::before, this does not scroll away.
     */
    body:not(.member-login-page)::after {
        content: "";
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1999;
        display: block;
        height: 24px;
        background: #ffffff;
        pointer-events: none;
    }

    /*
     * Keep the sticky header below the fixed top layer.
     */
    .member-header {
        position: sticky !important;
        top: 24px !important;
        z-index: 2000 !important;
    }
}

@media (max-width: 420px) {
    body:not(.member-login-page)::after {
        height: 28px;
    }

    .member-header {
        top: 28px !important;
    }
}


/* =========================================================
   ANDROID HEADER NO-JUMP FIX
   Header starts below the status bar and stays there.
   No scrolling spacer is used.
   ========================================================= */

@media (max-width: 700px) {
    /*
     * Permanent document spacing.
     * This replaces the old body::before spacer.
     */
    body:not(.member-login-page) {
        padding-top: 24px !important;
    }

    /*
     * Disable the old scrolling spacer.
     */
    body:not(.member-login-page)::before {
        content: none !important;
        display: none !important;
        height: 0 !important;
        flex: none !important;
    }

    /*
     * Keep a fixed white area behind the Android
     * network, battery and time bar.
     */
    body:not(.member-login-page)::after {
        content: "";
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1999;
        display: block;
        height: 24px;
        background: #ffffff;
        pointer-events: none;
    }

    /*
     * Header begins and remains directly below
     * the permanent 24px top safe area.
     */
    .member-header {
        position: sticky !important;
        top: 24px !important;
        z-index: 2000 !important;
        margin-top: 0 !important;
    }
}

@media (max-width: 420px) {
    body:not(.member-login-page) {
        padding-top: 28px !important;
    }

    body:not(.member-login-page)::after {
        height: 28px;
    }

    .member-header {
        top: 28px !important;
    }
}