:root{
  --primary: #667eea;
  --accent: #764ba2;
  --success: #28a745;
  --card-bg: #ffffff;
}

/* Hero layout */
.hero-section{
  background: linear-gradient(135deg, rgba(102,126,234,0.06), rgba(118,75,162,0.04));
  padding: 70px 0 100px;
}
.hero-content{position:relative;z-index:2;text-align:center}
.top-vehicle{width:150px;margin:0 auto 1.5rem;filter:drop-shadow(0 10px 30px rgba(0,0,0,0.12));border-radius:8px}
h1{font-size:2.4rem;font-weight:800;color:#111}
.subheading{color:#333;font-weight:600;margin-bottom:0px;max-width:820px;margin-left:auto;margin-right:auto}

/* CTA cards */
.action-buttons .col-lg-4{display:flex}
.cta-card{background:var(--card-bg);border-radius:14px;padding:1.6rem;box-shadow:0 12px 30px rgba(0,0,0,0.06);transition:transform .25s,box-shadow .25s;position:relative;width:100%}
.cta-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(0,0,0,0.08)}
.cta-icon{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;color:#fff;background:linear-gradient(135deg,var(--primary),var(--accent));font-weight:800;font-size:1.4rem}
.cta-icon svg{display:block;width:60%;height:auto}
.popular-badge{position:absolute;top:-10px;right:18px;background:linear-gradient(135deg,#ffc107,#ff8f00);color:#fff;padding:6px 10px;border-radius:14px;font-weight:700}

/* CTA icon animation and focus styles */
.cta-icon{transition:transform .22s cubic-bezier(.2,.9,.2,1),box-shadow .22s ease;will-change:transform}
.cta-card:hover .cta-icon{transform:translateY(-6px) scale(1.04);box-shadow:0 12px 28px rgba(0,0,0,0.08)}
.cta-icon svg{transition:transform .22s cubic-bezier(.2,.9,.2,1),opacity .18s linear}
.cta-card:hover .cta-icon svg{transform:translateY(-2px) scale(1.06);opacity:0.98}

/* keyboard focus for cards */
.cta-card:focus-within, .cta-card:focus {outline: none}
.cta-card:focus-within{box-shadow:0 0 0 4px rgba(102,126,234,0.12)}

/* ensure buttons show a clear focus state */
.btn:focus{outline:3px solid rgba(102,126,234,0.16);outline-offset:2px}
.feature-checkmarks{margin-top:0.8rem;color:#222;font-weight:700}
.feature-checkmarks .check-icon{color:var(--success);margin-right:.4rem}

/* per-item price note */
.per-item{margin:8px 0 12px;color:#222;font-weight:700;font-size:1rem}

/* small utility classes used by cardetails.php to replace inline styles */
.hero-title{font-size:2.4rem;margin-bottom:0.6rem}
.hero-title .highlight{color:var(--primary)}
.cta-links{margin-top:12px}
.cta-links a{color:var(--primary);text-decoration:underline}
.cta-card.outlined{border:2px solid rgba(0,0,0,0.04)}
.cta-icon.single{background:linear-gradient(135deg,#00bfa6,#00c851)}

/* spacing adjustments for cards */
.action-buttons .col-lg-4{padding-left:0.75rem;padding-right:0.75rem}
.pricing-section{margin-top:28px}
.pricing-grid .price-card{margin-bottom:18px;padding:18px;border-radius:12px;background:var(--card-bg);box-shadow:0 10px 24px rgba(0,0,0,0.05)}

/* Includes modal styles */
.includes-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1100}
.includes-modal[aria-hidden="true"]{display:none}
.includes-modal__overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(2px);opacity:1}
.includes-modal__dialog{background:var(--card-bg);border-radius:12px;max-width:760px;width:92%;box-shadow:0 30px 80px rgba(2,6,23,0.2);padding:18px;z-index:1110;transform:translateY(0);}
.includes-modal__header{display:flex;align-items:center;gap:16px;padding:18px;border-bottom:1px solid rgba(0,0,0,0.04);background:linear-gradient(90deg,rgba(102,126,234,0.03),rgba(118,75,162,0.02));border-top-left-radius:12px;border-top-right-radius:12px}
.includes-modal__icon{width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px}
.includes-modal__titles h3{margin:0;font-size:1.25rem}
.includes-modal__subtitle{color:#666;font-size:0.95rem;margin-top:4px}
.includes-modal__close{border:0;background:#fff;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(2,6,23,0.12);cursor:pointer;margin-left:auto}
.includes-modal__body{padding:14px 18px}
.includes-modal__content{max-height:72vh;overflow:auto;padding:6px 4px}
.includes-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:5px}
.includes-list li{display:flex;gap:12px;align-items:center;padding:10px;border-radius:8px;background:linear-gradient(180deg,rgba(0,0,0,0.01),transparent)}
.includes-list .iicon{color:#fff;background:var(--success);border:none;border-radius:50%;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;line-height:1;margin-top:0;box-shadow:0 4px 12px rgba(0,0,0,0.08)}
.includes-list .iicon svg{width:14px;height:14px;display:block}

.btn-outline{border:2px solid rgba(0,0,0,0.06);background:transparent;padding:10px 14px;border-radius:10px;color:#111}
.modal-sample{font-size:0.95rem;color:#444}

@media(max-width:768px){
  .includes-list{grid-template-columns:1fr;gap:0px}
  .includes-modal__dialog{width:96%;padding:8px}
  .includes-modal__header{padding:12px}
  .includes-modal__titles h3{font-size:20px}
}

/* prevent background when modal open */
.modal-open{overflow:hidden;height:100%}

/* When modal is open, ensure CTA/bundle area cannot scroll or receive pointer events */
.modal-open .action-buttons{overflow:hidden;pointer-events:none;touch-action:none;-webkit-overflow-scrolling:auto}
.modal-open .action-buttons .cta-card{pointer-events:none}

/* Ensure modal remains interactive */
.modal-open .includes-modal{pointer-events:auto}

/* Buttons */
.btn-primary-custom{background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);color:#fff;border-radius:12px;padding:12px 20px;display:inline-block;font-weight:800}
.btn-secondary-custom{background:linear-gradient(135deg,#ff6b6b,#ee5a24);color:#fff;border-radius:12px;padding:12px 20px;font-weight:800}
.btn-primary-custom-pay{background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);color:#fff;border-radius:10px;padding:10px 18px;display:inline-block;font-weight:600;font-size:15px;line-height:1.2;font-family:inherit}
.btn:hover{color: #fff;}
/* Spinner (used in payment modal) */
#spinner{display:none;margin-left:10px}
/* Trust & guarantee */
.trust-indicators-row{margin-top:20px}
.trust-number{font-size:1.5rem;font-weight:800;color:var(--primary)}
.guarantee-box{background:linear-gradient(135deg,var(--success),#20c997);color:#fff;padding:18px;border-radius:12px;margin-top:18px}

/* Urgency banner shown when there are important records for this vehicle */
.urgent-alert{background:linear-gradient(90deg,#ff5f6d,#ffc371);color:#fff;padding:10px 14px;border-radius:10px;display:inline-block;font-weight:700;margin-bottom:20px}
.urgent-alert a{color:#fff;text-decoration:underline;font-weight:800;margin-left:8px}
.icon{color:#ffc107}
.urgent-alert .icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;margin-right:6px;flex:0 0 14px;color:#fff}
.urgent-alert .icon svg{width:14px;height:14px;display:block}

/* Responsive tweaks */
@media(max-width:992px){
  .hero-section{padding:34px 0 36px}
  .top-vehicle{width:120px}
}
@media(max-width:576px){
  h1{font-size:1.6rem}
  .top-vehicle{width:140px}
  /* Compact CTA cards so three stack fit within mobile viewport without large scrolling */
  .action-buttons .col-lg-4{margin-bottom:6px}
  .action-buttons{gap:6px}
  .cta-card{padding:8px;border-radius:10px;box-shadow:0 6px 12px rgba(0,0,0,0.05)}
  .cta-icon{width:40px;height:40px;font-size:0.95rem;margin-bottom:6px}
  .cta-card h3{font-size:0.97rem;margin-bottom:2px}
  .cta-card h5{font-size:0.88rem;margin-bottom:4px}
  .per-item{font-size:0.92rem}
  .popular-badge{top:-6px;right:10px;padding:3px 7px;font-size:0.72rem}
  .cta-links{font-size:0.88rem;display:flex;gap:8px;justify-content:center;margin-top:8px}
  .hero-section{padding:28px 0 12px}
  /* Reduce spacing for guarantee box and footer elements so cards remain visible */
  .guarantee-box{margin-top:10px;padding:10px}
  /* Hide icon to free space on very small screens */
  .cta-icon{display:none !important}
  /* Tighter includes modal spacing on mobile */
  .includes-modal__dialog{padding:10px}
  .includes-modal__header{padding:2px;gap:8px}
  .includes-modal__body{padding:8px}
}

.reg-v {
    letter-spacing: 5px;
    max-height: 52px;
    background-color: #fff;
    margin-top: 20px;
    background-image: url(/images/ukreg.png);
    background-repeat: no-repeat;
    background-size: auto 100%, 100% auto;
    border-radius: 5px;   
    font-weight: 800;
    line-height: 52px;
    text-align: center;
    font-size: 24px;
    min-width: 200px;
    padding-left: 40px;
    box-shadow: 0 2px 10px #a2a1a1 !important;
}
.includes-link{color:var(--primary);text-decoration:none;cursor:pointer;font-weight:600}
.sample-link{color:var(--primary);text-decoration:none;cursor:pointer;font-weight:500}
/* Large registration pill shown in hero 
.reg-v{display:inline-flex;align-items:center;gap:10px;background:#0b63d6;color:#fff;padding:10px 14px;border-radius:10px;font-weight:800;font-size:1.25rem;box-shadow:0 8px 24px rgba(11,99,214,0.12);border:1px solid rgba(255,255,255,0.06)}
.reg-v::before{content:"🇬🇧";display:inline-flex;align-items:center;justify-content:center;width:34px;height:26px;border-radius:6px;background:linear-gradient(135deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02));box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);font-size:16px}

@media(max-width:576px){
  .reg-v{font-size:1rem;padding:8px 12px}
  .reg-v::before{width:30px;height:22px;font-size:14px}
}*/