/* =========================================================================
   COMPLETE MOBILE BUTTON RESPONSIVE FIX - UPDATED VERSION
   Copy this ENTIRE section and paste it at the VERY BOTTOM of your style.css file
   
   CHANGE: Mobile (480-767px) now stacks buttons vertically in a new row
   ========================================================================= */

/* ===========================
   BASE BUTTON IMPROVEMENTS
   =========================== */
.cs_site_header .cs_btn.cs_style_1 {
  white-space: nowrap;
  transition: all 0.3s ease;
  position: relative;
}

/* ===========================
   DESKTOP (1200px and above)
   =========================== */
@media screen and (min-width: 1200px) {

  /* Hide mobile login button on desktop */
  .cs_mobile_login {
    display: none !important;
  }

  /* Ensure booking button is visible */
  .cs_site_header .cs_booking_btn {
    display: inline-flex !important;
  }
}

/* ===========================
   LARGE TABLET (992px - 1199px)
   =========================== */
@media screen and (max-width: 1199px) and (min-width: 992px) {
  .cs_site_header.cs_style_1 .cs_main_header_right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
    padding-right: 70px;
  }

  /* Show both buttons */
  .cs_mobile_login {
    display: inline-flex !important;
  }

  .cs_booking_btn {
    display: inline-flex !important;
  }

  /* Button sizing */
  .cs_site_header .cs_btn.cs_style_1 {
    padding: 11px 22px !important;
    font-size: 14px !important;
    height: auto !important;
    min-height: 46px;
  }

  .cs_site_header .cs_btn.cs_style_1 i {
    margin-left: 8px;
  }
}

/* ===========================
   TABLET (768px - 991px)
   =========================== */
@media screen and (max-width: 991px) and (min-width: 768px) {
  .cs_site_header.cs_style_1 .cs_main_header_right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding-right: 65px;
  }

  /* Show both buttons */
  .cs_mobile_login {
    display: inline-flex !important;
  }

  .cs_booking_btn {
    display: inline-flex !important;
  }

  /* Button sizing */
  .cs_site_header .cs_btn.cs_style_1 {
    padding: 10px 18px !important;
    font-size: 14px !important;
    min-height: 44px;
  }

  .cs_site_header .cs_btn.cs_style_1 i {
    margin-left: 7px;
    font-size: 13px;
  }
}

/* ===========================
   MOBILE (480px - 767px)
   ⭐ UPDATED: Buttons now stack vertically (new row)
   =========================== */
@media screen and (max-width: 991px) {

  /* Ensure parent has relative positioning for the absolute child to stick to */
  .cs_site_header.cs_style_1 .cs_main_header_in {
    position: relative !important;
  }

  /* --- 1. Sub-Header Row Container --- */
  .cs_site_header.cs_style_1 .cs_main_header_right {
    position: absolute;
    top: 100%;
    /* Push completely below the main header */

    /* Force Full Viewport Width */
    width: 100vw;
    left: 50%;
    right: auto;
    transform: translateX(-50%);

    background-color: #ffffff;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    padding: 10px 20px;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /* Center the buttons */
    gap: 15px;
    z-index: 99;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
    height: auto;
  }

  /* --- 2. Button Styles --- */
  .cs_mobile_login,
  .cs_booking_btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 40px !important;
    border-radius: 5px;
    padding: 0 20px !important;
    font-size: 14px !important;
    font-weight: 600;
  }

  /* Login Button: Ghost/Outline Style */
  .cs_mobile_login {
    width: auto !important;
    min-width: auto !important;
    background: transparent !important;
    color: var(--heading-color) !important;
    border: 1px solid #e5e5e5;
  }

  /* Reveal Login Text */
  .cs_mobile_login span {
    display: inline-block !important;
  }

  /* Restore Login Icon */
  .cs_mobile_login i {
    display: inline-block !important;
    margin-right: 8px !important;
    margin-left: 0 !important;
    /* Reset */
    font-size: 14px !important;
  }

  /* Remove any previous pseudo-element hacks */
  .cs_mobile_login::before {
    display: none !important;
  }

  /* Booking Button: Primary Style */
  .cs_booking_btn {
    width: auto !important;
    min-width: auto !important;
    background-color: var(--accent-color) !important;
    color: #fff !important;
  }

  /* Booking Text */
  .cs_booking_btn span {
    display: inline-block !important;
    /* Show original text "Online Booking" if possible */
  }

  /* If original text is too long, we can hide it and use ::after, 
     but for this row layout, "Online Booking" might fit. 
     Let's try to show the span. If it's too long, we can swap. */

  .cs_booking_btn::after {
    content: "";
    /* Reset */
    display: none;
  }

  .cs_booking_btn::before {
    content: "";
    /* Reset */
    display: none;
  }

  .cs_booking_btn i {
    margin-left: 8px !important;
    font-size: 14px;
  }

  /* Reset Body Padding (no longer needed as it's not fixed bottom) */
  body {
    padding-bottom: 0px;
  }

  /* --- 4. Global Spacer Fix --- */
  /* Since the sub-header row adds height, we must increase the spacer to prevent overlap */
  .cs_site_header_spacing_140 {
    height: 160px !important;
    /* Base 80px + SubRow ~60px + Buffer */
  }
}

