/* Account area styles — mobile-first. Reuse'uje paletę z booking-flow.css
   (book-card, book-input, book-btn, book-alert) i dodaje account-specific
   patterny: centered narrow form, bookings card grid, header user widget.

   Breakpointy:
     default (≤599px)    — mobile, 1 kolumna, full-width buttons, touch-friendly
     600px-767px         — tablet, 1 kolumna ale szersze inputy / cards
     768px+              — desktop, grid 2-col dla bookings list, max-width fixed
*/

/* ─── Layout container ─────────────────────────────────────────────── */
.account-flow {
    min-height: 70vh;
    padding: 24px 16px 60px;
}
.account-container {
    margin: 0 auto;
    width: 100%;
    max-width: 480px;
}
.account-container--wide { max-width: 800px; }

@media (min-width: 600px) {
    .account-flow { padding: 32px 24px 60px; }
}

/* ─── Account card (centered narrow) ───────────────────────────────── */
.account-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 24px 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
@media (min-width: 600px) {
    .account-card { padding: 32px; }
}
.account-card__title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 6px;
    color: #0f172a;
    letter-spacing: -0.01em;
}
.account-card__sub {
    color: #64748b;
    font-size: 14px;
    margin: 0 0 20px;
}
.account-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(216, 24, 23, 0.10);
    color: #d81817;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: 0 auto 14px;
}

/* Forms inside account cards — stack mobile, paired on tablet+ */
.account-form { display: flex; flex-direction: column; gap: 12px; }
.account-form__field { display: flex; flex-direction: column; }
.account-form__field + .account-form__field { margin-top: 4px; }
.account-form__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 600px) {
    .account-form__row { grid-template-columns: 1fr 1fr; }
}

/* Make book-input touch-friendly on mobile (min 44px target) */
.account-card .book-input {
    min-height: 44px;
    font-size: 16px; /* avoid iOS zoom on focus */
}
@media (min-width: 600px) {
    .account-card .book-input { font-size: 14px; }
}

.account-card .book-btn {
    min-height: 44px;
    justify-content: center;
}
.account-card .book-btn--block {
    width: 100%;
}

/* Helpers between form sections */
.account-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 18px 0;
}
.account-help {
    font-size: 13px;
    color: #64748b;
    text-align: center;
    margin: 14px 0 0;
}
.account-help a {
    color: #d81817;
    text-decoration: none;
    font-weight: 600;
}
.account-help a:hover { text-decoration: underline; }

.account-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: #475569;
    line-height: 1.45;
    cursor: pointer;
    margin-top: 4px;
}
.account-checkbox input {
    margin-top: 2px;
    width: 18px;
    height: 18px;
    accent-color: #d81817;
    cursor: pointer;
    flex-shrink: 0;
}
.account-checkbox a {
    color: #d81817;
    text-decoration: none;
    font-weight: 500;
}
.account-checkbox a:hover { text-decoration: underline; }

/* ─── Inline messages (used in addition to .book-alert) ────────────── */
.account-msg {
    padding: 14px 16px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 14px;
    display: none; /* JS toggles */
}
.account-msg.is-visible { display: block; }
.account-msg--error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}
.account-msg--info {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}
.account-msg--success {
    background: #f0fdf4;
    color: #14532d;
    border: 1px solid #bbf7d0;
}

/* Spinner — replaces button text while in-flight */
.account-spin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* ─── Bookings list page ───────────────────────────────────────────── */
.account-bookings__header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}
.account-bookings__header h1 {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    color: #0f172a;
    letter-spacing: -0.01em;
}
.account-bookings__header p {
    color: #64748b;
    font-size: 14px;
    margin: 0;
}
@media (min-width: 600px) {
    .account-bookings__header { flex-direction: row; align-items: flex-end; justify-content: space-between; }
    .account-bookings__header h1 { font-size: 26px; }
}

.account-bookings__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 768px) {
    .account-bookings__list { grid-template-columns: 1fr 1fr; gap: 16px; }
}

