@font-face{font-family:'AntonV5';src:url('/public/assets/fonts/Anton-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:'PoppinsV5';src:url('/public/assets/fonts/Poppins-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'PoppinsV5';src:url('/public/assets/fonts/Poppins-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'PoppinsV5';src:url('/public/assets/fonts/Poppins-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}

/* Same uniform-grid override the other new cards need on this legacy wrapper. */
.carscolwrap:has(.pc5-card){display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
    align-items:stretch}
.carscolwrap:has(.pc5-card)::before,.carscolwrap:has(.pc5-card)::after{display:none}
.carscolwrap:has(.pc5-card)>*{min-width:0}
@media (max-width:1100px){.carscolwrap:has(.pc5-card){grid-template-columns:repeat(2,1fr)}}
@media (max-width:767px){.carscolwrap:has(.pc5-card){grid-template-columns:1fr;gap:18px}}

/* The boss's palette: a warm off-white page behind white cards. */
body:has(.pc5-card){background:#F4F4F2}

/* The card is the size container, and a container cannot query itself - cqw on the
   card's OWN properties silently resolves against the viewport (which is how a 51px
   corner appeared). Its own radius and padding therefore use fixed units; descendants
   keep cqw. */
.pc5-card{position:relative;background:#fff;border-radius:12px;
    container-type:inline-size;border:1px solid #D9DADD;
    box-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 20px -10px rgba(16,24,40,.08);
    font-family:'PoppinsV5',sans-serif;display:flex;flex-direction:column;height:100%;
    text-align:left;padding:0 0 12px;
    content-visibility:auto;contain-intrinsic-width:auto 100px;contain-intrinsic-height:auto 560px}
.pc5-card:hover{box-shadow:0 1px 2px rgba(16,24,40,.05),0 12px 26px -10px rgba(16,24,40,.12)}

/* ---- photo: near full-bleed, studio backdrop, bare maker's mark, play chip ---- */
/* The wrapper carries the photo's outer margins so the play chip can sit on the
   photo without living inside its <a>. */
.pc5-mediaw{position:relative;margin:1.9cqw 1.2cqw 0}
.pc5-media{position:relative;display:block;border-radius:2.4cqw;
    aspect-ratio:1001.13/601.83;overflow:hidden;
    background:#F0F0F0 url('/public/assets/images/card-v3-bg.webp') center/cover no-repeat}
/* The design's play chip (#FEFA04 disc). The base .videogalry-playbtn rule is a
   full-photo dark overlay - every one of these declarations exists to beat it. */
.pc5-card .videogalry-playbtn{left:auto;top:auto;right:3cqw;bottom:2.5cqw;width:7.2cqw;height:7.2cqw;
    background:#FEFA04;border-radius:50%;line-height:normal;
    box-shadow:0 2px 10px rgba(0,0,0,.3)}
.pc5-card .videogalry-playbtn:hover{filter:brightness(1.04)}
.pc5-card .videogalry-playbtn img{max-width:none;width:2.3cqw;height:auto;margin-left:0.5cqw}
.pc5-media img.pc5-car{position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:center}
.pc5-mark{position:absolute;left:4.2cqw;bottom:2.5cqw;width:7.2cqw;height:7.2cqw;
    object-fit:contain;pointer-events:none}

/* ---- name (the old gray eyebrow line is gone - the badge on the photo replaces it) ---- */
/* One size for every card, Rami's call - the mockup's 10.05% suits its short name, but
   mixed sizes across the grid read as different designs. 6.8% is the largest that holds
   the fleet's longest name on one line. */
/* One size for literally every name - 5.2% is the largest at which even the fleet's
   40-character title holds a single line, so no card ever steps down. */
.pc5-name{font-family:'AntonV5',sans-serif;font-weight:400;font-size:5.2cqw;line-height:1;
    letter-spacing:.005em;text-transform:uppercase;color:#000;margin:2.8cqw 4.1cqw 0;
    /* The line box always stands the standard name height, so the rare extra-long name
       (rendered a step smaller) doesn't pull everything below it up a few pixels. */
    min-height:5.2cqw;display:flex;align-items:center;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc5-name a{overflow:hidden;text-overflow:ellipsis}
.pc5-name a{color:inherit;text-decoration:none}

/* ---- spec pills: outlined, content-sized ---- */
/* Scaled up ~1.5x from the file's own proportions - Rami found them too small to read. */
/* Three equal frames, per the boss's spec. */
.pc5-pills{display:flex;gap:1.2cqw;margin:0.98cqw 4.1cqw 0}
.pc5-pill{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:1.4cqw;
    height:5.6cqw;border:1px solid #D9DADD;border-radius:1.15cqw;padding:0 1cqw;
    font-size:2.55cqw;font-weight:400;color:#4F4F4F;white-space:nowrap;background:#fff}
.pc5-pill img{width:auto;flex:none}
.pc5-pill .i-seat{height:3.15cqw}
.pc5-pill .i-gear{height:3.1cqw}
.pc5-pill .i-petrol{height:3.2cqw}

/* ---- the offer panel: two zones split by a tall hairline, per Rami's reference ----
   LEFT: DAILY RATE RANGE title, FROM | TO figures, "A rate that fits your rental plans".
   RIGHT: gift chip + DIRECT BOOKING OFFER over an outlined GET MY EXACT RATE with the
   arrow in a yellow disc. Fixed height keeps every card's panel on the same lines. */
.pc5-panel{margin:1.17cqw 3.77cqw 0;border:1px solid #D9DADD;border-radius:2.86cqw;
    padding:1.7cqw 2cqw 1.5cqw 2.6cqw;height:19.6cqw;box-sizing:border-box;background:#F7F7F5;
    display:flex;align-items:stretch}
/* The rate zone hugs its content so the tall line sits close after / DAY*; the offer
   zone absorbs the remainder. */
.pc5-pleft{flex:0 0 auto;min-width:0;display:flex;flex-direction:column}
.pc5-ptitle{font-size:2.1cqw;font-weight:600;letter-spacing:.08em;color:#5C5C5C;
    text-transform:uppercase;line-height:1.2}
.pc5-prow{display:flex;align-items:flex-start;margin-top:1.1cqw}
.pc5-pcol{flex:none}
.pc5-pcol .t{display:block;font-size:1.75cqw;font-weight:500;letter-spacing:.06em;
    color:#8A8A8A;line-height:1.3}
.pc5-pcol .v{display:flex;align-items:baseline;gap:1cqw;white-space:nowrap;margin-top:0.5cqw}
.pc5-pcol .v i{font-style:normal;font-size:2.9cqw;font-weight:500;color:#303030;line-height:1}
.pc5-pcol .v b{font-weight:600;font-size:5.2cqw;color:#171717;line-height:1}
.pc5-day{font-size:2.3cqw;font-weight:500;color:#000;align-self:flex-end;
    margin:0 0 0.4cqw 1cqw;white-space:nowrap}
.pc5-pdiv{width:1px;background:#D9DADD;flex:none;align-self:stretch;margin:0 2.4cqw}
/* Two four-digit prices are the widest the row gets - a step smaller there, so the
   offer zone keeps room for its unwrapped label and full arrow. */
.pc5-panel--wide .pc5-pcol .v b{font-size:4.5cqw}
.pc5-panel--wide .pc5-pcol .v i{font-size:2.5cqw}
.pc5-panel--wide .pc5-day{font-size:2cqw}
.pc5-panel--wide .pc5-pdiv{margin:0 1.7cqw}
.pc5-panel--wide .pc5-pcol .v{gap:0.8cqw}
/* the tall line between the rate zone and the offer zone */
.pc5-zdiv{width:1px;background:#D9DADD;flex:none;align-self:stretch;margin:0 1.9cqw 0 1.3cqw}
.pc5-note{font-size:1.95cqw;font-weight:600;color:#8E8E8E;margin:1.1cqw 0 0;line-height:1.4}

/* The right zone takes the reference's share of the panel, so the middle holds only
   the drawn breathing room - not the row's leftover. */
/* The zone sizes itself to the offer line, and the button fills it - so the two start
   and end together, per Rami. */
/* The pair sits centred in the zone as one tight block - no space between them. */
.pc5-pright{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:stretch;
    justify-content:center;gap:1.3cqw}
/* Option 03 from Rami's sheet: a plain centred label over a white outlined button
   with a yellow accent bar on its left edge and a bare dark arrow. */
.pc5-offer{display:flex;align-items:center;justify-content:center}
.pc5-offer em{font-style:normal;font-weight:600;
    font-size:2.15cqw;letter-spacing:.12em;color:#2B3445;text-transform:uppercase;
    line-height:1;white-space:nowrap}
/* The arrow rides right beside the wording, not out at the far edge. */
.pc5-rate{position:relative;display:flex;align-items:center;justify-content:center;
    gap:1.5cqw;padding:0 1.8cqw 0 3.1cqw;height:6.4cqw;width:100%;box-sizing:border-box;
    min-width:0;background:#fff;border:1px solid #D9DADD;border-radius:1.6cqw;
    font-weight:600;font-size:2.15cqw;letter-spacing:.08em;
    color:#2B3445;text-transform:uppercase;text-decoration:none;white-space:nowrap;line-height:1;
    overflow:hidden}
.pc5-rate::before{content:'';position:absolute;left:0;top:9%;bottom:9%;width:1.2cqw;
    background:#FEF201;border-radius:0 0.8cqw 0.8cqw 0}
.pc5-rate:hover,.pc5-rate:focus{color:#2B3445;text-decoration:none;border-color:#c3c5c9}
.pc5-arr{flex:none;display:flex;align-items:center;justify-content:center}
.pc5-arr svg{width:2.6cqw;height:2.2cqw}
.pc5-rate svg path{stroke:#2B3445}

/* ---- rule + assurances ---- */
.pc5-hr{border:0;border-top:1px solid #D9DADD;margin:1.26cqw 4.24cqw 0}
.pc5-usps{display:flex;align-items:center;justify-content:space-between;
    margin:2.03cqw 7.2cqw 0 7.69cqw}
.pc5-usp{display:inline-flex;align-items:center;font-weight:600;color:#282828;white-space:nowrap}
/* The vertical hairlines between the assurances; space-between deals the leftover out
   in equal gaps so each line sits evenly between its neighbours. */
.pc5-vline{width:1px;height:3.2cqw;background:#D9DADD;flex:none}
.pc5-usp img{width:auto;flex:none}
.pc5-usp--a{font-size:2.17cqw}
.pc5-usp--a img{height:3.44cqw;margin-right:2.9cqw}
.pc5-usp--b{font-size:1.89cqw}
.pc5-usp--b img{height:3.63cqw;margin-right:1.9cqw}
.pc5-usp--c{font-size:1.97cqw}
.pc5-usp--c img{height:3.98cqw;margin-right:3.4cqw}

/* ---- actions ---- */
.pc5-actions{display:flex;gap:3.32cqw;margin:auto 4.48cqw 0;padding-top:2.07cqw}
.pc5-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:1.9cqw;
    height:7.03cqw;border-radius:2.06cqw;font-family:'PoppinsV5',sans-serif;font-weight:500;
    font-size:2.9cqw;color:#fff;text-decoration:none;line-height:1}
.pc5-btn:hover,.pc5-btn:focus{color:#fff;text-decoration:none;filter:brightness(1.06)}
.pc5-btn img{width:auto;flex:none}
.pc5-chat{background:#17812C}
.pc5-chat img{height:3.14cqw}
.pc5-call{background:#161616}
.pc5-call img{height:3.53cqw}

/* On phones the card stands alone at full width, and next to the legacy card it read
   short - Rami wants the old card's presence there. Taller photo, more air between
   sections; desktop columns keep the approved proportions untouched. */
@media (max-width:767px){
    /* Photo untouched - Rami's call: the frame keeps the design's own ratio, and
       the phone card gets its extra presence from the content sizes below. */
    /* ~15% up across the content, so the whole card carries the old card's
       presence on a phone. */
    .pc5-name{font-size:6cqw;min-height:6cqw;margin-top:3.6cqw}
    .pc5-pills{margin-top:1.8cqw;gap:1.5cqw}
    .pc5-pill{height:6.6cqw;font-size:3cqw;border-radius:1.35cqw}
    .pc5-pill .i-seat{height:3.7cqw}
    .pc5-pill .i-gear{height:3.65cqw}
    .pc5-pill .i-petrol{height:3.75cqw}
    .pc5-panel{margin-top:2.2cqw;height:22.5cqw;padding-top:2cqw}
    .pc5-ptitle{font-size:2.4cqw}
    .pc5-pcol .t{font-size:2.05cqw}
    .pc5-pcol .v i{font-size:3.3cqw}
    .pc5-pcol .v b{font-size:6cqw}
    .pc5-day{font-size:2.65cqw}
    .pc5-note{font-size:2.25cqw}
    .pc5-offer em{font-size:2.35cqw}
    .pc5-rate{height:7.4cqw;font-size:2.35cqw}
    .pc5-arr svg{width:3cqw;height:2.55cqw}
    .pc5-hr{margin-top:2.2cqw}
    .pc5-usps{margin-top:2.8cqw}
    .pc5-usp--a{font-size:2.5cqw}
    .pc5-usp--b{font-size:2.2cqw}
    .pc5-usp--c{font-size:2.3cqw}
    .pc5-usp--a img{height:3.95cqw}
    .pc5-usp--b img{height:4.15cqw}
    .pc5-usp--c img{height:4.55cqw}
    .pc5-vline{height:3.7cqw}
    .pc5-actions{padding-top:3cqw;gap:3.6cqw}
    .pc5-btn{height:8.2cqw;font-size:3.35cqw;border-radius:2.3cqw}
    .pc5-chat img{height:3.6cqw}
    .pc5-call img{height:4.05cqw}
    .pc5-card{padding-bottom:16px}
}