/* ==========================================================================
   AL-WAHHAB TRADING CO., LTD. — Brand Stylesheet
   Palette derived from company logo: deep navy + brass gold
   ========================================================================== */

:root{
  --navy-900:#0a1830;
  --navy-800:#0f2347;
  --navy-700:#173766;
  --navy-600:#204a86;
  --gold-500:#c69a3e;
  --gold-400:#d8b767;
  --gold-300:#ecd9a3;
  --cream:#f6f4ee;
  --paper:#fbfaf6;
  --ink:#16202e;
  --ink-soft:#5b6577;
  --line:#e4dfd0;
  --radius:2px;
  --serif: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*{box-sizing:border-box;}

body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
}

h1,h2,h3,h4,.display-font{
  font-family:var(--serif);
  color:var(--gold-400);
  font-weight:800;
  letter-spacing:-.01em;
}
h3,h4{ font-weight:700; }

a{ text-decoration:none; }

.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-500);
}

.btn-gold{
  background:linear-gradient(135deg, var(--gold-300) 0%, var(--gold-400) 50%, var(--gold-500) 100%);
  border:1px solid var(--gold-400);
  color:var(--navy-900);
  font-weight:700;
  letter-spacing:.03em;
  padding:.75rem 1.75rem;
  border-radius:var(--radius);
  transition:.2s ease;
}
.btn-gold:hover{
  background:linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
  color:var(--navy-900);
  box-shadow:0 10px 24px -12px rgba(198,154,62,.55);
}

