.property-reservation { display: grid; gap: 16px; margin-top: 18px; padding: 18px; border: 1px solid rgba(239,112,79,.24); border-radius: 18px; background: linear-gradient(145deg,#fffaf6,#fff); box-shadow: 0 16px 38px rgba(40,64,69,.07); }
.property-reservation__intro { display: grid; gap: 6px; }
.property-reservation__intro > span { color: var(--warm); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.property-reservation__intro > strong { color: var(--ink); font-family: var(--display); font-size: 21px; line-height: 1.05; }
.property-reservation__intro p { margin: 0; color: #71868f; font-size: 12px; line-height: 1.55; }
.property-reservation form { display: grid; gap: 11px; }
.reservation-contact { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.reservation-contact label,.reservation-guests,.reservation-special { min-width: 0; display: grid; gap: 6px; }
.reservation-contact .is-wide { grid-column: 1/-1; }
.reservation-contact label > span,.reservation-guests > span,.reservation-special > span { color: #71858d; font-size: 10px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.reservation-contact input,.reservation-guests input,.reservation-special textarea { width: 100%; min-height: 46px; padding: 11px 12px; border: 1px solid rgba(7,53,74,.13); border-radius: 11px; outline: 0; color: var(--ink); background: #fff; font: 700 14px/1.4 var(--sans); }
.reservation-special textarea { min-height: 76px; resize: vertical; }
.reservation-contact input:focus,.reservation-guests input:focus,.reservation-special textarea:focus { border-color: var(--warm); box-shadow: 0 0 0 3px rgba(239,112,79,.1); }
.reservation-account { display: flex; align-items: center; gap: 10px; padding: 11px; border-radius: 13px; color: var(--ocean); background: var(--sky); }
.reservation-account > .site-icon { flex: 0 0 auto; font-size: 20px; }
.reservation-account div { min-width: 0; display: grid; gap: 2px; }
.reservation-account small { font-size: 9px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.reservation-account strong,.reservation-account p { overflow: hidden; margin: 0; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.reservation-challenge { padding: 10px; border-radius: 12px; }
.property-reservation .button { width: 100%; min-height: 46px; margin: 0; }
.property-reservation__feedback { min-height: 0; color: #617a83; font-size: 11px; font-weight: 700; line-height: 1.5; }
.property-reservation__feedback:empty { display: none; }
.property-reservation__feedback.is-pending { color: var(--ocean); }
.property-reservation__feedback.is-error { padding: 9px 10px; border-radius: 10px; color: #963f31; background: #fff0eb; }
.reservation-offer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.reservation-offer__head div { display: grid; gap: 3px; }
.reservation-offer__head span { color: #758b93; font-size: 10px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.reservation-offer__head strong { font-size: 13px; }
.reservation-offer__head time { min-width: 62px; padding: 9px 10px; border-radius: 999px; color: #fff; background: var(--ocean); font-size: 13px; font-weight: 900; text-align: center; font-variant-numeric: tabular-nums; }
.reservation-offer__price { display: grid; gap: 5px; padding: 14px; border: 1px solid rgba(7,53,74,.1); border-radius: 14px; background: #f7faf9; }
.reservation-offer__price > span,.reservation-offer__price > small { color: #738991; font-size: 10px; line-height: 1.5; }
.reservation-offer__price > strong { color: var(--ink); font-family: var(--display); font-size: 25px; }
.reservation-terms { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 9px; color: #647b84; font-size: 10px; line-height: 1.55; }
.reservation-terms input { margin-top: 2px; accent-color: var(--warm); }
.property-reservation__success { display: grid; justify-items: start; gap: 7px; padding: 7px 2px; }
.property-reservation__success > .site-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); }
.property-reservation__success small { color: var(--green-dark); font-size: 9px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.property-reservation__success strong { font-family: var(--display); font-size: 27px; }
.property-reservation__success p { margin: 0; color: #657c84; font-size: 11px; line-height: 1.6; }

.portal-record--reservation { grid-template-columns: minmax(0,1.35fr) minmax(90px,.55fr) minmax(90px,.55fr) auto auto; }
.portal-reservation-open { min-height: 36px; padding: 0 12px; border: 1px solid rgba(239,112,79,.3); border-radius: 999px; color: var(--warm); background: #fff; font-size: 10px; font-weight: 850; }
.portal-reservation-open:hover { color: #fff; background: var(--warm); }
.portal-status--pending_approval { color: #8a4b16; background: #fff0dc; }
.portal-status--rejected,.portal-status--no_show { color: #8d3f35; background: #ffe9e4; }
.portal-reservation-dialog { width: min(760px,calc(100% - 28px)); max-height: min(880px,calc(100dvh - 28px)); padding: 0; overflow: auto; border: 0; border-radius: 25px; color: var(--ink); background: #fff; box-shadow: 0 30px 100px rgba(0,0,0,.3); }
.portal-reservation-dialog::backdrop { background: rgba(2,23,32,.68); backdrop-filter: blur(5px); }
.portal-reservation-dialog__close { width: 42px; height: 42px; position: sticky; z-index: 3; top: 14px; float: right; display: grid; place-items: center; margin: 14px 14px -56px 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; box-shadow: var(--shadow-soft); font-size: 20px; }
.portal-reservation-detail { padding: 34px; }
.portal-reservation-detail__head { padding-right: 55px; }
.portal-reservation-detail__head small { color: var(--warm); font-size: 10px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.portal-reservation-detail__head h3 { margin: 5px 0; font-family: var(--display); font-size: 34px; }
.portal-reservation-detail__head p { margin: 0; color: #71858d; font-size: 12px; }
.portal-reservation-kv-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 24px 0; }
.portal-reservation-kv { min-width: 0; display: grid; gap: 5px; padding: 13px; border: 1px solid rgba(7,53,74,.1); border-radius: 13px; background: #f9fbfa; }
.portal-reservation-kv span { color: #7a8d94; font-size: 9px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.portal-reservation-kv strong { overflow-wrap: anywhere; font-size: 12px; }
.portal-reservation-section { margin-top: 24px; }
.portal-reservation-section h4,.portal-reservation-change h4 { margin: 0 0 11px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.portal-reservation-line { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.portal-reservation-line div { display: grid; gap: 3px; }
.portal-reservation-line strong,.portal-reservation-line span { font-size: 12px; }
.portal-reservation-line small { color: #7a8e95; font-size: 10px; }
.portal-reservation-line em { padding: 5px 8px; border-radius: 999px; color: var(--green-dark); background: var(--mint); font-size: 7px; font-style: normal; font-weight: 850; }
.portal-reservation-history { display: grid; grid-template-columns: minmax(120px,.5fr) minmax(0,1fr) auto; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.portal-reservation-history strong,.portal-reservation-history span { font-size: 11px; }
.portal-reservation-history span { color: #607881; }
.portal-reservation-history small { color: #82949b; font-size: 10px; }
.portal-reservation-change-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.portal-reservation-change-row div { min-width: 0; display: grid; gap: 4px; }
.portal-reservation-change-row strong,.portal-reservation-change-row p,.portal-reservation-change-row small { margin: 0; font-size: 11px; }
.portal-reservation-change-row p,.portal-reservation-change-row small,.portal-reservation-change-row > span { color: #71858d; }
.portal-reservation-change-row em { align-self: start; padding: 5px 8px; border-radius: 999px; color: var(--ocean); background: var(--sky); font-size: 9px; font-style: normal; font-weight: 850; }
.portal-reservation-change-row > span { grid-column: 1/-1; padding: 9px 10px; border-radius: 9px; background: #f7faf9; font-size: 10px; }
.portal-reservation-change { display: grid; gap: 10px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.portal-reservation-change select,.portal-reservation-change textarea { width: 100%; padding: 11px 12px; border: 1px solid rgba(7,53,74,.13); border-radius: 11px; color: var(--ink); background: #fff; font: 700 13px/1.5 var(--sans); }
.portal-reservation-change textarea { resize: vertical; }
.portal-reservation-change .button { width: max-content; }
.portal-reservation-change__feedback { margin: 0; color: #647b84; font-size: 11px; }
.portal-reservation-change__feedback.is-success { color: var(--green-dark); }
.portal-reservation-change__feedback.is-error,.portal-reservation-error { color: var(--danger); }
.portal-reservation-loading,.portal-reservation-error { min-height: 220px; display: grid; place-items: center; margin: 0; padding: 40px; text-align: center; }
@media (max-width: 720px) {
    .reservation-contact { grid-template-columns: 1fr; }
    .reservation-contact .is-wide { grid-column: auto; }
    .portal-record--reservation { grid-template-columns: minmax(0,1fr) auto auto; }
    .portal-record--reservation > span:not(.portal-status) { display: none; }
    .portal-reservation-dialog { max-height: calc(100dvh - 18px); }
    .portal-reservation-detail { padding: 25px 18px; }
    .portal-reservation-detail__head h3 { font-size: 28px; }
    .portal-reservation-kv-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .portal-reservation-line { grid-template-columns: minmax(0,1fr) auto; }
    .portal-reservation-line em { display: none; }
    .portal-reservation-history { grid-template-columns: 1fr auto; }
    .portal-reservation-history span { grid-column: 1/-1; grid-row: 2; }
}