.booking-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 18px 18px 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.booking-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.booking-card__number {
    font-weight: 700;
    color: #0f172a;
    font-size: 15px;
    letter-spacing: -0.01em;
}
.booking-card__number small {
    display: block;
    font-size: 11px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 2px;
}
.booking-card__badge {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}
.booking-card__badge--confirmed { background: #dcfce7; color: #166534; }
.booking-card__badge--pending   { background: #fef3c7; color: #92400e; }
.booking-card__badge--cancelled { background: #fee2e2; color: #991b1b; }
.booking-card__badge--completed { background: #e0e7ff; color: #3730a3; }
.booking-card__badge--default   { background: #f1f5f9; color: #475569; }

.booking-card__meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    font-size: 13px;
    color: #475569;
}
.booking-card__meta div { display: flex; flex-direction: column; gap: 2px; }
.booking-card__meta strong {
    color: #0f172a;
    font-size: 13px;
    font-weight: 600;
}
.booking-card__meta span {
    font-size: 11px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.booking-card__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}
.booking-card__total {
    color: #0f172a;
    font-weight: 700;
    font-size: 15px;
}
.booking-card__total span {
    color: #94a3b8;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-right: 6px;
}
.booking-card__link {
    color: #d81817;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.booking-card__link:hover { text-decoration: underline; }

.account-bookings__empty {
    text-align: center;
    background: #fff;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    padding: 40px 20px;
}
.account-bookings__empty i {
    font-size: 42px;
    color: #cbd5e1;
    margin-bottom: 14px;
    display: block;
}
.account-bookings__empty h3 {
    font-size: 18px;
    color: #0f172a;
    margin: 0 0 6px;
    font-weight: 700;
}
.account-bookings__empty p {
    color: #64748b;
    margin: 0 0 18px;
    font-size: 14px;
}

.account-bookings__loading {
    text-align: center;
    color: #94a3b8;
    font-size: 14px;
    padding: 40px 20px;
}
.account-bookings__loading i { font-size: 24px; }

/* ─── Header user widget ───────────────────────────────────────────── */
.account-widget {
    display: none; /* JS shows the right state */
    margin-left: 12px;
}
.account-widget[data-state="guest"] .account-widget__guest { display: inline-flex; }
.account-widget[data-state="user"]  .account-widget__user  { display: inline-flex; }
.account-widget__guest,
.account-widget__user { display: none; align-items: center; gap: 6px; }

.account-widget a,
.account-widget__menu-trigger {
    color: #475569;
    font-size: 13px;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.account-widget a:hover,
.account-widget__menu-trigger:hover { background: #f1f5f9; color: #d81817; }
.account-widget__menu-trigger i.fa-user-circle { font-size: 18px; }

.account-widget__menu-wrap { position: relative; }
.account-widget__menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 6px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
    min-width: 200px;
    z-index: 1000;
    padding: 6px;
}
.account-widget__menu-wrap.is-open .account-widget__menu { display: block; }
.account-widget__menu a,
.account-widget__menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 6px;
    color: #0f172a;
    font-size: 13px;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    font-family: inherit;
    cursor: pointer;
    font-weight: 500;
    text-decoration: none;
}
.account-widget__menu a:hover,
.account-widget__menu button:hover { background: #f1f5f9; color: #d81817; }
.account-widget__menu-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 4px 6px;
}
.account-widget__user-name {
    font-size: 12px;
    color: #94a3b8;
    padding: 4px 12px 8px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 4px;
    word-break: break-word;
}
.account-widget__user-name strong {
    display: block;
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
}

/* Mobile: header widget hidden, action lives in hamburger menu */
@media (max-width: 767px) {
    .account-widget { display: none !important; }
}
@media (min-width: 768px) {
    .account-widget { display: block; }
}

/* Mobile hamburger menu entries injected by JS */
.account-mobile-link {
    display: block;
    padding: 12px 0;
    color: #0f172a;
    font-size: 15px;
    text-decoration: none;
    border-bottom: 1px solid #e2e8f0;
}
.account-mobile-link i { margin-right: 8px; color: #d81817; }

/* ─── Pay-step booking-as banner (Step 5) ─────────────────────────── */
.pay-as-user {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 13px;
    color: #1e40af;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.pay-as-user i { color: #1d4ed8; }
.pay-as-user a {
    color: #1d4ed8;
    font-weight: 600;
    text-decoration: none;
    margin-left: auto;
}
.pay-as-user a:hover { text-decoration: underline; }

.pay-signin-hint {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    padding: 9px 14px;
    margin-bottom: 14px;
    font-size: 13px;
    color: #64748b;
    text-align: center;
}
.pay-signin-hint a {
    color: #d81817;
    font-weight: 600;
    text-decoration: none;
}
.pay-signin-hint a:hover { text-decoration: underline; }

/* ─── Booking detail page ──────────────────────────────────────────── */
.booking-detail__header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 18px;
}
.booking-detail__header h1 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: #0f172a;
    letter-spacing: -0.01em;
    word-break: break-word;
}
.booking-detail__header h1 small {
    display: block;
    font-size: 11px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 3px;
}
@media (min-width: 600px) {
    .booking-detail__header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .booking-detail__header h1 { font-size: 24px; }
}

.booking-detail__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #475569;
    font-size: 13px;
    text-decoration: none;
    font-weight: 600;
    margin-bottom: 14px;
}
.booking-detail__back:hover { color: #d81817; text-decoration: underline; }

.booking-section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 18px 18px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    margin-bottom: 14px;
}
.booking-section h2 {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.booking-section h2 i { color: #d81817; font-size: 16px; }

/* Grid for label/value rows inside a section. Stacks on mobile, two cols on tablet+ */
.booking-section__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
@media (min-width: 600px) {
    .booking-section__grid { grid-template-columns: 1fr 1fr; gap: 14px; }
}
.booking-section__row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
    word-break: break-word;
}
.booking-section__row span.label {
    font-size: 11px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.booking-section__row strong { color: #0f172a; font-weight: 600; font-size: 14px; }
.booking-section__row--span { grid-column: 1 / -1; }

/* Items list. Default mobile → stacked cards. Desktop ≥600px → table-like rows. */
.booking-items { display: flex; flex-direction: column; gap: 12px; }
.booking-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.booking-item__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}
.booking-item__name {
    font-weight: 700;
    color: #0f172a;
    font-size: 14px;
    flex: 1 1 auto;
    min-width: 0;
}
.booking-item__name small {
    display: block;
    font-size: 11px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-top: 2px;
}
.booking-item__price {
    color: #0f172a;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    text-align: right;
}
.booking-item__price small {
    display: block;
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
    margin-top: 2px;
}
.booking-item__accessories {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px dashed #cbd5e1;
    padding-top: 8px;
}
.booking-item__accessories li {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #475569;
    padding: 3px 0;
    gap: 10px;
}
.booking-item__accessories li i { color: #94a3b8; margin-right: 4px; }
.booking-item__accessories li span.acc-price { color: #0f172a; font-weight: 600; white-space: nowrap; }

/* Pricing summary block */
.booking-pricing { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.booking-pricing__row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    color: #475569;
}
.booking-pricing__row strong { color: #0f172a; font-weight: 600; }
.booking-pricing__row--total {
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid #e2e8f0;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}
.booking-pricing__row--total strong { color: #d81817; font-size: 18px; }
.booking-pricing__row--discount strong { color: #16a34a; }

/* Status badge variants per Phase 5.7 spec (slightly different from the
   bookings list — that one uses confirmed/pending/cancelled/completed/default
   with their own palette). We provide a parallel scheme keyed by the raw
   server status so we can include cart_session too. */
.booking-status {
    display: inline-block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 999px;
    white-space: nowrap;
}
.booking-status--confirmed { background: #d1fae5; color: #047857; }
.booking-status--pending_payment { background: #fef3c7; color: #b45309; }
.booking-status--cancelled { background: #fee2e2; color: #991b1b; }
.booking-status--completed { background: #dbeafe; color: #1e40af; }
.booking-status--cart_session { background: #f1f5f9; color: #64748b; }
.booking-status--default { background: #f1f5f9; color: #475569; }

/* Action row at the bottom of the booking detail (buttons stack on mobile) */
.booking-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
}
@media (min-width: 600px) {
    .booking-actions { flex-direction: row; flex-wrap: wrap; }
    .booking-actions .book-btn { width: auto; }
}

/* ─── Profile page (two sequential forms in narrow cards) ──────────── */
.profile-section { margin-bottom: 18px; }
.profile-section h2 {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}
.profile-section__sub {
    color: #64748b;
    font-size: 13px;
    margin: 0 0 16px;
}

/* Booking list card → make it a link card (used in bookings.html.twig) */
.booking-card--link {
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s;
    text-decoration: none;
    color: inherit;
}
.booking-card--link:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.booking-card__view-link {
    color: #d81817;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.booking-card__view-link:hover { text-decoration: underline; }