/* Right-side Invoice / Extras overlay polish.
   Loaded after reservation-drawer.css so it only refines presentation.
   Booking, pricing, lifecycle and invoice logic are untouched. */

/* Invoice and Extras are secondary tools: keep the reservation underneath,
   move the tool to the right edge, and add only a light focus blur. */
html body.frch-ui .invoices-overlay-shell,
html body.frch-ui .extras-overlay-shell{
  position:fixed!important;
  inset:0!important;
  z-index:80!important;
  display:flex!important;
  justify-content:flex-end!important;
  align-items:stretch!important;
  padding:18px!important;
  background:rgba(15,45,72,.13)!important;
  backdrop-filter:blur(3px) saturate(.96)!important;
  -webkit-backdrop-filter:blur(3px) saturate(.96)!important;
}

html body.frch-ui .invoices-overlay-panel{
  width:min(620px,calc(100vw - 44px))!important;
  min-width:0!important;
  height:calc(100dvh - 36px)!important;
  margin:0!important;
  border:1px solid #bdd5e3!important;
  border-radius:18px!important;
  background:#eaf4fa!important;
  color:var(--ui-text)!important;
  box-shadow:0 24px 70px rgba(15,42,64,.24)!important;
}

html body.frch-ui .extras-overlay-panel{
  width:min(650px,calc(100vw - 44px))!important;
  min-width:0!important;
  height:calc(100dvh - 36px)!important;
  margin:0!important;
  border:1px solid #bdd5e3!important;
  border-radius:18px!important;
  background:#eaf4fa!important;
  color:var(--ui-text)!important;
  box-shadow:0 24px 70px rgba(15,42,64,.24)!important;
}

html:not([data-theme="dark"]) body.frch-ui :is(.invoices-overlay-panel .io-head,.extras-overlay-panel .xo-head){
  background:#f7fbfe!important;
  border-bottom-color:#cfdfE8!important;
}
html:not([data-theme="dark"]) body.frch-ui .extras-overlay-panel .xo-nav{
  background:#eaf4fa!important;
}
html:not([data-theme="dark"]) body.frch-ui :is(
  .invoices-overlay-panel .invoice-card,
  .invoices-overlay-panel .invoice-summary-box,
  .invoices-overlay-panel .pending-invoice-card,
  .extras-overlay-panel .xo-section
){
  background:#fbfdff!important;
  border-color:#d3e1e9!important;
}

/* Restore the useful lifecycle colour language in the reservation header. */
html body.frch-ui #reservationDrawer .frch-lifecycle-action[data-lifecycle-action="confirm"]{
  background:#67458b!important;
  border-color:#67458b!important;
  color:#fff!important;
}
html body.frch-ui #reservationDrawer .frch-lifecycle-action[data-lifecycle-action="activate"]{
  background:#296f49!important;
  border-color:#296f49!important;
  color:#fff!important;
}
html body.frch-ui #reservationDrawer .frch-lifecycle-action[data-lifecycle-action="return"]{
  background:#e2b83d!important;
  border-color:#c99e25!important;
  color:#43360e!important;
}
html body.frch-ui #reservationDrawer .frch-cancel-action[data-lifecycle-action="cancel"]{
  background:#8f2d36!important;
  border-color:#8f2d36!important;
  color:#fff!important;
}
html body.frch-ui #reservationDrawer .frch-cancel-action[data-lifecycle-action="void-rebook"]{
  background:#d67527!important;
  border-color:#c46c24!important;
  color:#fff!important;
}
html body.frch-ui #reservationDrawer :is(.frch-lifecycle-action,.frch-cancel-action):hover{
  filter:brightness(.96);
}
html body.frch-ui #reservationDrawer :is(.frch-lifecycle-action,.frch-cancel-action):disabled{
  opacity:.48!important;
  filter:none!important;
}

html[data-theme="dark"] body.frch-ui :is(.invoices-overlay-shell,.extras-overlay-shell){
  background:rgba(1,10,18,.28)!important;
  backdrop-filter:blur(3px) saturate(.88)!important;
  -webkit-backdrop-filter:blur(3px) saturate(.88)!important;
}
html[data-theme="dark"] body.frch-ui :is(.invoices-overlay-panel,.extras-overlay-panel){
  background:#102433!important;
  border-color:#355169!important;
  color:#edf4fb!important;
  box-shadow:0 26px 72px rgba(0,0,0,.42)!important;
}

@media(max-width:900px){
  html body.frch-ui .invoices-overlay-panel,
  html body.frch-ui .extras-overlay-panel{
    width:min(86vw,650px)!important;
  }
}
@media(max-width:720px){
  html body.frch-ui .invoices-overlay-shell,
  html body.frch-ui .extras-overlay-shell{
    padding:0!important;
  }
  html body.frch-ui .invoices-overlay-panel,
  html body.frch-ui .extras-overlay-panel{
    width:100vw!important;
    height:100dvh!important;
    border-radius:0!important;
    border-left:0!important;
    border-right:0!important;
  }
}