/* ==========================================================================
   Flash Deals — Responsive Stylesheet
   Covers: Mobile (< 576px), Mobile-L (576px–767px), Tablet (768px–991px)
   ========================================================================== */

/* ============================================================
   GLOBAL — Fix Double Hamburger Icon
   The navbar-toggler has both .navbar-toggler-icon (Bootstrap's
   built-in SVG background) and a Font Awesome <i> icon inside.
   We hide the Bootstrap default background so only FA icon shows.
   ============================================================ */
.navbar-toggler .navbar-toggler-icon {
  background-image: none !important;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

/* ============================================================
   TABLET — max-width: 991px
   ============================================================ */
@media (max-width: 991.98px) {

  /* --- Navigation --- */
  .navbar-custom {
    padding: 10px 0;
  }

  .navbar-brand img {
    height: 48px !important;
  }

  /* Mobile nav menu dropdown */
  .navbar-collapse {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--border-color);
    padding: 16px 12px 20px;
    margin-top: 10px;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 12px 30px rgba(11, 28, 48, 0.1);
  }

  .navbar-custom .nav-link {
    padding: 10px 14px !important;
    font-size: 15px;
    border-radius: 10px;
    width: 100%;
    display: block;
  }

  .navbar-custom .nav-link::after {
    display: none; /* Remove underline animation in mobile */
  }

  .navbar-custom .nav-link:hover,
  .navbar-custom .nav-link.active {
    background-color: rgba(0, 107, 84, 0.06);
    color: var(--primary-color);
  }

  /* "Contact Us" button in nav — full-width on mobile */
  .navbar-collapse .ms-lg-3 {
    margin-top: 12px !important;
  }

  .navbar-collapse .btn-primary-custom {
    width: 100%;
    justify-content: center;
    padding: 10px 20px;
  }

  /* --- Hero Slider --- */
  .hero-slider .carousel-item {
    height: 480px;
  }

  .hero-caption {
    max-width: 100%;
    padding: 0 10px;
  }

  .hero-caption h1,
  .hero-caption .display-3 {
    font-size: 2.2rem !important;
  }

  .hero-caption .lead {
    font-size: 0.95rem;
  }

  .hero-caption .d-flex.flex-wrap.gap-3 {
    gap: 10px !important;
  }

  /* --- Subpage Hero (About, Contact, Flights, etc.) --- */
  .subpage-hero {
    height: 55vh;
    min-height: 280px;
  }

  .subpage-hero h1 {
    font-size: 2rem !important;
  }

  .subpage-hero .lead {
    font-size: 0.9rem;
  }

  /* --- Category Cards (4-up grid) --- */
  .category-card {
    padding: 20px 15px;
  }

  .category-icon-wrapper {
    width: 58px;
    height: 58px;
  }

  .category-icon-wrapper i {
    font-size: 22px;
  }

  .category-card h3 {
    font-size: 15px;
  }

  .category-card p {
    font-size: 12px;
  }

  /* --- Deal Cards --- */
  .deal-card-img-wrapper {
    height: 175px;
  }

  .deal-card-body {
    padding: 18px;
  }

  .deal-card-title {
    font-size: 16px;
  }

  .deal-card-description {
    font-size: 13px;
  }

  .deal-price {
    font-size: 17px;
  }

  /* --- Slider --- */
  .slider-wrapper .slider-item {
    flex: 0 0 300px;
    max-width: 300px;
  }

  /* --- Ferry Brand Cards (top brands grid) --- */
  .ferry-brand-card {
    height: 240px;
  }

  .brand-name-title {
    font-size: 18px;
  }

  .brand-description-text {
    font-size: 12px;
  }

  /* --- Flip Cards (flights/hotels/others) --- */
  .flip-card {
    height: 380px;
  }

  .flip-front-title {
    font-size: 18px;
  }

  .flip-back-title {
    font-size: 17px;
  }

  .price-amount {
    font-size: 28px;
  }

  .flip-card-back {
    padding: 24px;
  }

  /* --- About Page --- */
  .stats-counter {
    font-size: 38px;
  }

  .about-img-frame::after {
    bottom: -10px;
    right: -10px;
  }

  /* --- Contact Page --- */
  .contact-info-card {
    padding: 20px;
  }

  /* --- Legal Pages (Privacy, T&C) --- */
  .legal-hero {
    padding: 2.5rem 0;
  }

  .legal-hero h1 {
    font-size: 2rem;
  }

  .legal-content h3 {
    font-size: 20px;
    margin-top: 2rem;
  }

  /* --- Footer --- */
  .footer-custom .col-md-2.offset-md-1,
  .footer-custom .col-md-2,
  .footer-custom .col-md-3 {
    margin-bottom: 24px;
  }

  .footer-bottom {
    text-align: center;
    margin-top: 28px;
    padding: 20px 0;
  }

  .footer-bottom .mt-2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }
}

