(function(){
/* global React */
const { useState, useEffect, useMemo } = React;

const T_TEAL = '#11978f';
const T_TEAL_HOVER = '#1c7d77';
const T_INK = '#042828';
const T_MUTED = '#5B7A82';
const T_SURFACE = '#FFFFFF';
const T_BORDER = 'rgba(4,40,40,0.08)';
const T_BORDER_STRONG = 'rgba(4,40,40,0.14)';

const PHOTO_URL = 'https://www.van-away.com/wp-content/uploads/malaga-2p-1600x923-1-1024x591.png';

function IconUsers(){return <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>;}
function IconDoors(){return <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M19 21V5a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v16"/><line x1="3" y1="21" x2="21" y2="21"/><circle cx="15" cy="12" r="0.8" fill="currentColor"/></svg>;}
function IconGearbox(){return <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>;}
function IconFuel(){return <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="3" y1="22" x2="15" y2="22"/><line x1="4" y1="9" x2="14" y2="9"/><path d="M14 22V4a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v18"/><path d="M14 13h2a2 2 0 0 1 2 2v2a2 2 0 0 0 2 2v0a2 2 0 0 0 2-2V9.83a2 2 0 0 0-.59-1.42L18 5"/></svg>;}
function IconCheck(){return <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>;}
function IconClose(){return <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>;}
function IconChevL(){return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6"/></svg>;}
function IconChevR(){return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>;}
function IconGrid(){return <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>;}

function specIcon(label){
  const l = (label||'').toLowerCase();
  if (l.includes('place')) return <IconUsers/>;
  if (l.includes('porte')) return <IconDoors/>;
  if (l.includes('boîte') || l.includes('boite')) return <IconGearbox/>;
  if (l.includes('énergie') || l.includes('energie')) return <IconFuel/>;
  return <IconCheck/>;
}

function VehicleDetailModal({ vehicle, days, dailyPrice, visible = true, compact = false, onClose, onSelect }){
  const [galleryIndex, setGalleryIndex] = useState(0);
  const [lightbox, setLightbox] = useState(false);
  const [show, setShow] = useState(false);

  useEffect(() => {
    if (visible){
      const t = setTimeout(()=>setShow(true), 10);
      const onKey = (e)=>{
        if (e.key === 'Escape'){
          if (lightbox) setLightbox(false);
          else onClose && onClose();
        }
      };
      window.addEventListener('keydown', onKey);
      let prev;
      if (!compact){
        prev = document.body.style.overflow;
        document.body.style.overflow = 'hidden';
      }
      return () => {
        clearTimeout(t);
        window.removeEventListener('keydown', onKey);
        if (!compact) document.body.style.overflow = prev;
      };
    } else {
      setShow(false);
      setLightbox(false);
    }
  }, [visible, compact, lightbox]);

  if (!visible || !vehicle) return null;

  const displayName = vehicle.display_name || `${vehicle.brand||''} ${vehicle.model||''}`.trim() || 'Véhicule';
  const categoryName = vehicle.category_name || vehicle.category || '';
  const photos = vehicle.photos && vehicle.photos.length ? vehicle.photos : [PHOTO_URL, PHOTO_URL, PHOTO_URL, PHOTO_URL, PHOTO_URL];
  // Pad to at least 5 photos for the mosaic (1 hero + 4 thumbs)
  const mosaic = photos.length >= 5 ? photos.slice(0, 5) : [...photos, ...Array(5 - photos.length).fill(photos[0] || PHOTO_URL)];

  const mainSpecs = useMemo(() => {
    const arr = [];
    if (vehicle.nb_places || vehicle.places) arr.push({ label: 'Places', value: vehicle.nb_places || vehicle.places });
    if (vehicle.nb_doors || vehicle.doors) arr.push({ label: 'Portes', value: vehicle.nb_doors || vehicle.doors });
    if (vehicle.gearbox) arr.push({ label: 'Boîte', value: vehicle.gearbox });
    if (vehicle.energy) arr.push({ label: 'Énergie', value: vehicle.energy });
    return arr;
  }, [vehicle]);

  const equipments = vehicle.equipments || [];
  const includedOptions = vehicle.included_options || [];
  const description = vehicle.description || '';

  const lbPrev = (e) => { e && e.stopPropagation(); setGalleryIndex((galleryIndex - 1 + photos.length) % photos.length); };
  const lbNext = (e) => { e && e.stopPropagation(); setGalleryIndex((galleryIndex + 1) % photos.length); };

  const openLightbox = (idx) => { setGalleryIndex(idx); setLightbox(true); };

  const handleOverlayClick = (e) => {
    if (e.target.classList.contains('vam-overlay')) onClose && onClose();
  };

  return (
    <div className={`vam-overlay ${show?'is-show':''} ${compact?'vam-compact':''}`} onClick={handleOverlayClick}>
      <div className={`vam-content ${show?'is-show':''}`} role="dialog" aria-modal="true">
        <button className="vam-close" onClick={onClose} aria-label="Fermer">
          <IconClose/>
        </button>

        {/* Header */}
        <div className="vam-header">
          <div className="vam-header-left">
            {categoryName && <span className="vam-category">{categoryName}</span>}
            <h2 className="vam-title">{displayName}</h2>
          </div>
          {dailyPrice && (
            <div className="vam-header-price">
              <span className="vam-header-price-num">{dailyPrice} €</span>
              <span className="vam-header-price-per">/jour</span>
            </div>
          )}
        </div>

        {/* Scrollable body */}
        <div className="vam-scroll">
          {/* Gallery mosaic — full width, like van-away.com */}
          <div className="vam-mosaic">
            <button
              type="button"
              className="vam-mosaic-hero"
              onClick={() => openLightbox(0)}
              aria-label="Voir la galerie"
            >
              <img src={mosaic[0]} alt={displayName}/>
              <span className="vam-mosaic-cta">
                <IconGrid/>
                Voir la galerie
              </span>
            </button>
            <div className="vam-mosaic-grid">
              {[1,2,3,4].map((i) => (
                <button
                  key={i}
                  type="button"
                  className="vam-mosaic-thumb"
                  onClick={() => openLightbox(i)}
                  aria-label={`Photo ${i+1}`}
                >
                  <img src={mosaic[i]} alt={`${displayName} — photo ${i+1}`}/>
                </button>
              ))}
            </div>
          </div>

          {/* 2-column body */}
          <div className="vam-body">
            {/* LEFT — specs + description */}
            <div className="vam-col vam-col-left">
              {mainSpecs.length > 0 && (
                <div className="vam-specs-grid">
                  {mainSpecs.map(s => (
                    <div key={s.label} className="vam-spec-card">
                      <span className="vam-spec-icon">{specIcon(s.label)}</span>
                      <div className="vam-spec-text">
                        <span className="vam-spec-value">{s.value}</span>
                        <span className="vam-spec-label">{s.label}</span>
                      </div>
                    </div>
                  ))}
                </div>
              )}

              {description && (
                <div className="vam-section">
                  <h3 className="vam-section-title">Description</h3>
                  <p className="vam-description">{description}</p>
                </div>
              )}
            </div>

            {/* RIGHT — equipments + included */}
            <div className="vam-col vam-col-right">
              {equipments.length > 0 && (
                <div className="vam-section">
                  <h3 className="vam-section-title">Équipements</h3>
                  <div className="vam-badges-wrap">
                    {equipments.map(eq => (
                      <span key={eq} className="vam-equip-badge">
                        <IconCheck/>
                        {eq}
                      </span>
                    ))}
                  </div>
                </div>
              )}

              {includedOptions.length > 0 && (
                <div className="vam-section">
                  <h3 className="vam-section-title">Inclus dans la location</h3>
                  <div className="vam-badges-wrap">
                    {includedOptions.map(o => (
                      <span key={o.option_id || o.name} className="vam-included-badge">{o.name}</span>
                    ))}
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Actions footer */}
        <div className="vam-actions">
          <div className="vam-actions-price">
            {dailyPrice && (
              <>
                <span className="vam-actions-price-num">{dailyPrice} €</span>
                <span className="vam-actions-price-per">/jour</span>
              </>
            )}
          </div>
          <button className="vam-btn-outline" onClick={onClose}>Fermer</button>
          <button className="vam-btn-primary" onClick={() => onSelect && onSelect(vehicle.id)}>
            Sélectionner
          </button>
        </div>

        {/* Lightbox */}
        {lightbox && (
          <div className="vam-lightbox" onClick={() => setLightbox(false)}>
            <button className="vam-lb-close" onClick={(e)=>{e.stopPropagation();setLightbox(false);}} aria-label="Fermer la galerie">
              <IconClose/>
            </button>
            <button className="vam-lb-btn vam-lb-btn--prev" onClick={lbPrev} aria-label="Précédent">
              <IconChevL/>
            </button>
            <img src={photos[galleryIndex]} alt={displayName} className="vam-lb-img" onClick={(e)=>e.stopPropagation()}/>
            <button className="vam-lb-btn vam-lb-btn--next" onClick={lbNext} aria-label="Suivant">
              <IconChevR/>
            </button>
            <div className="vam-lb-counter">{galleryIndex + 1} / {photos.length}</div>
          </div>
        )}
      </div>

      <style>{`
        .vam-overlay{position:fixed;inset:0;background:rgba(4,40,40,.55);z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity .25s ease}
        .vam-overlay.vam-compact{position:absolute;top:0;left:0;right:0;width:100%;height:844px;max-height:none}
        .vam-overlay.is-show{opacity:1}
        .vam-content{background:${T_SURFACE};border:1px solid ${T_BORDER};border-radius:20px;width:min(1180px,96vw);max-height:calc(100vh - 48px);padding:0;position:relative;box-shadow:0 20px 60px rgba(4,40,40,.25);transform:scale(.96) translateY(16px);opacity:0;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s ease;font-family:'Barlow',Helvetica,sans-serif;color:${T_INK};display:flex;flex-direction:column;overflow:hidden}
        .vam-content.is-show{transform:scale(1) translateY(0);opacity:1}
        .vam-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:999px;background:${T_SURFACE};border:1px solid ${T_BORDER_STRONG};display:flex;align-items:center;justify-content:center;cursor:pointer;color:${T_INK};transition:all .2s;z-index:3}
        .vam-close:hover{border-color:${T_TEAL};color:${T_TEAL}}

        .vam-header{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:24px 32px 16px 32px;padding-right:64px;flex-shrink:0;border-bottom:1px solid ${T_BORDER};background:#fff;z-index:2}
        .vam-header-left{display:flex;flex-direction:column;gap:8px}
        .vam-category{display:inline-flex;align-self:flex-start;align-items:center;padding:4px 12px;background:#e7fcfb;color:${T_TEAL};border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
        .vam-title{font-size:26px;font-weight:700;color:${T_INK};margin:0;line-height:1.2}
        .vam-header-price{display:flex;align-items:baseline;gap:4px;white-space:nowrap}
        .vam-header-price-num{font-size:32px;font-weight:700;color:${T_TEAL};letter-spacing:-.02em;line-height:1}
        .vam-header-price-per{font-size:14px;color:${T_MUTED};font-weight:600}

        .vam-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:20px 32px 24px 32px}
        .vam-scroll::-webkit-scrollbar{width:8px}
        .vam-scroll::-webkit-scrollbar-track{background:transparent}
        .vam-scroll::-webkit-scrollbar-thumb{background:${T_BORDER_STRONG};border-radius:4px}

        /* Gallery mosaic — site-style 1 hero + 2x2 thumbs, all rounded individually */
        .vam-mosaic{display:grid;grid-template-columns:1.4fr 1fr;gap:10px;height:340px;background:transparent}
        .vam-mosaic-hero{position:relative;border:0;padding:0;cursor:pointer;overflow:hidden;background:#F4F2EC;border-radius:16px}
        .vam-mosaic-hero img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
        .vam-mosaic-hero:hover img{transform:scale(1.03)}
        .vam-mosaic-cta{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:${T_TEAL};color:#fff;border-radius:999px;font-size:13px;font-weight:600;box-shadow:0 4px 14px rgba(4,40,40,.25);transition:all .2s}
        .vam-mosaic-hero:hover .vam-mosaic-cta{background:${T_TEAL_HOVER};transform:translateY(-1px)}
        .vam-mosaic-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:10px}
        .vam-mosaic-thumb{position:relative;border:0;padding:0;cursor:pointer;overflow:hidden;background:#F4F2EC;border-radius:14px}
        .vam-mosaic-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
        .vam-mosaic-thumb:hover img{transform:scale(1.05)}

        .vam-body{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;margin-top:22px}
        .vam-col{display:flex;flex-direction:column;gap:18px}

        .vam-specs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
        .vam-spec-card{display:flex;align-items:center;gap:10px;padding:11px 14px;background:${T_SURFACE};border:1px solid ${T_BORDER};border-radius:12px}
        .vam-spec-icon{display:flex;align-items:center;justify-content:center;color:${T_TEAL};flex-shrink:0}
        .vam-spec-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
        .vam-spec-value{font-size:14px;font-weight:700;color:${T_INK}}
        .vam-spec-label{font-size:10px;color:${T_MUTED};font-weight:600;text-transform:uppercase;letter-spacing:.04em}

        .vam-section{display:flex;flex-direction:column;gap:8px}
        .vam-section-title{font-size:12px;font-weight:700;color:${T_INK};margin:0;text-transform:uppercase;letter-spacing:.06em}

        .vam-badges-wrap{display:flex;flex-wrap:wrap;gap:6px}
        .vam-equip-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;background:${T_SURFACE};border:1px solid ${T_BORDER};border-radius:999px;font-size:12px;color:${T_INK};font-weight:600}
        .vam-equip-badge svg{color:${T_TEAL}}
        .vam-included-badge{display:inline-flex;align-items:center;padding:5px 10px;background:#e7fcfb;border:1px solid rgba(17,151,143,.18);border-radius:999px;font-size:12px;color:${T_TEAL};font-weight:600}

        .vam-description{font-size:13px;color:${T_MUTED};line-height:1.55;margin:0}

        .vam-actions{display:flex;justify-content:flex-end;gap:10px;padding:16px 32px;border-top:1px solid ${T_BORDER};flex-shrink:0;background:#fff}
        .vam-btn-outline{padding:11px 22px;background:transparent;border:1px solid ${T_BORDER_STRONG};border-radius:999px;color:${T_INK};font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}
        .vam-btn-outline:hover{border-color:${T_TEAL};color:${T_TEAL}}
        .vam-btn-primary{padding:11px 26px;background:${T_TEAL};border:none;border-radius:999px;color:#fff;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 2px 8px rgba(17,151,143,.25)}
        .vam-btn-primary:hover{background:${T_TEAL_HOVER};transform:translateY(-1px);box-shadow:0 6px 18px rgba(17,151,143,.32)}
        .vam-actions-price{display:none}

        /* Lightbox */
        .vam-lightbox{position:absolute;inset:0;background:rgba(4,40,40,.92);z-index:10;display:flex;align-items:center;justify-content:center;padding:40px;border-radius:20px;animation:vamFadeIn .2s ease}
        @keyframes vamFadeIn{from{opacity:0}to{opacity:1}}
        .vam-lb-close{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;transition:all .2s;z-index:2}
        .vam-lb-close:hover{background:rgba(255,255,255,.2)}
        .vam-lb-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;box-shadow:0 12px 40px rgba(0,0,0,.5)}
        .vam-lb-btn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;transition:all .2s;z-index:2}
        .vam-lb-btn:hover{background:rgba(255,255,255,.2)}
        .vam-lb-btn--prev{left:16px}
        .vam-lb-btn--next{right:16px}
        .vam-lb-counter{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.5);border-radius:999px;padding:6px 14px;font-size:12px;color:#fff;font-weight:600}

        /* ─── Mobile / compact ─────────────────────── */
        .vam-overlay.vam-compact{padding:0;align-items:stretch;justify-content:stretch}
        .vam-overlay.vam-compact .vam-content{
          width:100%;height:100%;max-height:100%;border-radius:0;
          padding:0;display:flex;flex-direction:column;overflow:hidden;
          transform:translateY(24px)
        }
        .vam-overlay.vam-compact .vam-content.is-show{transform:translateY(0)}
        .vam-overlay.vam-compact .vam-close{top:12px;right:12px;width:38px;height:38px;background:rgba(255,255,255,.95);box-shadow:0 2px 8px rgba(4,40,40,.2)}
        .vam-overlay.vam-compact .vam-header{
          padding:14px 16px 12px 16px;padding-right:60px;
          gap:6px;flex-direction:column;align-items:flex-start;
          background:#fff;
          flex-shrink:0;z-index:2
        }
        .vam-overlay.vam-compact .vam-header-left{gap:5px}
        .vam-overlay.vam-compact .vam-category{font-size:10px;padding:3px 9px}
        .vam-overlay.vam-compact .vam-title{font-size:18px;line-height:1.25}
        .vam-overlay.vam-compact .vam-header-price{display:none}

        .vam-overlay.vam-compact .vam-scroll{padding:14px 16px 16px 16px}

        /* Mobile mosaic: hero only + scrollable thumb strip */
        .vam-overlay.vam-compact .vam-mosaic{
          grid-template-columns:1fr;height:auto;gap:8px;
          background:transparent
        }
        .vam-overlay.vam-compact .vam-mosaic-hero{aspect-ratio:4/3;border-radius:12px}
        .vam-overlay.vam-compact .vam-mosaic-grid{
          grid-template-columns:repeat(4,1fr);grid-template-rows:1fr;
          gap:6px;height:64px
        }
        .vam-overlay.vam-compact .vam-mosaic-thumb{border-radius:8px}
        .vam-overlay.vam-compact .vam-mosaic-cta{font-size:12px;padding:6px 12px;left:10px;bottom:10px}

        .vam-overlay.vam-compact .vam-body{
          grid-template-columns:1fr;gap:18px;margin-top:18px
        }
        .vam-overlay.vam-compact .vam-specs-grid{grid-template-columns:repeat(2,1fr);gap:6px}
        .vam-overlay.vam-compact .vam-spec-card{padding:9px 11px}
        .vam-overlay.vam-compact .vam-spec-value{font-size:13px}
        .vam-overlay.vam-compact .vam-section-title{font-size:11px}

        .vam-overlay.vam-compact .vam-actions{
          flex-direction:row;align-items:center;justify-content:space-between;
          gap:10px;padding:10px 14px;
          background:#fff;
          flex-shrink:0;
          box-shadow:0 -2px 12px rgba(4,40,40,.06);
          padding-bottom:max(10px, env(safe-area-inset-bottom))
        }
        .vam-overlay.vam-compact .vam-actions-price{
          display:flex;flex-direction:column;line-height:1.05;flex-shrink:0
        }
        .vam-overlay.vam-compact .vam-actions-price-num{
          font-size:20px;font-weight:700;color:${T_TEAL};letter-spacing:-.01em
        }
        .vam-overlay.vam-compact .vam-actions-price-per{
          font-size:11px;color:${T_MUTED};font-weight:600
        }
        .vam-overlay.vam-compact .vam-btn-outline{display:none}
        .vam-overlay.vam-compact .vam-btn-primary{
          flex:1;padding:13px 18px;font-size:15px;
          text-align:center;max-width:none
        }

        @media (max-width:720px){
          .vam-overlay:not(.vam-compact){padding:0;align-items:stretch;justify-content:stretch}
          .vam-overlay:not(.vam-compact) .vam-content{
            width:100%;height:100%;max-height:100%;border-radius:0;
            padding:0;display:flex;flex-direction:column;overflow:hidden;
            transform:translateY(24px)
          }
          .vam-overlay:not(.vam-compact) .vam-content.is-show{transform:translateY(0)}
          .vam-overlay:not(.vam-compact) .vam-close{top:12px;right:12px;width:38px;height:38px;background:rgba(255,255,255,.95);box-shadow:0 2px 8px rgba(4,40,40,.2)}
          .vam-overlay:not(.vam-compact) .vam-header{padding:14px 16px 12px 16px;padding-right:60px;gap:6px;flex-direction:column;align-items:flex-start;background:#fff;flex-shrink:0;z-index:2}
          .vam-overlay:not(.vam-compact) .vam-title{font-size:18px;line-height:1.25}
          .vam-overlay:not(.vam-compact) .vam-header-price{display:none}
          .vam-overlay:not(.vam-compact) .vam-scroll{padding:14px 16px 16px 16px}
          .vam-overlay:not(.vam-compact) .vam-mosaic{grid-template-columns:1fr;height:auto;gap:8px;background:transparent}
          .vam-overlay:not(.vam-compact) .vam-mosaic-hero{aspect-ratio:4/3;border-radius:12px}
          .vam-overlay:not(.vam-compact) .vam-mosaic-grid{grid-template-columns:repeat(4,1fr);grid-template-rows:1fr;gap:6px;height:64px}
          .vam-overlay:not(.vam-compact) .vam-mosaic-thumb{border-radius:8px}
          .vam-overlay:not(.vam-compact) .vam-body{grid-template-columns:1fr;gap:18px;margin-top:18px}
          .vam-overlay:not(.vam-compact) .vam-specs-grid{grid-template-columns:repeat(2,1fr);gap:6px}
          .vam-overlay:not(.vam-compact) .vam-spec-card{padding:9px 11px}
          .vam-overlay:not(.vam-compact) .vam-actions{flex-direction:row;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;background:#fff;flex-shrink:0;box-shadow:0 -2px 12px rgba(4,40,40,.06);padding-bottom:max(10px, env(safe-area-inset-bottom))}
          .vam-overlay:not(.vam-compact) .vam-actions-price{display:flex;flex-direction:column;line-height:1.05;flex-shrink:0}
          .vam-overlay:not(.vam-compact) .vam-actions-price-num{font-size:20px;font-weight:700;color:${T_TEAL};letter-spacing:-.01em}
          .vam-overlay:not(.vam-compact) .vam-actions-price-per{font-size:11px;color:${T_MUTED};font-weight:600}
          .vam-overlay:not(.vam-compact) .vam-btn-outline{display:none}
          .vam-overlay:not(.vam-compact) .vam-btn-primary{flex:1;padding:13px 18px;font-size:15px;text-align:center}
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { VehicleDetailModal });

})();