/* ============================================================
   style.css – Van Rental Website
   ============================================================ */

:root {
  --primary:   #1e3a8a;
  --secondary: #f59e0b;
  --dark:      #0f172a;
  --light-bg:  #f8fafc;
  --card-radius: 16px;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Sarabun', sans-serif;
  background: var(--light-bg);
  color: #334155;
}

/* ─── TOP BAR ─────────────────── */
.top-contact-bar {
  background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
  color: #000;
  font-weight: 700;
  font-size: 1rem;
  padding: 8px 0;
}
.top-contact-link { color: #000 !important; text-decoration: none; transition: .2s; }
.top-contact-link:hover { opacity: .75; }

/* ─── NAVBAR ──────────────────── */
.nav-menu-btn {
  cursor: pointer;
  color: rgba(0,0,0,.6);
  display: block;
  padding: .5rem 1rem;
  text-decoration: none;
  transition: color .15s;
}
.nav-menu-btn:hover { color: var(--primary); }
.btn-brand { background: var(--primary); color: #fff !important; border: none; }
.btn-brand:hover { background: var(--dark); }

/* ─── HERO CAROUSEL ───────────── */
.carousel-item {
  height: calc(1024px - 90px);
  background: #000;
}
.carousel-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(100%);
  object-position: center 10%;
}
.carousel-caption-right {
  position: absolute;
  right: 7%; top: 50%;
  transform: translateY(-50%);
  max-width: 560px;
  text-align: right;
  text-shadow: 2px 2px 8px rgba(0,0,0,.8);
  z-index: 10;
}
.carousel-caption-right h1 { font-size: 2.8rem; font-weight: 800; color: #fff; margin-bottom: 18px; }
.carousel-caption-right p  { font-size: 1.25rem; color: #f1f5f9; font-weight: 400; }

/* ─── QUICK CALL WIDGET ────────── */
.quick-call-widget {
  background: #fff;
  border-radius: 20px;
  margin-top: 10px;
  position: relative;
  z-index: 99;
  box-shadow: 0 15px 30px -5px rgba(0,0,0,.15);
  border: 2px solid var(--secondary);
}
.btn-hotline {
  background: #dc3545; color: #fff !important;
  font-size: 1.4rem; font-weight: 700;
  border-radius: 50px; padding: 12px 28px;
  box-shadow: 0 4px 15px rgba(220,53,69,.4);
  transition: .3s; animation: pulse-red 2s infinite;
  text-decoration: none;
}
.btn-hotline:hover { background: #bd2130; transform: scale(1.03); }
.btn-line-cta {
  background: #06c755; color: #fff !important;
  font-size: 1.4rem; font-weight: 700;
  border-radius: 50px; padding: 12px 28px;
  box-shadow: 0 4px 15px rgba(6,199,85,.4);
  transition: .3s; text-decoration: none;
}
.btn-line-cta:hover { background: #05a748; transform: scale(1.03); }

@keyframes pulse-red {
  0%   { box-shadow: 0 0 0 0 rgba(220,53,69,.7); }
  70%  { box-shadow: 0 0 0 12px rgba(220,53,69,0); }
  100% { box-shadow: 0 0 0 0 rgba(220,53,69,0); }
}

/* ─── PROMO A4 CARD ───────────────────── */
.promo-a4-card {
  position: relative; cursor: pointer; border-radius: 12px;
  overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,.15);
  transition: transform .3s, box-shadow .3s;
  background: #000;
  aspect-ratio: 1 / 1.414;
  max-width: 320px;
  margin: 0 auto;
}
.promo-a4-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}
.promo-a4-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: filter .3s;
}
.promo-a4-card:hover .promo-a4-img { filter: brightness(80%); }
.promo-a4-footer {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.82));
  color: #fff; padding: 28px 14px 12px;
  font-size: .9rem;
}
.promo-a4-zoom {
  position: absolute; top: 10px; right: 10px;
  background: rgba(0,0,0,.55); color: #fff;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; opacity: 0; transition: opacity .2s;
}
.promo-a4-card:hover .promo-a4-zoom { opacity: 1; }

/* ─── PROMO CARDS ─────────────────────── */
.promo-card {
  border: none; border-radius: var(--card-radius);
  overflow: hidden; transition: transform .3s;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1);
}
.promo-card:hover { transform: translateY(-6px); }

/* ─── VAN CARDS ───────────────── */
.van-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: var(--card-radius);
  overflow: hidden; transition: all .3s; height: 100%;
}
.van-card:hover {
  box-shadow: 0 10px 25px -5px rgba(30,58,138,.2);
  border-color: var(--primary);
}
.van-img-box {
  background: #f1f5f9; padding: 20px;
  text-align: center; position: relative;
}
.badge-seats {
  position: absolute; top: 15px; left: 15px;
  background: var(--dark); color: #fff;
  padding: 6px 12px; border-radius: 20px; font-size: .8rem;
}
.price-tag { font-size: 1.6rem; font-weight: 800; color: var(--primary); }
.btn-booking {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff; font-weight: 700;
  border: none; padding: 12px;
  border-radius: 10px; transition: .3s; width: 100%;
}
.btn-booking:hover {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: #fff; box-shadow: 0 4px 12px rgba(217,119,6,.3);
}

/* ─── BOOKING SECTION ─────────── */
.booking-section {
  background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%);
  border-radius: 24px;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.25);
}
.form-label { color: #e2e8f0; font-weight: 600; }
.form-control, .form-select { border: 1px solid #cbd5e1; padding: 12px; border-radius: 10px; }
.form-control:focus, .form-select:focus { border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(245,158,11,.3); }

/* ─── GALLERY ─────────────────── */
.gallery-card { position: relative; border-radius: 10px; overflow: hidden; }
.gallery-img {
  height: 220px; object-fit: cover;
  border-radius: 10px; transition: .3s; cursor: pointer; display: block;
}
.gallery-img:hover { transform: scale(1.04); filter: brightness(88%); }
.gallery-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.7));
  color: #fff; padding: 8px 12px;
  font-size: .85rem; font-weight: 600;
}

/* ─── TRAVEL CARD ─────────────── */
.travel-card { border-radius: var(--card-radius); overflow: hidden; transition: .3s; }
.travel-card:hover { transform: translateY(-5px); }
.travel-card img { height: 200px; object-fit: cover; }

/* ─── REVIEW BOX ──────────────── */
.review-box {
  background: #fff; padding: 25px;
  border-radius: 12px;
  border-left: 5px solid var(--secondary);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.06);
  transition: .3s;
}
.review-box:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,.1); }
.stars { color: var(--secondary); }

/* ─── FLOATING BUTTONS ────────── */
.floating-buttons {
  position: fixed; bottom: 28px; right: 28px;
  z-index: 999; display: flex; flex-direction: column; gap: 14px;
}
.float-btn {
  width: 62px; height: 62px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff !important; font-size: 26px;
  box-shadow: 0 8px 16px rgba(0,0,0,.3);
  transition: .3s; text-decoration: none;
}
.float-phone { background: #dc3545; animation: shake 1.8s infinite; }
.float-line  { background: #06c755; }
.float-btn:hover { transform: scale(1.12) rotate(5deg); }

@keyframes shake {
  0%,100% { transform: rotate(0); }
  10%,30%,50%,70%,90% { transform: rotate(-10deg); }
  20%,40%,60%,80%     { transform: rotate(10deg); }
}

/* ─── RESPONSIVE ──────────────── */
@media (max-width: 768px) {
  .carousel-item { height: 300px; }
  .carousel-caption-right h1 { font-size: 1.6rem; }
  .quick-call-widget { margin-top: 0; }
}