.btn-outline-navy{
  background:transparent;
  border:1px solid rgba(255,255,255,.55);
  color:#fff;
  font-weight:600;
  letter-spacing:.03em;
  padding:.75rem 1.75rem;
  border-radius:var(--radius);
  transition:.2s ease;
}
.btn-outline-navy:hover{ background:rgba(255,255,255,.1); color:#fff; border-color:#fff; }

.btn-navy{
  background:linear-gradient(135deg, var(--gold-300) 0%, var(--gold-400) 50%, var(--gold-500) 100%);
  border:1px solid var(--gold-400);
  color:var(--navy-900);
  font-weight:700;
  padding:.7rem 1.5rem;
  border-radius:var(--radius);
  transition:.2s ease;
}
.btn-navy:hover{
  background:linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
  color:var(--navy-900);
  box-shadow:0 10px 24px -12px rgba(198,154,62,.55);
}

/* ---------- Top utility bar ---------- */
.topbar{
  background:var(--navy-900);
  color:var(--gold-300);
  font-size:.8rem;
  padding:.4rem 0;
  letter-spacing:.02em;
}
.topbar a{ color:var(--gold-300); }
.topbar a:hover{ color:#fff; }
.topbar-utils{ gap:.35rem; }
.topbar-util{ color:var(--gold-300); white-space:nowrap; }
.topbar-sep{ color:rgba(236,217,163,.35); margin:0 .1rem; }
.topbar-select{
  background:transparent;
  color:var(--gold-300);
  border:1px solid rgba(236,217,163,.4);
  border-radius:2px;
  font-size:.78rem;
  padding:.05rem .35rem;
}
.topbar-select option{ color:var(--navy-900); }

/* Google Translate widget — compact skin to match topbar */
#google_translate_element{ display:inline-flex; align-items:center; }
.goog-te-gadget{ font-family:var(--sans) !important; font-size:0 !important; color:transparent !important; }
.goog-te-gadget .goog-te-combo{
  font-size:.78rem !important;
  padding:.1rem .3rem;
  border-radius:2px;
  border:1px solid rgba(236,217,163,.4);
  background:var(--navy-900);
  color:var(--gold-300);
  max-width:120px;
}
.goog-logo-link, .goog-te-gadget span{ display:none !important; }
.goog-te-banner-frame{ display:none !important; }
body{ top:0 !important; }

/* ---------- Navbar ---------- */
.navbar-brand-wrap{ display:flex; align-items:center; gap:.65rem; }
.navbar-brand-wrap img.brand-logo-img{ height:150px; width:auto; display:block; }
.brand-word{
  font-family:var(--serif);
  font-weight:700;
  font-size:1.35rem;
  color:var(--navy-900);
  line-height:1;
}
.brand-tag{
  font-size:.62rem;
  letter-spacing:.18em;
  color:var(--gold-500);
  text-transform:uppercase;
  display:block;
}
@media (max-width:991px){
  .navbar-brand-wrap img.brand-logo-img{ height:96px; }
}
@media (max-width:575px){
  .navbar-brand-wrap img.brand-logo-img{ height:76px; }
}

.navbar-custom{
  background:#fff;
  border-bottom:1px solid var(--line);
  padding-top:.5rem;
  padding-bottom:.5rem;
}
.navbar-custom .nav-link{
  color:var(--navy-900);
  font-weight:600;
  font-size:.92rem;
  margin:0 .55rem;
  position:relative;
}
.navbar-custom .nav-link.active,
.navbar-custom .nav-link:hover{ color:var(--gold-500); }
.navbar-custom .nav-link.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-6px;
  height:2px;
  background:var(--gold-500);
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background:
    linear-gradient(120deg, rgba(10,24,48,.92) 10%, rgba(15,35,71,.86) 55%, rgba(10,24,48,.92) 100%),
    repeating-linear-gradient(115deg, rgba(198,154,62,.05) 0 2px, transparent 2px 40px);
  color:#fff;
  padding:6.5rem 0 5.5rem;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute;
  right:-10%; bottom:-30%;
  width:60%; height:140%;
  background:radial-gradient(circle at center, rgba(198,154,62,.14), transparent 65%);
  pointer-events:none;
}
.hero h1{
  color:var(--gold-400);
  font-size:clamp(2.3rem, 4.5vw, 3.6rem);
  line-height:1.08;
}
.hero h1 em{ color:var(--gold-400); font-style:normal; }
.hero p.lead{ color:#c9d2e2; max-width:560px; }
.hero-route{
  border-top:1px dashed rgba(255,255,255,.25);
  margin-top:3.2rem;
  padding-top:1.6rem;
}
.hero-stat{ display:flex; align-items:flex-start; gap:.75rem; }
.hero-stat .dot{
  width:34px; height:34px; flex:0 0 34px;
  border:1px solid var(--gold-400);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--gold-400);
  font-family:var(--serif);
  font-size:.95rem;
}
.hero-stat h6{ color:#fff; margin-bottom:.15rem; font-size:.92rem; font-weight:700; }
.hero-stat p{ color:#9fabc4; font-size:.82rem; margin:0; }

.hero-illustration{ width:100%; max-width:520px; height:auto; }
.hero-illustration-pulse{
  transform-origin:132px 320px;
  animation:hero-pulse 2.6s ease-out infinite;
}
@keyframes hero-pulse{
  0%   { r:10; opacity:.9; }
  100% { r:34; opacity:0; }
}

/* ---------- Search bar card ---------- */
.search-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 20px 45px -25px rgba(10,24,48,.35);
  padding:2rem;
  margin-top:-4.2rem;
  position:relative;
  z-index:5;
}
.search-card label{
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:.3rem;
}
.form-control, .form-select{
  border-radius:var(--radius);
  border:1px solid var(--line);
  padding:.65rem .8rem;
}
.form-control:focus, .form-select:focus{
  border-color:var(--gold-500);
  box-shadow:0 0 0 3px rgba(198,154,62,.18);
}

/* ---------- Section basics ---------- */
.section{ padding:5rem 0; }
.section-tight{ padding:3.5rem 0; }
.section-navy{ background:var(--navy-900); color:#e9ecf3; }
.section-navy h2{ color:var(--gold-400); }
.section-cream{ background:var(--cream); }
.divider-gold{
  width:56px; height:3px; background:var(--gold-500);
  margin:.9rem 0 1.4rem;
}

/* ---------- Feature / category cards ---------- */
.feature-card{
  background:#fff;
  border:1px solid var(--line);
  padding:2rem 1.6rem;
  border-radius:var(--radius);
  height:100%;
  transition:.2s ease;
}
.feature-card:hover{ border-color:var(--gold-500); transform:translateY(-4px); box-shadow:0 20px 40px -28px rgba(10,24,48,.35); }
.feature-card .num{
  font-family:var(--serif);
  color:var(--gold-500);
  font-size:1rem;
  letter-spacing:.08em;
}

/* ---------- Steps (How it works / Services) ---------- */
.step-card{ position:relative; padding-left:0; }
.step-num{
  font-family:var(--serif);
  font-size:2.6rem;
  color:var(--gold-300);
  line-height:1;
  -webkit-text-stroke:1px var(--gold-500);
  color:transparent;
}

/* ---------- Vehicle grid (listing page) ---------- */
.filter-panel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.5rem;
}
.filter-panel h6{
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--navy-900); font-weight:700; margin:1.1rem 0 .5rem;
}
.filter-panel h6:first-child{ margin-top:0; }

/* ---------- Vehicle detail page ---------- */
.detail-gallery-main{
  position:relative; border-radius:2px; overflow:hidden;
  border:1px solid var(--line); aspect-ratio:4/3; background:#eee;
}
.detail-gallery-main img{ width:100%; height:100%; object-fit:cover; }
.detail-gallery-thumbs{ display:flex; gap:.5rem; margin-top:.75rem; overflow-x:auto; padding-bottom:.25rem; }
.detail-thumb{
  width:84px; height:64px; object-fit:cover; border-radius:2px;
  border:2px solid transparent; cursor:pointer; opacity:.7; transition:.15s ease; flex-shrink:0;
}
.detail-thumb:hover{ opacity:1; }
.detail-thumb.active{ border-color:var(--gold-500); opacity:1; }
.detail-spec-row span{
  font-size:.85rem; color:var(--ink-soft); background:var(--cream);
  padding:.45rem .8rem; border-radius:4px;
}
.detail-price{ font-size:2.1rem; font-weight:800; color:var(--navy-900); font-family:var(--serif); }

.vehicle-card-link{ display:block; color:inherit; text-decoration:none; }
.vehicle-card-link:hover{ color:inherit; text-decoration:none; }
.vehicle-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  height:100%;
  transition:.2s ease;
}
.vehicle-card:hover{ box-shadow:0 22px 45px -28px rgba(10,24,48,.4); transform:translateY(-3px); }
.vehicle-card .img-wrap{ position:relative; aspect-ratio:4/3; overflow:hidden; background:#eee; }
.vehicle-card .img-wrap img{ width:100%; height:100%; object-fit:cover; }
.badge-cert{
  position:absolute; top:.6rem; left:.6rem;
  background:var(--navy-900); color:var(--gold-300);
  font-size:.65rem; font-weight:700; letter-spacing:.05em;
  padding:.3rem .55rem; border-radius:2px;
}
.badge-off{
  position:absolute; top:.6rem; right:.6rem;
  background:var(--gold-500); color:var(--navy-900);
  font-size:.65rem; font-weight:800; letter-spacing:.03em;
  padding:.3rem .55rem; border-radius:2px;
}
.vehicle-card .body{ padding:1rem 1.1rem 1.2rem; }
.vehicle-card .price{ color:var(--navy-900); font-family:var(--serif); font-weight:700; font-size:1.25rem; }
.vehicle-card .meta{ color:var(--ink-soft); font-size:.82rem; }
.vehicle-card .code{ color:#a9a190; font-size:.72rem; }

/* ---------- Brand chip grid ---------- */
.brand-chip{
  display:flex; align-items:center; justify-content:center;
  height:110px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  font-family:var(--serif); font-weight:700; font-size:1.05rem; color:var(--navy-900);
  letter-spacing:.02em;
  transition:.2s ease;
  overflow:hidden;
}
.brand-chip:hover{ border-color:var(--gold-500); box-shadow:0 14px 30px -20px rgba(10,24,48,.35); transform:translateY(-2px); }
.brand-chip.brand-chip-logo{ padding:1.1rem 1.3rem; }
.brand-chip.brand-chip-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}

/* ---------- Bank / account cards ---------- */
.bank-card{
  background:#fff;
  border:1px solid var(--line);
  border-top:3px solid var(--gold-500);
  border-radius:var(--radius);
  padding:2rem;
  height:100%;
}
.bank-card dt{ color:var(--ink-soft); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; margin-top:1rem; }
.bank-card dt:first-child{ margin-top:0; }
.bank-card dd{ color:var(--navy-900); font-weight:600; margin-bottom:0; }
.bank-note{
  background:var(--cream); border-left:3px solid var(--gold-500);
  padding:.9rem 1.1rem; font-size:.85rem; color:var(--ink-soft); margin-top:1.4rem;
}

/* ---------- Contact ---------- */
.contact-tile{
  display:flex; gap:1rem; align-items:flex-start;
  padding:1.2rem 0; border-bottom:1px solid var(--line);
}
.contact-tile:last-child{ border-bottom:none; }
.contact-icon{
  width:46px; height:46px; flex:0 0 46px;
  border:1px solid var(--gold-500); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--gold-500); font-size:1.1rem;
}