/* ============================================================
   MOBILE — max-width: 767px
   ============================================================ */
@media (max-width: 767.98px) {

  /* --- General Typography --- */
  h1, .display-4 {
    font-size: 1.8rem !important;
  }

  h2 {
    font-size: 1.5rem !important;
  }

  h3 {
    font-size: 1.2rem !important;
  }

  /* --- Hero Slider --- */
  .hero-slider .carousel-item {
    height: 420px;
    background-position: center center;
  }

  .hero-caption h1,
  .hero-caption .display-3 {
    font-size: 1.75rem !important;
  }

  .hero-caption .lead {
    font-size: 0.88rem;
    margin-bottom: 24px !important;
  }

  .hero-caption .btn {
    padding: 10px 18px;
    font-size: 14px;
  }

  .hero-badge {
    font-size: 10px;
    padding: 6px 12px;
    letter-spacing: 1px;
    margin-bottom: 14px;
  }

  .carousel-indicators {
    bottom: 10px;
  }

  /* --- Subpage Hero --- */
  .subpage-hero {
    height: auto;
    min-height: 220px;
    padding: 60px 0 40px;
  }

  .subpage-hero h1 {
    font-size: 1.6rem !important;
  }

  .subpage-hero .lead {
    font-size: 0.85rem;
  }

  /* --- Live Ticker --- */
  .live-deals-ticker {
    padding: 10px 0;
  }

  .ticker-item {
    font-size: 11px;
    padding: 0 14px;
    gap: 6px;
  }

  .ticker-badge {
    font-size: 8px;
    padding: 3px 7px;
    letter-spacing: 0.8px;
  }

  .ticker-content {
    animation-duration: 14s;
  }

  /* --- Section Spacing --- */
  section.py-5 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  section.my-5 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }

  /* --- Category Cards --- */
  .category-card {
    padding: 16px 10px;
    border-radius: 14px;
  }

  .category-icon-wrapper {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    margin-bottom: 12px;
  }

  .category-icon-wrapper i {
    font-size: 20px;
  }

  .category-card h3 {
    font-size: 13px;
    margin-bottom: 6px;
  }

  .category-card p {
    font-size: 11px;
  }

  /* --- Deal Cards (in grid sections) --- */
  .deal-card {
    border-radius: 14px;
  }

  .deal-card-img-wrapper {
    height: 160px;
  }

  .deal-card-body {
    padding: 14px;
  }

  .deal-card-title {
    font-size: 14px;
    margin-bottom: 6px;
  }

  .deal-card-description {
    font-size: 12px;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .deal-card-footer {
    padding-top: 10px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .deal-price {
    font-size: 16px;
  }

  .deal-badge {
    font-size: 10px;
    padding: 4px 10px;
    top: 10px;
    right: 10px;
  }

  .deal-brand-logo-wrapper {
    padding: 4px 10px;
    bottom: 8px;
    left: 8px;
  }

  /* Button inside deal card — full width on mobile */
  .deal-card-footer .btn {
    width: 100%;
    text-align: center;
    padding: 9px 14px;
    font-size: 13px !important;
  }

  /* --- Slider --- */
  .slider-wrapper {
    padding: 10px 5px 20px;
    gap: 10px;
  }

  .slider-wrapper .slider-item {
    flex: 0 0 260px;
    max-width: 260px;
  }

  .slider-btn {
    display: none !important;
  }

  /* --- Brand Cards (logos) --- */
  .brand-card {
    padding: 16px;
    border-radius: 12px;
  }

  .brand-logo-img {
    max-height: 40px;
    max-width: 110px;
    margin-bottom: 10px;
  }

  .brand-card .brand-title {
    font-size: 14px;
  }

  .brand-card .brand-offer {
    font-size: 11px;
    padding: 3px 10px;
    margin-bottom: 10px;
  }

  /* --- Ferry Brand Cards --- */
  .ferry-brand-card {
    height: 200px;
    border-radius: 12px;
  }

  .brand-name-title {
    font-size: 15px;
    margin-bottom: 4px;
  }

  .brand-description-text {
    font-size: 11px;
    margin-bottom: 10px;
  }

  .brand-info-content {
    padding: 16px;
  }

  .brand-discount-badge {
    font-size: 9px;
    padding: 4px 10px;
    top: 10px;
    right: 10px;
  }

  /* --- Flip Cards --- */
  .flip-card {
    height: 360px;
  }

  .flip-front-title {
    font-size: 16px;
  }

  .flip-badge {
    font-size: 9px;
    padding: 5px 10px;
    margin-bottom: 8px;
  }

  .flip-category {
    font-size: 9px;
    margin-bottom: 6px;
  }

  .flip-front-desc {
    font-size: 12px;
    margin-bottom: 10px;
  }

  .flip-front-content {
    padding: 20px;
  }

  .flip-card-back {
    padding: 20px;
  }

  .flip-back-title {
    font-size: 15px;
  }

  .flip-back-badge {
    font-size: 9px;
    padding: 6px 12px;
    margin-bottom: 10px;
  }

  .flip-back-list li {
    font-size: 12px;
    margin-bottom: 10px;
    gap: 8px;
  }

  .flip-back-list i {
    font-size: 15px;
  }

  .price-amount {
    font-size: 26px;
  }

  .price-from {
    font-size: 11px;
  }

  .price-unit {
    font-size: 12px;
  }

  .btn-flip-book {
    font-size: 13px;
    padding: 10px 12px;
  }

  /* --- Feature Boxes (About / Why Choose) --- */
  .feature-box {
    padding: 22px 18px;
    border-radius: 14px;
  }

  .feature-icon {
    font-size: 28px;
    margin-bottom: 14px;
  }

  /* --- Stats Counter (About Page) --- */
  .stats-counter {
    font-size: 32px;
  }

  /* --- About Image Frame --- */
  .about-img-frame::after {
    display: none; /* Hide decorative frame offset on mobile */
  }

  /* --- Contact Page --- */
  .contact-info-card {
    padding: 16px;
    gap: 14px;
    border-radius: 14px;
  }

  .contact-info-icon {
    width: 42px;
    height: 42px;
    font-size: 16px;
    border-radius: 10px;
    flex-shrink: 0;
  }

  /* Contact form section — remove excess padding */
  .col-lg-7 .p-5 {
    padding: 20px !important;
    border-radius: 14px;
  }

  /* FAQ Accordion */
  .faq-accordion .accordion-button {
    font-size: 14px;
    padding: 16px;
  }

  .faq-accordion .accordion-body {
    font-size: 13px;
    padding: 14px 16px;
  }

  /* --- Legal Pages (Privacy Policy / T&C) --- */
  .legal-hero {
    padding: 2rem 0;
  }

  .legal-hero h1 {
    font-size: 1.6rem !important;
  }

  .legal-content h3 {
    font-size: 18px;
    margin-top: 1.5rem;
  }

  .legal-content p {
    font-size: 14px;
    line-height: 1.7;
  }

  .legal-content ul li {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 8px;
  }

  /* Table of contents sidebar — shown inline on mobile */
  .col-lg-3.d-none.d-lg-block {
    display: none !important;
  }

  .col-lg-9.legal-content {
    width: 100% !important;
    padding-left: 0;
  }

  /* --- Footer --- */
  .footer-custom {
    padding-top: 40px !important;
    padding-bottom: 20px !important;
  }

  .footer-custom img[alt*="Footer Logo"] {
    height: 50px !important;
    margin-bottom: 16px !important;
  }

  .footer-custom h5 {
    font-size: 14px;
    margin-bottom: 16px;
  }

  .footer-custom a {
    font-size: 13px;
    margin-bottom: 8px;
  }

  .footer-bottom {
    margin-top: 24px;
    padding: 16px 0;
    gap: 8px;
    text-align: center;
  }

  .footer-bottom p {
    font-size: 12px;
  }

  .footer-bottom a {
    margin-left: 8px;
    font-size: 12px;
  }

  .footer-social-link {
    width: 34px;
    height: 34px;
    margin-right: 6px;
  }

  /* Section headings */
  .d-flex.align-items-end.justify-content-between {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px;
  }

  /* "View All" buttons next to section headings */
  .d-flex.align-items-end.justify-content-between > div:last-child {
    align-self: flex-start;
  }
}

/* ============================================================
   MOBILE SMALL — max-width: 480px
   ============================================================ */
@media (max-width: 480px) {

  /* Hero - smaller fonts */
  .hero-slider .carousel-item {
    height: 380px;
  }

  .hero-caption h1,
  .hero-caption .display-3 {
    font-size: 1.5rem !important;
    line-height: 1.3;
  }

  .hero-caption .lead {
    font-size: 0.82rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Stack hero buttons vertically */
  .hero-caption .d-flex.flex-wrap.gap-3 {
    flex-direction: column;
    gap: 8px !important;
  }

  .hero-caption .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Category grid - 2 columns */
  .category-icon-wrapper {
    width: 44px;
    height: 44px;
  }

  .category-icon-wrapper i {
    font-size: 18px;
  }

  .category-card h3 {
    font-size: 12px;
  }

  .category-card p {
    display: none; /* Hide description text at very small sizes */
  }

  /* Slider items narrower */
  .slider-wrapper .slider-item {
    flex: 0 0 240px;
    max-width: 240px;
  }

  /* Deal card img height */
  .deal-card-img-wrapper {
    height: 140px;
  }

  /* Flip cards shorter */
  .flip-card {
    height: 320px;
  }

  .flip-front-content {
    padding: 14px;
  }

  .flip-front-title {
    font-size: 14px;
  }

  .flip-front-desc {
    display: none; /* hide description at very small size, show title/badge only */
  }

  /* Ferry brand card shorter */
  .ferry-brand-card {
    height: 170px;
  }

  .brand-name-title {
    font-size: 13px;
  }

  .brand-description-text {
    display: none;
  }

  /* Contact form padding */
  .col-lg-7 .p-5 {
    padding: 14px !important;
  }

  /* Stats */
  .stats-counter {
    font-size: 28px;
  }

  /* Section title spacing */
  .text-center.mb-5 {
    margin-bottom: 2rem !important;
  }

  /* Footer columns stacked */
  .footer-custom .row.g-4 > div {
    margin-bottom: 20px;
  }

  .footer-bottom .mt-2 {
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
}

/* ============================================================
   TABLET LANDSCAPE — 768px to 991px specific fixes
   ============================================================ */
@media (min-width: 768px) and (max-width: 991.98px) {

  /* Hero height adjusted for tablets */
  .hero-slider .carousel-item {
    height: 500px;
  }

  /* Subpage hero */
  .subpage-hero {
    height: 50vh;
    min-width: 300px;
  }

  /* 3-column grid becomes 2-column on tablet */
  .col-md-4 {
    flex: 0 0 auto;
  }

  /* Slider items on tablet */
  .slider-wrapper .slider-item {
    flex: 0 0 320px;
    max-width: 320px;
  }

  /* Flip cards - adjust height for tablet */
  .flip-card {
    height: 420px;
  }

  /* Ferry brand cards stay at 2x2 layout on tablet */
  .ferry-brand-card {
    height: 260px;
  }

  /* Footer - rearrange into 2-column on tablet */
  .footer-custom .col-md-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .footer-custom .col-md-2 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .footer-custom .col-md-2.offset-md-1 {
    margin-left: 0 !important;
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* ============================================================
   UTILITY — Desktop Limit on Small Screens
   (Override max-width 85% to full width for smaller viewports)
   ============================================================ */
@media (max-width: 1199.98px) {
  .desktop-limit {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ============================================================
   SCROLL & OVERFLOW SAFEGUARDS
   ============================================================ */
@media (max-width: 991.98px) {
  body {
    overflow-x: hidden;
  }

  /* Prevent hero carousel overflow from causing horizontal scroll */
  .hero-slider,
  .carousel,
  .carousel-inner,
  .carousel-item {
    overflow: hidden;
  }

  /* Ticker overflow fix */
  .live-deals-ticker,
  .ticker-wrapper {
    overflow: hidden;
  }

  /* Prevent card hover transforms from creating scroll on mobile */
  .deal-card:hover,
  .category-card:hover,
  .ferry-brand-card:hover {
    transform: none !important;
  }

  /* Remove translateX on footer links (prevents jank) */
  .footer-custom a:hover {
    transform: none;
  }
}