/* ===== Top Cars Minicab – UI/UX fixes (Nov 2026) ===== */

/* 1) Long dropdowns (Airport Transfer / Main Cover Area): 2 columns, compact, scrollable */
@media (min-width: 992px) {
  .main-menu ul.sub-menu {
    min-width: 260px;
    padding: 14px 16px !important;
    max-height: 70vh;
    overflow-y: auto;
    border-top: 3px solid #FFC107;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 14px 40px rgba(0,0,0,.15);
  }
  .main-menu ul.sub-menu li {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #f1f1f1;
  }
  .main-menu ul.sub-menu li a {
    display: block;
    font-size: 13px !important;
    line-height: 1.35 !important;
    padding: 9px 6px !important;
    text-transform: capitalize;
    letter-spacing: .2px;
    transition: background .2s, color .2s, padding .2s;
  }
  .main-menu ul.sub-menu li a:hover {
    background: #fff8e1;
    color: #000 !important;
    padding-left: 12px !important;
  }
  .main-menu ul.sub-menu li a:before { display: none !important; }

  /* only long menus (10+ items) become 2 columns */
  .main-menu ul.sub-menu:has(> li:nth-child(10)) {
    width: min(640px, calc(100vw - 24px)) !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
  }
  .main-menu ul.sub-menu li a { white-space: normal !important; }
}

/* 2) Header: stop the menu wrapping into two lines on laptops / small desktops */
@media (min-width: 992px) and (max-width: 1299px) {
  .main-menu > ul > li { margin-right: 10px !important; }
  .main-menu > ul > li > a { font-size: 13px !important; }
}

