/* THAT Rental — booking and fleet vehicle details only.
   Deliberately scoped to avoid changing checkout, booking cards or other modals. */
.that-vehicle-dialog.that-vehicle-dialog-premium,
.fleet-vehicle-modal .fleet-vehicle-dialog {
  width:min(900px,calc(100vw - 28px));max-width:900px;
  max-height:min(88vh,820px);padding:0;border:1px solid rgba(235,192,127,.23);
  border-radius:12px;background:#14273d;color:#f9fbff;
  box-shadow:0 32px 110px rgba(1,12,29,.55),0 0 0 1px rgba(255,255,255,.055);
  overflow:auto;
}
.that-vehicle-dialog.that-vehicle-dialog-premium::backdrop{background:rgba(4,16,33,.78);backdrop-filter:blur(7px)}
.fleet-vehicle-modal .modal-backdrop{background:rgba(4,16,33,.78);backdrop-filter:blur(7px)}
.that-vehicle-dialog-premium .that-dialog-content,
.fleet-vehicle-dialog .fleet-dialog-layout{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);min-height:390px;position:relative}
.that-vehicle-dialog-premium .that-dialog-image-wrap,
.fleet-vehicle-dialog .fleet-dialog-visual{
  display:flex;align-items:center;justify-content:center;position:relative;
  min-height:370px;overflow:hidden;padding:36px 22px 58px;
  background:radial-gradient(ellipse 74% 46% at 50% 48%,rgba(191,216,234,.43) 0%,rgba(126,165,193,.19) 42%,transparent 100%),linear-gradient(145deg,#274966 0%,#132e4b 58%,#102237 100%);
}
.that-vehicle-dialog-premium .that-dialog-image-wrap::after,
.fleet-vehicle-dialog .fleet-dialog-visual::after{content:"";position:absolute;inset:auto 14% 19% 14%;height:18px;background:rgba(1,12,25,.3);filter:blur(18px);border-radius:50%;pointer-events:none}
.that-vehicle-dialog-premium .that-dialog-image-wrap img,
.fleet-vehicle-dialog .fleet-dialog-visual img{
  display:block!important;position:relative;z-index:1;width:100%;max-width:100%;height:auto;max-height:310px;object-fit:contain;
  border:0!important;background:transparent!important;box-shadow:none!important;filter:drop-shadow(0 16px 13px rgba(3,15,27,.2));
}
.that-vehicle-dialog-premium .that-dialog-image-wrap img[hidden]{display:none!important}
.that-vehicle-dialog-premium .that-dialog-image-caption,
.fleet-vehicle-dialog .fleet-dialog-visual-caption{position:absolute;z-index:2;bottom:21px;left:24px;color:#c1d0e0;letter-spacing:.09em;text-transform:uppercase;font-size:10px;font-weight:750}
.that-vehicle-dialog-premium .that-dialog-body,
.fleet-vehicle-dialog .fleet-dialog-info{
  display:flex;flex-direction:column;align-items:flex-start;gap:0;
  padding:42px 35px 34px;
  background:radial-gradient(ellipse 100% 56% at 100% 0,rgba(142,102,57,.19),transparent 100%),linear-gradient(150deg,#172f46,#102236 88%);
}
.that-vehicle-dialog-premium .eyebrow,
.fleet-vehicle-dialog .eyebrow{font-size:11px;letter-spacing:.15em;color:#ff9d4b;font-weight:850;margin-bottom:14px}
.that-vehicle-dialog-premium h2,
.fleet-vehicle-dialog h2{margin:0 32px 13px 0;font-size:clamp(26px,3vw,35px);line-height:1.12;letter-spacing:-.045em;color:#fff!important;font-weight:800}
.that-vehicle-dialog-premium .that-dialog-body>p,
.fleet-vehicle-dialog .fleet-dialog-example{color:#cbd6e3;font-size:14px;line-height:1.6;margin:0 0 15px}
.that-vehicle-dialog-premium .that-dialog-specs,
.fleet-vehicle-dialog .fleet-dialog-specs{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0 20px!important;color:#e3eaf1!important;font-size:13px}
.fleet-vehicle-dialog .fleet-dialog-specs span{border:1px solid rgba(216,229,240,.22);padding:5px 10px;border-radius:5px;background:rgba(255,255,255,.07)}
.that-vehicle-dialog-premium .that-dialog-rate,
.fleet-vehicle-dialog .fleet-dialog-bottom{width:100%;border-top:1px solid rgba(231,236,245,.18);padding-top:17px;margin-top:4px}
.that-vehicle-dialog-premium .that-dialog-rate>span,
.fleet-vehicle-dialog .fleet-dialog-rate small{display:block;color:#b5c3d2;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.09em}
.that-vehicle-dialog-premium .that-dialog-rate>strong,
.fleet-vehicle-dialog .fleet-dialog-rate>strong{display:block;color:#fff;font-size:28px;line-height:1.3;letter-spacing:-.03em;font-weight:850}
.that-vehicle-dialog-premium .that-dialog-rate>small,
.fleet-vehicle-dialog .fleet-dialog-rate>span{color:#aabdd0;font-size:12px}
.that-vehicle-dialog-premium .that-dialog-body>.button,
.fleet-vehicle-dialog .fleet-dialog-info .button{display:inline-flex;align-items:center;justify-content:center;gap:12px;margin-top:18px;padding:12px 19px;border:1px solid rgba(255,182,99,.55);border-radius:6px;color:#fff;background:linear-gradient(145deg,#d96b15,#f58220);font-weight:800;box-shadow:0 8px 22px rgba(2,11,25,.22);text-decoration:none}
.that-vehicle-dialog-premium .that-dialog-body>.button:hover,
.fleet-vehicle-dialog .fleet-dialog-info .button:hover{background:linear-gradient(145deg,#e97a20,#ff963e);transform:translateY(-1px)}
.that-vehicle-dialog-premium .that-dialog-disclaimer,
.fleet-vehicle-dialog .fleet-dialog-disclaimer{margin:17px 0 0!important;color:#aabacc!important;font-size:12px!important;line-height:1.5!important}
.that-vehicle-dialog-premium .that-dialog-close,
.fleet-vehicle-modal .modal-close{
  position:absolute;z-index:10;top:15px;right:15px;display:grid;place-items:center;
  border:1px solid rgba(230,238,248,.24);border-radius:6px;width:34px;height:34px;
  background:rgba(11,29,47,.8);color:#fff;font-size:24px;line-height:1;cursor:pointer;
}
.that-vehicle-dialog-premium .that-dialog-close:hover,
.fleet-vehicle-modal .modal-close:hover{background:#294866}
.fleet-vehicle-modal .fleet-dialog-features{margin:0 0 12px;width:100%}
.fleet-vehicle-modal .fleet-dialog-features>strong{display:block;color:#e1eaf4;font-size:12px;margin-bottom:9px}
.fleet-vehicle-modal .modal-features{margin:0;gap:7px}
.fleet-vehicle-modal .modal-features .pill{background:rgba(255,255,255,.07);border:1px solid rgba(220,232,241,.18);border-radius:5px;color:#e2eaf3;font-size:11px;padding:5px 9px}
.fleet-vehicle-modal .fleet-dialog-bottom{display:flex;align-items:end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fleet-vehicle-modal .fleet-dialog-bottom .button{margin-top:0}
.fleet-premium-details-trigger{display:inline-block;text-decoration:underline;text-underline-offset:4px}
@media(max-width:680px){
 .that-vehicle-dialog.that-vehicle-dialog-premium,.fleet-vehicle-modal .fleet-vehicle-dialog{width:calc(100vw - 20px);max-height:90vh}
 .that-vehicle-dialog-premium .that-dialog-content,.fleet-vehicle-dialog .fleet-dialog-layout{grid-template-columns:1fr}
 .that-vehicle-dialog-premium .that-dialog-image-wrap,.fleet-vehicle-dialog .fleet-dialog-visual{min-height:210px;padding:18px 16px 36px}
 .that-vehicle-dialog-premium .that-dialog-image-wrap img,.fleet-vehicle-dialog .fleet-dialog-visual img{max-height:190px}
 .that-vehicle-dialog-premium .that-dialog-body,.fleet-vehicle-dialog .fleet-dialog-info{padding:25px 22px 25px}
 .that-vehicle-dialog-premium h2,.fleet-vehicle-dialog h2{font-size:26px}
 .that-vehicle-dialog-premium .that-dialog-image-caption,.fleet-vehicle-dialog .fleet-dialog-visual-caption{bottom:10px;left:17px}
}
@media(prefers-reduced-motion:reduce){.that-vehicle-dialog-premium *, .fleet-vehicle-modal *{animation:none!important;transition:none!important}}


/* Vehicle-specific modal colours: same three card finishes used by the booking
   search results and fleet. Set on the shared booking dialog by JS, and on each
   fleet dialog's host by PHP. No effects are applied to ordinary page modals. */
.that-vehicle-dialog-premium[data-metal-theme="navy"],
.fleet-vehicle-modal[data-metal-theme="navy"]{
  --popup-metal-edge:rgba(226,236,247,.22);
  --popup-metal-visual:radial-gradient(ellipse 75% 55% at 50% 48%,rgba(169,204,233,.30),transparent 99%),linear-gradient(157deg,#1d4574 0%,#153256 61%,#10243d 100%);
  --popup-metal-body:linear-gradient(157deg,#1b416c 0%,#142e4f 62%,#10243d 100%);
}
.that-vehicle-dialog-premium[data-metal-theme="slate"],
.fleet-vehicle-modal[data-metal-theme="slate"]{
  --popup-metal-edge:rgba(226,238,247,.22);
  --popup-metal-visual:radial-gradient(ellipse 75% 55% at 50% 48%,rgba(183,209,229,.25),transparent 99%),linear-gradient(157deg,#29485f 0%,#1e3649 60%,#142736 100%);
  --popup-metal-body:linear-gradient(157deg,#29465c 0%,#1e3547 60%,#142736 100%);
}
.that-vehicle-dialog-premium[data-metal-theme="bronze"],
.fleet-vehicle-modal[data-metal-theme="bronze"]{
  --popup-metal-edge:rgba(251,218,183,.24);
  --popup-metal-visual:radial-gradient(ellipse 75% 55% at 50% 48%,rgba(246,195,139,.29),transparent 99%),linear-gradient(157deg,#926037 0%,#634027 56%,#30241f 100%);
  --popup-metal-body:linear-gradient(157deg,#855532 0%,#573b29 56%,#30241f 100%);
}
.that-vehicle-dialog.that-vehicle-dialog-premium[data-metal-theme],
.fleet-vehicle-modal[data-metal-theme] .fleet-vehicle-dialog{
  background:#10243d;border-color:var(--popup-metal-edge);
}
.that-vehicle-dialog-premium[data-metal-theme] .that-dialog-image-wrap,
.fleet-vehicle-modal[data-metal-theme] .fleet-dialog-visual{
  background:var(--popup-metal-visual)!important;
}
.that-vehicle-dialog-premium[data-metal-theme] .that-dialog-body,
.fleet-vehicle-modal[data-metal-theme] .fleet-dialog-info{
  background:var(--popup-metal-body)!important;
}
.that-vehicle-dialog-premium[data-metal-theme] .that-dialog-close,
.fleet-vehicle-modal[data-metal-theme] .modal-close{
  background:rgba(5,17,30,.55);
}

/* Mobile: force the whole details surface (including its stacked image and
   information panes) to use the exact theme of the selected vehicle card.
   This overrides earlier responsive rules that can restore the navy default. */
@media (max-width:760px) {
  .that-vehicle-dialog.that-vehicle-dialog-premium[data-metal-theme="navy"],
  .fleet-vehicle-modal[data-metal-theme="navy"] .fleet-vehicle-dialog {
    background:linear-gradient(157deg,#1d4574 0%,#153256 61%,#10243d 100%)!important;
  }
  .that-vehicle-dialog.that-vehicle-dialog-premium[data-metal-theme="slate"],
  .fleet-vehicle-modal[data-metal-theme="slate"] .fleet-vehicle-dialog {
    background:linear-gradient(157deg,#29485f 0%,#1e3649 60%,#142736 100%)!important;
  }
  .that-vehicle-dialog.that-vehicle-dialog-premium[data-metal-theme="bronze"],
  .fleet-vehicle-modal[data-metal-theme="bronze"] .fleet-vehicle-dialog {
    background:linear-gradient(157deg,#926037 0%,#634027 56%,#30241f 100%)!important;
  }
  .that-vehicle-dialog.that-vehicle-dialog-premium[data-metal-theme] .that-dialog-image-wrap,
  .fleet-vehicle-modal[data-metal-theme] .fleet-dialog-visual {
    background:var(--popup-metal-visual)!important;
    background-image:var(--popup-metal-visual)!important;
  }
  .that-vehicle-dialog.that-vehicle-dialog-premium[data-metal-theme] .that-dialog-body,
  .fleet-vehicle-modal[data-metal-theme] .fleet-dialog-info {
    background:var(--popup-metal-body)!important;
    background-image:var(--popup-metal-body)!important;
  }
}

/* Keep the availability status visible in the details popup on all screen sizes. */
.that-vehicle-dialog-premium .that-dialog-body > .button.unavailable-button,
.that-vehicle-dialog-premium .that-dialog-body > .button.unavailable-button:hover {
  background: #e5ebf2;
  color: #55667b;
  border-color: #cbd5df;
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  opacity: 1;
}