/* Britcarcheck Marketplace – Phase 6 stage 3: premium automotive visuals. Loaded after bccm-premium.css. */
.bccm-wrap{--bccm-ease:cubic-bezier(.2,.7,.2,1)}

/* ---------- Buttons ---------- */
.bccm-wrap .bccm-btn--light{background:#fff;color:var(--bccm-navy);box-shadow:0 8px 24px rgba(0,0,0,.28)}
.bccm-wrap .bccm-btn--light:hover,.bccm-wrap .bccm-btn--light:focus-visible{background:#fff;color:var(--bccm-red);transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.38)}
.bccm-wrap .bccm-btn--outline{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.55);backdrop-filter:blur(6px)}
.bccm-wrap .bccm-btn--outline:hover,.bccm-wrap .bccm-btn--outline:focus-visible{background:#fff;color:var(--bccm-navy);border-color:#fff;transform:translateY(-2px)}
.bccm-wrap .bccm-btn .bccm-icon{transition:transform .25s var(--bccm-ease)}
.bccm-wrap .bccm-btn:hover .bccm-icon{transform:translateX(3px)}

/* ---------- Full-width photo hero ---------- */
.bccm-hero--photo{display:flex;align-items:center;min-height:clamp(560px,84vh,840px);background:#04112a}
.bccm-hero--photo .bccm-hero__inner{width:100%}
.bccm-hero__bg{position:absolute;inset:0;overflow:hidden}
.bccm-hero__slide{position:absolute;inset:0;opacity:0;animation:bccm-slide calc(var(--n,4) * 6s) infinite;animation-delay:calc(var(--i,0) * 6s);will-change:opacity,transform}
.bccm-hero__slide:first-child{opacity:1}
.bccm-wrap .bccm-hero__img{width:100%;height:100%;object-fit:cover}
@keyframes bccm-slide{0%{opacity:0;transform:scale(1.03)}4%{opacity:1}25%{opacity:1}29%{opacity:0}100%{opacity:0;transform:scale(1.11)}}
.bccm-hero__bg--1 .bccm-hero__slide,.bccm-hero__bg--1 .bccm-hero__slide:first-child{animation:none;opacity:1}
.bccm-hero__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,17,42,.72) 0%,rgba(4,17,42,.5) 38%,rgba(4,17,42,.88) 100%),radial-gradient(900px 420px at 50% 0%,rgba(255,45,45,.18),transparent 70%)}
.bccm-hero--photo .bccm-hero__glow{opacity:.55;mix-blend-mode:screen}
.bccm-hero--photo .bccm-h1{text-shadow:0 4px 30px rgba(0,0,0,.55)}
.bccm-hero--photo .bccm-lead{color:rgba(255,255,255,.9);text-shadow:0 2px 16px rgba(0,0,0,.5)}
.bccm-hero__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:0 auto 26px}
.bccm-credit{position:absolute;right:16px;bottom:10px;z-index:2;font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);pointer-events:none}
.bccm-hero--photo .bccm-hero__inner{animation:bccm-rise .9s var(--bccm-ease) both}
@keyframes bccm-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ---------- Category cards ---------- */
.bccm-cats{gap:20px}
.bccm-wrap .bccm-cat--photo{position:relative;isolation:isolate;overflow:hidden;min-height:230px;padding:22px;justify-content:flex-end;gap:4px;border-radius:20px;background:#04112a;box-shadow:0 14px 34px rgba(8,28,61,.2);transition:transform .35s var(--bccm-ease),box-shadow .35s var(--bccm-ease)}
.bccm-wrap .bccm-cat--photo:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(8,28,61,.34)}
.bccm-cat__media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.bccm-cat__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,17,42,.05) 20%,rgba(4,17,42,.88) 100%)}
.bccm-wrap .bccm-cat__img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--bccm-ease)}
.bccm-cat--photo:hover .bccm-cat__img{transform:scale(1.09)}
.bccm-cat__media--art{background:radial-gradient(420px 260px at 90% 0%,rgba(255,45,45,.34),transparent 65%),linear-gradient(150deg,#081c3d,#0d2a57 60%,#04112a)}
.bccm-cat__media--art::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 2px,transparent 2px 9px)}
.bccm-cat__big{position:absolute;right:-14px;top:10px;color:rgba(255,255,255,.14);transition:transform .8s var(--bccm-ease),color .4s}
.bccm-cat__big .bccm-icon{width:170px;height:170px;stroke-width:1.1}
.bccm-cat--photo:hover .bccm-cat__big{transform:translateX(-8px) scale(1.08);color:rgba(255,45,45,.4)}
.bccm-wrap .bccm-cat--photo .bccm-cat__icon{margin-bottom:auto;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;font-size:1.4rem;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(8px)}
.bccm-wrap .bccm-cat--photo .bccm-cat__name{font-size:1.35rem;font-weight:800;color:#fff;letter-spacing:-.01em}
.bccm-wrap .bccm-cat--photo .bccm-cat__count{font-size:.85rem;color:rgba(255,255,255,.75)}
.bccm-cat__go{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:.85rem;font-weight:700;color:#fff;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s var(--bccm-ease)}
.bccm-cat--photo:hover .bccm-cat__go,.bccm-cat--photo:focus-visible .bccm-cat__go{opacity:1;transform:none}
@media (hover:none){.bccm-cat__go{opacity:1;transform:none}}

/* ---------- Listing cards ---------- */
.bccm-wrap .bccm-card{border-radius:18px;box-shadow:0 8px 26px rgba(8,28,61,.1)}
.bccm-wrap .bccm-card:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(8,28,61,.22);border-color:rgba(255,45,45,.4)}
.bccm-wrap .bccm-card__media{aspect-ratio:16/10;background:#04112a}
.bccm-wrap .bccm-card__img{width:100%;height:100%;object-fit:cover}
.bccm-card:hover .bccm-card__img{transform:scale(1.07)}
.bccm-card__photos{position:absolute;left:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:.75rem;font-weight:700;color:#fff;background:rgba(5,7,13,.62);backdrop-filter:blur(4px)}
.bccm-card__photos .bccm-icon{width:14px;height:14px}
.bccm-card__make{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bccm-muted)}
.bccm-wrap .bccm-card__price{font-size:1.5rem}
.bccm-card__chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.bccm-card__chips li{padding:3px 10px;border-radius:999px;font-size:.78rem;font-weight:600;color:var(--bccm-navy);background:#eef2f9}
.bccm-card__loc{display:flex;align-items:center;gap:5px;font-size:.88rem;color:var(--bccm-muted)}

/* ---------- Dark featured section ---------- */
.bccm-wrap .bccm-section--dark{position:relative;background-color:#050b1a;background-image:radial-gradient(900px 420px at 88% -8%,rgba(255,45,45,.22),transparent 60%),radial-gradient(700px 420px at 0% 108%,rgba(58,120,255,.16),transparent 60%),repeating-linear-gradient(45deg,rgba(255,255,255,.022) 0 2px,transparent 2px 7px)}
.bccm-section--dark .bccm-container{position:relative}
.bccm-wrap .bccm-section--dark .bccm-h2,.bccm-wrap .bccm-section--dark .bccm-h3{color:#fff}
.bccm-wrap .bccm-section--dark .bccm-link{color:#fff}
.bccm-wrap .bccm-section--dark .bccm-link:hover{color:var(--bccm-red)}
.bccm-wrap .bccm-empty--dark{padding:46px 20px;color:#fff;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:22px}
.bccm-wrap .bccm-empty--dark .bccm-text{color:rgba(255,255,255,.75)}
.bccm-wrap .bccm-empty--dark .bccm-empty__icon{color:var(--bccm-red);font-size:2.4rem}

/* ---------- Sell your vehicle banner ---------- */
.bccm-sell{position:relative;isolation:isolate;overflow:hidden;border-radius:26px;color:#fff;background:linear-gradient(135deg,#04112a,#0d2a57);box-shadow:0 24px 60px rgba(4,17,42,.35)}
.bccm-sell__bg{position:absolute;inset:0;z-index:-2}
.bccm-wrap .bccm-sell__img{width:100%;height:100%;object-fit:cover;object-position:60% 60%;transform:scale(1.02);transition:transform 1.2s var(--bccm-ease)}
.bccm-sell:hover .bccm-sell__img{transform:scale(1.07)}
.bccm-sell__shade{position:absolute;inset:0;z-index:-1;background:radial-gradient(600px 300px at 0% 0%,rgba(255,45,45,.28),transparent 65%),linear-gradient(95deg,rgba(4,17,42,.96) 0%,rgba(4,17,42,.84) 48%,rgba(4,17,42,.3) 100%)}
.bccm-sell__inner{max-width:700px;padding:clamp(28px,5vw,64px)}
.bccm-eyebrow--light{color:#ff7a7a}
.bccm-sell .bccm-text{margin-top:10px;max-width:540px}
.bccm-sell__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:26px 0 0;padding:0;list-style:none;counter-reset:none}
.bccm-wrap .bccm-sell__steps li{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px;border-radius:16px;font-size:.9rem;font-weight:600;line-height:1.35;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);transition:transform .3s var(--bccm-ease),background .3s}
.bccm-wrap .bccm-sell__steps li:hover{transform:translateY(-4px);background:rgba(255,255,255,.14)}
.bccm-sell__num{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:.75rem;font-weight:800;background:var(--bccm-red);box-shadow:0 0 14px rgba(255,45,45,.6)}
.bccm-sell__ico{color:#ff9a9a;font-size:1.3rem}
.bccm-sell__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.bccm-sell--compact .bccm-sell__inner{padding:clamp(22px,4vw,38px)}
.bccm-sell--compact .bccm-sell__actions{margin-top:18px}

/* ---------- Subtle animation: staggered reveal ---------- */
.bccm-js .bccm-grid>.bccm-reveal:nth-child(3n+2),.bccm-js .bccm-cats>.bccm-reveal:nth-child(2){transition-delay:.08s}
.bccm-js .bccm-grid>.bccm-reveal:nth-child(3n+3),.bccm-js .bccm-cats>.bccm-reveal:nth-child(3){transition-delay:.16s}
.bccm-js .bccm-cats>.bccm-reveal:nth-child(4){transition-delay:.24s}

/* ---------- Vehicle gallery ---------- */
.bccm-wrap .bccm-gal__stage{border-radius:22px;border:0;background:#04112a;box-shadow:0 18px 44px rgba(8,28,61,.2);cursor:zoom-in}
.bccm-wrap .bccm-gal__stage--empty{display:block;cursor:default}
.bccm-wrap .bccm-gal__img{width:100%;height:100%;object-fit:cover}
.bccm-gal__slide.is-active{animation:bccm-fadein .45s ease both}
@keyframes bccm-fadein{from{opacity:0;transform:scale(1.015)}to{opacity:1;transform:none}}
.bccm-wrap .bccm-gal__nav{z-index:2;background:rgba(5,7,13,.62);backdrop-filter:blur(6px);cursor:pointer;transition:background .2s,transform .2s}
.bccm-wrap .bccm-gal__nav:hover{transform:translateY(-50%) scale(1.08)}
.bccm-wrap .bccm-gal__count{position:absolute;right:12px;bottom:12px;z-index:2;padding:4px 12px;border-radius:999px;font-size:.8rem;font-weight:700;color:#fff;background:rgba(5,7,13,.68);backdrop-filter:blur(6px)}
.bccm-wrap .bccm-gal__zoom{position:absolute;top:12px;right:12px;z-index:2;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;color:#fff;background:rgba(5,7,13,.62);backdrop-filter:blur(6px);cursor:pointer;transition:background .2s}
.bccm-wrap .bccm-gal__zoom:hover{background:var(--bccm-red)}
.bccm-wrap .bccm-gal__thumbs{gap:10px;margin-top:12px}
.bccm-wrap .bccm-gal__thumb{width:96px;height:70px;border-radius:12px}
.bccm-gal__note{margin:8px 2px 0;font-size:.8rem;color:var(--bccm-muted)}

/* ---------- Full-screen photo viewer (appended to <body>) ---------- */
.bccm-lb{position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center;padding:56px 16px 24px;background:rgba(3,6,14,.95);animation:bccm-fadein .25s ease both}
.bccm-lb__img{max-width:100%;max-height:100%;object-fit:contain;border-radius:12px;box-shadow:0 20px 70px rgba(0,0,0,.6)}
.bccm-lb button{position:absolute;display:grid;place-items:center;width:46px;height:46px;padding:0;border:0;border-radius:50%;font:inherit;font-size:1.8rem;line-height:1;color:#fff;background:rgba(255,255,255,.14);cursor:pointer;transition:background .2s}
.bccm-lb button:hover,.bccm-lb button:focus-visible{background:#ff2d2d;outline:0}
.bccm-lb__close{top:12px;right:12px}
.bccm-lb__prev{left:12px;top:50%;margin-top:-23px}
.bccm-lb__next{right:12px;top:50%;margin-top:-23px}
.bccm-lb__count{position:absolute;top:22px;left:20px;font:600 .85rem/1 -apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#fff;opacity:.8}

/* ---------- Responsive ---------- */
@media (max-width:900px){
.bccm-sell__steps{grid-template-columns:1fr}
.bccm-wrap .bccm-sell__steps li{flex-direction:row;align-items:center}
.bccm-sell__shade{background:radial-gradient(500px 260px at 0% 0%,rgba(255,45,45,.28),transparent 65%),linear-gradient(180deg,rgba(4,17,42,.9),rgba(4,17,42,.82))}
}
@media (max-width:600px){
.bccm-hero--photo{min-height:0;padding-top:48px;padding-bottom:48px}
.bccm-hero__actions{flex-direction:column;align-items:stretch}
.bccm-wrap .bccm-cat--photo{min-height:170px;padding:16px;border-radius:16px}
.bccm-cat__big .bccm-icon{width:110px;height:110px}
.bccm-wrap .bccm-cat--photo .bccm-cat__name{font-size:1.1rem}
.bccm-wrap .bccm-gal__thumb{width:76px;height:58px}
.bccm-wrap .bccm-sell{border-radius:20px}
}

/* ---------- Reduced motion: keep the first hero photo visible ---------- */
@media (prefers-reduced-motion:reduce){
.bccm-hero__slide:first-child{opacity:1!important}
.bccm-hero__slide{transform:none!important}
.bccm-cat__go{opacity:1;transform:none}
.bccm-lb{animation:none}
}