/* 3) Floating buttons: smaller, tidy, never cover text on mobile */
.floating-call, .floating-whatsapp {
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
@media (max-width: 767px) {
  .floating-call, .floating-whatsapp {
    width: 48px !important; height: 48px !important; left: 12px !important;
  }
  .floating-call { bottom: 76px !important; }
  .floating-whatsapp { bottom: 18px !important; }
  .floating-call i, .floating-whatsapp i { font-size: 20px !important; }
  .scroll-top { right: 14px !important; bottom: 140px !important; width: 42px !important; height: 42px !important; }
  body { padding-bottom: 10px; }
}

/* 4) Headings: better sizes on mobile */
@media (max-width: 767px) {
  .elementor h2, .sec-title, h2.sec-title { font-size: 28px !important; line-height: 1.25 !important; }
  .page--content h1, .breadcumb-title { font-size: 28px !important; line-height: 1.25 !important; }
  .page--content h2 { font-size: 22px !important; line-height: 1.3 !important; }
}

/* 5) Airport price tables: clearer, branded, zebra rows */
.page--content table, .elementor table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0;
  border: 1px solid #eee !important;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,.05);
  margin-bottom: 30px;
}
.page--content table th, .elementor table th,
.page--content table tr:first-child td strong {
  background: #1b1b1b;
  color: #fff;
}
.page--content table th, .elementor table th { padding: 12px 16px !important; border: 0 !important; }
.page--content table td, .elementor table td { padding: 11px 16px !important; border: 0 !important; border-top: 1px solid #f0f0f0 !important; }
.page--content table tbody tr:nth-child(even) td, .elementor table tbody tr:nth-child(even) td { background: #fafafa; }
.page--content table tbody tr:hover td, .elementor table tbody tr:hover td { background: #fff8e1; }
.page--content table td:last-child, .elementor table td:last-child { font-weight: 700; color: #1b1b1b; white-space: nowrap; }
@media (max-width: 575px) {
  .page--content table td, .page--content table th { padding: 9px 10px !important; font-size: 14px; }
}

/* 6) Blog/inner page content: comfortable reading */
.page--content p, .page--content li { line-height: 1.75; }
.page--content img { border-radius: 10px; height: auto; }
.page--content h2, .page--content h3 { margin-top: 28px; margin-bottom: 12px; }

/* 7) Contact boxes: long email / address no longer cut off */
.contact-box_link, .contact-box_link a { word-break: break-word; overflow-wrap: anywhere; font-size: 16px; }

/* 8) Fleet & service cards: equal height, hover lift */
.taxi-card, .service-card, .contact-box { transition: transform .25s, box-shadow .25s; }
.taxi-card:hover, .service-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.10); }

/* 9) Fleet slider on mobile: no half-cut side cards */
@media (max-width: 767px) {
  .swiper { overflow: hidden !important; }
}

/* 10) Booking form: bigger tap targets + focus state */
.elementor input, .elementor select, .elementor textarea { min-height: 46px; }
input:focus, select:focus, textarea:focus { outline: 2px solid #FFC107 !important; outline-offset: 1px; }

/* 11) Buttons: consistent hover */
.th-btn, .elementor-button { transition: transform .2s, box-shadow .2s; }
.th-btn:hover, .elementor-button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255,193,7,.35); }

/* 12) Promo popup: show only once per visitor (JS adds this class on later visits) */
html.tc-popup-seen #topcarsModalOverlay { display: none !important; }

/* ===== 13) Professional dropdown (mega-menu style) – v1.1 ===== */
@media (min-width: 992px) {
  .main-menu ul.sub-menu.tc-menu {
    background: #fff !important;
    border: 0 !important;
    border-top: 3px solid #FFC107 !important;
    border-radius: 0 0 14px 14px !important;
    box-shadow: 0 24px 60px rgba(17,17,17,.18) !important;
    padding: 10px 0 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    width: 340px !important;
    min-width: 0 !important;
    display: block !important;
  }
  .main-menu ul.sub-menu.tc-menu.tc-mega {
    width: min(780px, calc(100vw - 40px)) !important;
    left: auto !important;
    right: -20px !important;   /* opens towards the left */
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    column-gap: 0;
  }
  /* header */
  .main-menu ul.sub-menu.tc-menu > li.tc-head { display: none !important;
    grid-column: 1 / -1;
    border: 0 !important;
    background: #1b1b1b;
    padding: 16px 22px !important;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
  }
  .tc-head .tc-head-title { color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .3px; line-height: 1.2; }
  .tc-head .tc-head-sub { color: #bdbdbd; font-size: 12px; font-weight: 400; margin-top: 3px; line-height: 1.3; }
  .tc-head .tc-head-badge {
    background: #FFC107; color: #1b1b1b; font-size: 11px; font-weight: 700;
    padding: 5px 10px; border-radius: 30px; white-space: nowrap; letter-spacing: .3px;
  }
  /* items */
  .main-menu ul.sub-menu.tc-menu > li.tc-item {
    border: 0 !important; margin: 0 !important; padding: 0 !important;
  }
  .main-menu ul.sub-menu.tc-menu.tc-mega > li.tc-item { padding: 0 6px !important; }
  .main-menu ul.sub-menu.tc-menu > li.tc-head + li.tc-item, .main-menu ul.sub-menu.tc-menu.tc-mega > li.tc-head + li.tc-item + li.tc-item { margin-top: 8px !important; }
  .main-menu ul.sub-menu.tc-menu > li.tc-item > a {
    display: flex !important; align-items: center; gap: 12px;
    padding: 7px 10px !important; margin: 1px 6px;
    border-radius: 8px;
    font-size: 13.5px !important; font-weight: 500 !important;
    line-height: 1.3 !important; letter-spacing: 0 !important;
    text-transform: none !important; white-space: normal !important;
    color: #2b2b2b !important;
    transition: background .18s, color .18s, transform .18s;
  }
  .main-menu ul.sub-menu.tc-menu > li.tc-item > a:before { display: none !important; }
  .main-menu ul.sub-menu.tc-menu > li.tc-item > a .tc-ico {
    flex: 0 0 28px; width: 28px; height: 28px; border-radius: 8px;
    background-color: #FFF6D6;
    background-position: center;
    background-size: 16px 16px;
    background-repeat: no-repeat;
    transition: background-color .18s;
  }
  .tc-ico-plane { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231b1b1b'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E"); }
  .tc-ico-ship { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231b1b1b'%3E%3Cpath d='M3 18l2 3h14l2-3H3zm2-2h14l-2-6h-4V6h-2v4H7l-2 6z'/%3E%3C/svg%3E"); }
  .tc-ico-train { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231b1b1b'%3E%3Cpath d='M12 2C8 2 4 2.5 4 6v9.5A3.5 3.5 0 0 0 7.5 19L6 20.5v.5h2.2l2-2h3.6l2 2H18v-.5L16.5 19a3.5 3.5 0 0 0 3.5-3.5V6c0-3.5-4-4-8-4zM7.5 17a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm3.5-7H6V6h5v4zm2 0V6h5v4h-5zm3.5 7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z'/%3E%3C/svg%3E"); }
  .tc-ico-car { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231b1b1b'%3E%3Cpath d='M18.9 6c-.2-.6-.8-1-1.4-1h-11c-.7 0-1.2.4-1.4 1L3 12v8c0 .6.4 1 1 1h1c.6 0 1-.4 1-1v-1h12v1c0 .6.4 1 1 1h1c.6 0 1-.4 1-1v-8l-2.1-6zM6.5 16a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm11 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM5 11l1.5-4.5h11L19 11H5z'/%3E%3C/svg%3E"); }
  .tc-ico-pin { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231b1b1b'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"); }
  .main-menu ul.sub-menu.tc-menu > li.tc-item > a .tc-arrow {
    margin-left: auto; opacity: 0; transform: translateX(-4px);
    color: #c79200; font-weight: 700; transition: opacity .18s, transform .18s;
  }
  .main-menu ul.sub-menu.tc-menu > li.tc-item > a:hover,
  .main-menu ul.sub-menu.tc-menu > li.tc-item.current-menu-item > a {
    background: #FFF8E1 !important; color: #111 !important; padding-left: 12px !important;
  }
  .main-menu ul.sub-menu.tc-menu > li.tc-item > a:hover .tc-ico { background-color: #FFC107; }
  .main-menu ul.sub-menu.tc-menu > li.tc-item > a:hover .tc-arrow { opacity: 1; transform: none; }
  /* footer CTA */
  .main-menu ul.sub-menu.tc-menu > li.tc-foot {
    grid-column: 1 / -1;
    border: 0 !important; border-top: 1px solid #f0f0f0 !important;
    margin-top: 8px !important; padding: 12px 22px !important;
    background: #fafafa;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
  }
  .main-menu ul.sub-menu.tc-menu:not(.tc-mega) > li.tc-foot { padding: 12px 16px !important; }
  .main-menu ul.sub-menu.tc-menu:not(.tc-mega) .tc-foot-text { font-size: 12px !important; }
  .tc-foot .tc-foot-text { font-size: 13px; color: #555; line-height: 1.3; }
  .tc-foot .tc-foot-text b { color: #1b1b1b; }
  .main-menu ul.sub-menu.tc-menu > li.tc-foot > a.tc-foot-btn {
    background: #FFC107 !important; color: #1b1b1b !important;
    font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important;
    padding: 10px 16px !important; border-radius: 30px; white-space: nowrap;
    text-transform: none !important; margin: 0 !important;
    transition: background .18s, transform .18s;
  }
  .main-menu ul.sub-menu.tc-menu > li.tc-foot > a.tc-foot-btn:hover { background: #1b1b1b !important; color: #fff !important; transform: translateY(-1px); }
  .main-menu ul.sub-menu.tc-menu > li.tc-foot > a.tc-foot-btn:before { display: none !important; }
}

/* ===== 14) Mobile menu: wider, clean, title-case, call button ===== */
@media (max-width: 991px) {
  .th-menu-wrapper .th-menu-area {
    width: min(340px, 86vw) !important;
    max-width: none !important;
    box-shadow: 10px 0 40px rgba(0,0,0,.25);
    display: flex !important; flex-direction: column;
  }
  .th-mobile-menu { flex: 1 1 auto; overflow-y: auto; padding-bottom: 10px; }
  .th-mobile-menu ul li { border-bottom: 1px solid #f1f1f1 !important; }
  .th-mobile-menu > ul > li > a {
    font-size: 15px !important; font-weight: 600 !important; color: #1b1b1b !important;
    text-transform: none !important; padding: 13px 44px 13px 4px !important; line-height: 1.3 !important;
  }
  .th-mobile-menu > ul > li.th-active > a { color: #c79200 !important; }
  .th-mobile-menu ul.sub-menu {
    background: #fafafa; border-left: 3px solid #FFC107; margin: 0 0 10px 4px !important;
    padding: 4px 0 !important; border-radius: 0 8px 8px 0;
  }
  .th-mobile-menu ul.sub-menu li { border-bottom: 0 !important; }
  .th-mobile-menu ul.sub-menu li a {
    font-size: 14px !important; font-weight: 500 !important; color: #333 !important;
    text-transform: none !important; padding: 9px 12px !important; line-height: 1.35 !important;
    display: block;
  }
  .th-mobile-menu ul.sub-menu li a:before { display: none !important; }
  .th-mobile-menu ul.sub-menu li a:active { background: #FFF8E1; }
  .th-mobile-menu .th-mean-expand {
    width: 32px !important; height: 32px !important; border-radius: 8px !important;
    background: #FFF6D6 !important;
  }
  /* call + whatsapp buttons inside the menu */
  .tc-mobile-cta {
    display: flex; gap: 10px; padding: 14px 16px 18px; border-top: 1px solid #eee; background: #fff;
  }
  .tc-mobile-cta a {
    flex: 1; text-align: center; padding: 12px 8px; border-radius: 30px;
    font-size: 14px; font-weight: 700; line-height: 1; text-decoration: none !important;
  }
  .tc-mobile-cta .tc-call { background: #FFC107; color: #1b1b1b !important; }
  .tc-mobile-cta .tc-wa { background: #25D366; color: #fff !important; }
  /* hide floating buttons / chat while the menu is open */
  body:has(.th-menu-wrapper.th-body-visible) .floating-call,
  body:has(.th-menu-wrapper.th-body-visible) .floating-whatsapp,
  body:has(.th-menu-wrapper.th-body-visible) .scroll-top { display: none !important; }
}

/* ===== 15) Tablet (600–1024px) ===== */
@media (min-width: 600px) and (max-width: 991px) {
  /* booking form: 2 x 2 grid instead of one long column */
  .horizontal-booking .form-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px 18px;
    align-items: end;
  }
  .horizontal-booking .form-row > .form-group { width: auto !important; max-width: none !important; margin-bottom: 8px !important; }
  .horizontal-booking .form-row > .form-group:last-child { grid-column: 1 / -1; text-align: center; margin-top: 6px !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  /* floating buttons a bit smaller on tablets */
  .floating-call, .floating-whatsapp { width: 52px !important; height: 52px !important; left: 14px !important; }
  .floating-call { bottom: 82px !important; }
  .floating-whatsapp { bottom: 20px !important; }
  .scroll-top { right: 16px !important; bottom: 140px !important; }
  /* section headings */
  .elementor h2 { line-height: 1.25 !important; }
}
/* Google map never wider than the screen */
.elementor-widget-google_maps .elementor-custom-embed { overflow: hidden; max-width: 100%; }

/* ===== 16) Mobile menu: "View All" link ===== */
@media (max-width: 991px) {
  .th-mobile-menu ul.sub-menu li.tc-view-all a { font-weight: 700 !important; color: #c79200 !important; }
}

/* ===== 17) Home hero: H1, description, dark overlay ===== */
.tc-hero { position: relative; }
.tc-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.45) 100%);
}
.tc-hero > .e-con-inner { position: relative; z-index: 1; }
.tc-hero-text { text-align: center; color: #fff; max-width: 920px; margin: 56px auto 0; padding: 0 16px; }
.tc-hero-text h1 {
  color: #fff !important; font-size: 46px; line-height: 1.15; font-weight: 800;
  margin: 0 0 14px; letter-spacing: -.3px; text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.tc-hero-text h1 span { color: #FFC107; }
.tc-hero-text p {
  color: rgba(255,255,255,.92); font-size: 18px; line-height: 1.6; margin: 0 auto; max-width: 760px;
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
}
.tc-hero .horizontal-booking { margin-top: 40px !important; }
@media (max-width: 1024px) {
  .tc-hero-text { margin-top: 36px; }
  .tc-hero-text h1 { font-size: 34px; }
  .tc-hero-text p { font-size: 16px; }
}
@media (max-width: 767px) {
  .tc-hero-text { margin-top: 18px; padding: 0 6px; }
  .tc-hero-text h1 { font-size: 26px; margin-bottom: 10px; }
  .tc-hero-text p { font-size: 14.5px; line-height: 1.55; }
  .tc-hero .horizontal-booking { margin-top: 18px !important; }
}