/* ---------- Footer ---------- */
.footer{ background:var(--navy-900); color:#aab4c8; padding:3.5rem 0 1.5rem; }
.footer h6{ color:#fff; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:1.1rem; }
.footer a{ color:#aab4c8; display:block; margin-bottom:.5rem; font-size:.9rem; }
.footer a:hover{ color:var(--gold-400); }
.footer .brand-word{ color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:2.2rem; padding-top:1.2rem; font-size:.8rem; color:#7c8aa5; }

/* ---------- Page header (inner pages) ---------- */
.page-header{
  background:var(--navy-900);
  color:#fff;
  padding:3.2rem 0;
  position:relative;
  background-image: repeating-linear-gradient(115deg, rgba(198,154,62,.06) 0 2px, transparent 2px 40px);
}
.page-header h1{ color:var(--gold-400); margin-bottom:.2rem; }
.breadcrumb-custom{ color:var(--gold-300); font-size:.85rem; }
.breadcrumb-custom a{ color:var(--gold-300); }
.breadcrumb-custom a:hover{ color:#fff; }

/* ---------- Utility ---------- */
.wave-rule{
  height:1px;
  background:repeating-linear-gradient(90deg, var(--gold-500) 0 8px, transparent 8px 16px);
}

@media (max-width:767px){
  .search-card{ margin-top:1.5rem; }
  .section{ padding:3.2rem 0; }
  
  .d-none {
    display: block !important;
}
}