:root { --history-red: #bf111b; --history-ink: #251b19; --history-muted: #665e59; }
* { box-sizing: border-box; }
body.customer-reservations-page { margin: 0; min-height: 100vh; background: #f7f3ee; color: var(--history-ink); font-family: Montserrat, "Segoe UI", Arial, sans-serif; }
.customer-reservations-page .orders-header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; min-height: 96px; background: #fffdfa; border-bottom: 1px solid #e8e0d8; padding: 0 max(28px, calc((100vw - 1700px) / 2)); }
.customer-reservations-page .orders-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; white-space: nowrap; }
.customer-reservations-page .orders-brand img { width: 52px; height: 52px; object-fit: contain; }
.customer-reservations-page .orders-brand span { display: flex; flex-direction: column; }
.customer-reservations-page .orders-brand small { color: var(--history-muted); font-size: .75rem; }
.customer-reservations-page .orders-navigation { display: flex; justify-content: center; align-items: center; gap: 5px; flex-wrap: wrap; }
.customer-reservations-page .orders-navigation a { padding: 12px; color: #282525; font-size: .85rem; font-weight: 750; text-decoration: none; }
.customer-reservations-page .orders-navigation a:hover { color: var(--history-red); }
.reservation-header-action, .reservation-history-heading button, .reservation-signin { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 17px; border: 0; border-radius: 9px; color: white; background: var(--history-red); font: inherit; font-size: .85rem; font-weight: 750; text-decoration: none; cursor: pointer; }
.reservation-header-action:hover, .reservation-history-heading button:hover, .reservation-signin:hover { background: #950b13; color: white; }
.reservation-history-shell { max-width: 1160px; padding: 55px 24px 80px; margin: auto; }
.reservation-history-hero { padding: 36px 40px; border-radius: 22px; background: linear-gradient(125deg, #1c1616, #4d1619); color: white; box-shadow: 0 20px 45px #43232218; }
.reservation-kicker { color: #c9242d; font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; }
.reservation-history-hero .reservation-kicker { color: #ffaaaa; }
.reservation-history-hero h1 { margin: 10px 0 8px; font-size: clamp(2rem, 4vw, 3.2rem); }
.reservation-history-hero p { margin: 0; color: #f0dddd; }
.reservation-history-panel { margin-top: 25px; padding: 30px; border: 1px solid #e7dfd6; border-radius: 19px; background: white; box-shadow: 0 14px 40px #2c1d130b; }
.reservation-history-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.reservation-history-heading h2 { margin: 5px 0 0; font-size: 1.45rem; }
#reservations-message { color: var(--history-muted); line-height: 1.6; }
.reservation-history-grid { display: grid; gap: 16px; margin-top: 20px; }
.reservation-history-card { padding: 22px; border: 1px solid #e9e0d7; border-radius: 14px; background: #fffefd; scroll-margin-top: 130px; }
.reservation-history-card:target { border-color: var(--history-red); }
.reservation-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.reservation-card-top h3 { margin: 0 0 6px; font-size: 1.1rem; }
.reservation-card-top small, .reservation-card-info { color: var(--history-muted); }
.reservation-card-info { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 17px 0; font-size: .86rem; }
.reservation-state { padding: 8px 12px; border-radius: 999px; font-size: .78rem; font-weight: 800; background: #fff0da; color: #805211; }
.reservation-state.confirmed, .reservation-state.completed { background: #e5f5eb; color: #14653d; }
.reservation-state.rejected, .reservation-state.cancelled { background: #fff0ef; color: #aa2530; }
.reservation-status-track { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 17px 0 0; list-style: none; }
.reservation-status-track li { padding: 7px 11px; border-radius: 8px; background: #f3efeb; color: #736d68; font-size: .75rem; font-weight: 700; }
.reservation-status-track li.done { background: #e8f6ee; color: #196844; }
.reservation-status-note { margin: 16px 0 0; padding: 12px; border-left: 3px solid #ba151e; background: #fff7f4; overflow-wrap: anywhere; }
.reservation-history-footnote { margin-top: 22px; color: var(--history-muted); font-size: .86rem; line-height: 1.6; }
.reservation-skip { position: absolute; top: -100px; left: 12px; padding: 10px; background: white; color: #a00; }
.reservation-skip:focus { top: 10px; z-index: 1000; }
.customer-reservations-page :is(a, button):focus-visible { outline: 3px solid #b71620; outline-offset: 3px; }
@media (max-width: 800px) { .customer-reservations-page .orders-header { grid-template-columns: 1fr auto; padding: 12px 20px; } .customer-reservations-page .orders-navigation { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; } .reservation-history-shell { padding: 22px 14px 55px; } .reservation-history-panel, .reservation-history-hero { padding: 22px; } }