/* Small screens covered by main media query above */

/* ===========================
   ALTERNATIVE FOR EXTRA SMALL
   OPTION B: Short text version
   Comment out OPTION A above and uncomment this if you prefer text
   =========================== */
/*
@media screen and (max-width: 379px) {
  .cs_site_header.cs_style_1 .cs_main_header_right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding-right: 60px;
  }

  .cs_mobile_login {
    display: inline-flex !important;
  }

  .cs_booking_btn {
    display: inline-flex !important;
  }

  .cs_site_header .cs_btn.cs_style_1 {
    padding: 8px 12px !important;
    font-size: 12px !important;
    min-height: 40px;
  }

  .cs_booking_btn span {
    font-size: 0;
  }

  .cs_booking_btn span::before {
    content: "Book";
    font-size: 12px;
  }

  .cs_mobile_login span {
    font-size: 0;
  }

  .cs_mobile_login span::before {
    content: "Login";
    font-size: 12px;
  }

  .cs_site_header .cs_btn.cs_style_1 i {
    font-size: 11px;
    margin-left: 4px;
  }
}
*/

/* ===========================
   HOVER & ACTIVE STATES
   =========================== */

/* Desktop hover effects */
@media (hover: hover) and (pointer: fine) {
  .cs_site_header .cs_btn.cs_style_1:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 15, 58, 0.3);
  }
}

/* Touch device feedback */
.cs_site_header .cs_btn.cs_style_1:active {
  transform: scale(0.96);
  transition: transform 0.1s;
}

/* ===========================
   ACCESSIBILITY
   =========================== */

/* Focus states */
.cs_site_header .cs_btn.cs_style_1:focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: 2px;
}

.cs_site_header .cs_btn.cs_style_1:focus:not(:focus-visible) {
  outline: none;
}

/* Ensure minimum touch target size */
.cs_site_header .cs_btn.cs_style_1 {
  min-width: 44px;
  min-height: 44px;
}

/* ===========================
   LOADING STATE
   =========================== */
.cs_site_header .cs_btn.cs_style_1.cs_loading {
  pointer-events: none;
  opacity: 0.6;
  position: relative;
}

.cs_site_header .cs_btn.cs_style_1.cs_loading::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  top: 50%;
  right: 8px;
  margin-top: -7px;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  animation: cs_button_spin 0.6s linear infinite;
}

@keyframes cs_button_spin {
  to {
    transform: rotate(360deg);
  }
}

/* ===========================
   MENU TOGGLE COMPATIBILITY
   =========================== */
.cs_menu_toggle {
  position: relative;
  z-index: 100;
}

/* Ensure buttons don't interfere with menu */
.cs_nav .cs_nav_list_wrap.cs_active~.cs_main_header_right {
  pointer-events: auto;
}

/* ===========================
   STICKY HEADER ADJUSTMENTS
   =========================== */
.cs_gescout_sticky .cs_main_header_right,
.cs_sticky_header .cs_main_header_right {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.cs_gescout_sticky .cs_btn.cs_style_1,
.cs_sticky_header .cs_btn.cs_style_1 {
  transition: all 0.3s ease;
}

/* ===========================
   LANDSCAPE ORIENTATION
   =========================== */
@media screen and (max-height: 500px) and (orientation: landscape) {
  .cs_site_header .cs_btn.cs_style_1 {
    padding: 6px 12px !important;
    font-size: 12px !important;
    min-height: 36px !important;
  }

  .cs_site_header.cs_style_1 .cs_main_header_right {
    gap: 6px;
  }
}

/* ===========================
   HIGH CONTRAST MODE
   =========================== */
@media (prefers-contrast: high) {
  .cs_site_header .cs_btn.cs_style_1 {
    border-width: 2px !important;
  }
}

/* ===========================
   REDUCED MOTION
   =========================== */
@media (prefers-reduced-motion: reduce) {

  .cs_site_header .cs_btn.cs_style_1,
  .cs_site_header .cs_btn.cs_style_1 i,
  .cs_site_header .cs_btn.cs_style_1::before {
    transition: none !important;
    animation: none !important;
  }
}

/* ===========================
   PRINT STYLES
   =========================== */
@media print {
  .cs_site_header .cs_btn.cs_style_1 {
    display: none !important;
  }
}

/* ===========================
   BROWSER-SPECIFIC FIXES
   =========================== */

/* Safari iOS fix for button padding */
@supports (-webkit-touch-callout: none) {
  .cs_site_header .cs_btn.cs_style_1 {
    -webkit-appearance: none;
    appearance: none;

  }
}

/* Firefox button fix */
@-moz-document url-prefix() {
  .cs_site_header .cs_btn.cs_style_1 {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* =========================================================================
   END OF MOBILE BUTTON RESPONSIVE FIX
   ========================================================================= */