/*
Theme Name: Flatsome child theme
Template: flatsome
Version: 1.1.0
*/

/* ==========================================================================
   Custom Styles for Huso Lodge (Flatsome Child Theme)

   Purpose:
   - To store all custom CSS in a single, manageable file.
   - To improve site performance and stability by removing CSS from the database options.
   - This file should be the ONLY place where custom CSS is added.
   ========================================================================== */


/* ==========================================================================
   HEADER
   ========================================================================== */
.nav-spacing-xlarge > li {
    margin: 0 20px;
}
.header-inner a.button.secondary.is-large {
     padding: 8px 30px;
}
.header-main {
    border-bottom: 1px solid rgba(255,255,255,.2);
}

/*
 * @TODO: EXPENSIVE SELECTOR
 *
 * Problem: Using a long list of specific IDs is inefficient for the browser and very
 * hard to maintain. If a page ID changes, the style breaks.
 *
 * Action: Find a common BODY class on all your accommodation pages (e.g., `.single-product`
 * or `.product-cat-accommodation`) and replace this entire block with a single,
 * class-based selector like: `.single-product .header-button-1 { display: none; }`
*/
/******* Hide "Book" button on all accommodation pages ********/
div#wrapper_27 .header-button-1,  div#wrapper_41 .header-button-1, div#wrapper_528 .header-button-1, div#wrapper_563 .header-button-1, div#wrapper_644 .header-button-1, div#wrapper_925 .header-button-1, div#wrapper_194830 .header-button-1 , div#wrapper_198932 .header-button-1, div#wrapper_198933 .header-button-1, div#wrapper_198934 .header-button-1, div#wrapper_198935 .header-button-1  {
   display: none;
}

/* Center header navigation on larger screens */
@media screen and (min-width: 849px) {
  .header-inner .nav-left {
      justify-content: center !important;
    }
}
/* Add extra padding on very large screens */
@media screen and (min-width: 1200px) {
  .header .header-inner,
  .footer .row,
  .header-top .container {
      padding-left: 80px !important;
      padding-right: 80px !important;
    }
}

/* ==========================================================================
   ACCORDION & FAQ
   ========================================================================== */
.accordion-title.active {
    background-color: transparent;
}
.accordion-faq .accordion-title {
    border-top: none;
}
.accordion-faq .accordion-item {
    background: #F3F6F6;
    margin-bottom: 10px;
    border-radius: 0;
    padding: 15px;
}

/* ==========================================================================
   BLOG & POSTS
   ========================================================================== */
.single-post .is-divider,
.box-text-inner .is-divider {
    display: none;
    visibility: hidden; /* Using visibility:hidden with display:none is redundant, but harmless */
}
.single-post .entry-content p a  {
    border-bottom: currentColor 2px solid;
    padding-bottom: 1px;
}
/* Make blog archive full-width */
.blog .page-wrapper .large-10,
.archive .page-wrapper .large-10 {
    max-width: 100%;
    -ms-flex-preferred-size: 100%; /* Note: -ms- prefix is for older IE10. Might be unnecessary. */
    flex-basis: 100%;
}
.single-post .entry-header-text {
    padding: 0 10% 25px 10%;
    text-align: center;
}
.nav-pagination > li > span,
.nav-pagination > li > a {
    border: 0;
    line-height: 2.25em;
}

/* ==========================================================================
   GENERAL & REUSABLE COMPONENTS
   ========================================================================== */
.custom-sticky-menu a.ux-menu-link__link.flex {
    font-weight: 500;
    font-size: 110%;
}
.custom-tabs .nav > li {
    margin: 0 40px;
}
.box-overlay.dark .box-text,
.box-shade.dark .box-text {
    text-shadow: none;
}
.section-bottom {
   align-items: flex-end;
}

/* ==========================================================================
   PRODUCT & BOOKING STYLES
   ========================================================================== */

/* @NOTE: The '!important' flags below are often needed to override styles from
   WooCommerce or other plugins. A long-term goal is to reduce them by finding
   more specific selectors, but they are often necessary for quick results. */

/* --- Hide Unused Elements in Product Listings & Pages --- */
.product-small .product-cat,
.woocommerce-Price-currencySymbol,
.box-text h1,
.box-text p.lead,
div.box-text p.product_summary,
.wc_coupon_message_wrap {
  display: none !important; /* display:none is sufficient, !important added for override strength */
}

/*
 * @TODO: EXPENSIVE SELECTOR & READABILITY
 *
 * Problem: This is a very long, hard-to-read list of selectors to hide elements.
 *
 * Action: This block has already been partially grouped. Continue to review and ensure
 * the groupings make sense. This improves maintainability.
*/

/* --- Hide Specific Booking, Deposit, and WooCommerce UI Elements --- */
.wc-bookings-booking-form .wc_bookings_field_persons,
.product-summary .quantity,
.variation-Persons,
.price-wrapper,
.product-summary,
span#bkap_no_of_days,
strong.product-quantity,
.is-large .breadcrumbs,
#wc-deposits-options-form,
#basic-wc-deposits-options-form,
.variation-NoofDays,
.variation-PerDayPrice,
a.woocommerce-remove-coupon,
ul.woocommerce-order-overview.woocommerce-thankyou-order-details.order_details,
section.woocommerce-bacs-bank-details,
.payment-icons .payment-icon,
.woocommerce-form-coupon-toggle,
.icon-checkmark {
    display: none !important;
}


/* --- General Product Page Formatting --- */
h1.product-title.product_title.entry-title {
    height: 50px;
    margin-top: 15px;
}
.product-short-description p:last-child,
div.product-short-description p {
    margin-bottom: 0;
}
.product-info {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.product-info .price {
  font-size: 1.3em !important;
  font-weight: 600 !important;
}

/* --- Trust-Index Widget Styling --- */
.ti-widget[data-layout-id='32'][data-set-id='soft'] .ti-header {
    padding: 0 0 20px 0 !important;
}
.ti-widget[data-layout-id='32'][data-set-id='soft'] {
    text-align: left !important;
}


/* --- WooCommerce Bookings & Appointments (bkap) Calendar Styling --- */

/***** Booking calendar form *****/
.bkap-booking-form {
  border: 0 !important;
  padding: 0 !important;
}

/***** Calendar width *****/
.bkap_start_date,
.bkap_end_date {
  width: auto!important;
}

.ui-datepicker-inline {
  width: auto !important;
}

/***** Calendar header *****/
.booking_calender {
    margin-bottom: 0 !important;
}

input#booking_calender,
input#booking_calender_checkout {
  height: 2.2em;
  font-size: .9em;
  background-color: rgba(0,0,0,0.02);
  border-bottom-style: none;
  border-radius: 7px 7px 0px 0px;
}

.book_start_date_label,
.book_end_date_label {
  display: inline-block !important;
  font-weight: 600 !important;
  padding-top: 2px;
}

label.book_start_date_label,
label.book_end_date_label {
  margin-bottom: 5px;
}

.bkap-booking-form .bkap_start_date input,
.bkap-booking-form .bkap_end_date input {
  display: inline !important;
  width: auto !important;
}

.ui-datepicker .ui-datepicker-title {
  font-size: 16px !important;
}

/***** Calendar background *****/
.ui-widget-header,
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  background: none !important;
}

/***** Calendar cells *****/

/* Bookeable cells */
.undefined .ui-state-default { 
  font-weight: bolder !important;
}

/* Cell size */
ui-datepicker table {
  font-size: 11px !important;
}

.hasDatepicker .ui-datepicker th {
  padding: 3px !important;
}
.hasDatepicker .ui-datepicker td .ui-state-default {
  padding: 6px !important;
}

.bkap-booking-form th, td {
  padding: 0px !important;
  border-bottom: none !important;
}

/* Cell colour */
.ui-datepicker td.ui-datepicker-today {
  background-color: #eee !important;
}

.ui-datepicker td.ui-datepicker-current-day {
  background: #22b036 !important;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
  color: white !important;
}

/* --- Add to Cart & Checkout Buttons --- */
div#bkap-price-box  {
  display: block;
  text-align: center;
  padding: 0;
  border: none;
  margin-bottom: 0px;
}

button.single_add_to_cart_button.button.alt {
  width: 100%;
  font-size: 1.2em;
  background-color: #22b036 !important;
  border-radius: 10px;
  top: 10px;
}

div.form-row .button#place_order {
 background-color: #22b036 !important;
 border-radius: 10px;
}

/* --- Checkout & Cart Page Formatting --- */
.woocommerce-billing-fields {
  border-top: none !important;
  padding-top: 0 !important;
  padding-left: 30px;
}
.shop_table li {
  display: flex !important;
}
.cart-container.container.page-wrapper.page-checkout {
  padding-top: 0 !important;
}
.col-inner.has-border {
  border-color: #cccccc !important;
}

/* --- Last Minute Floating Widget --- */
.floating-search-widget {
    position: fixed;
    top: 35%;
    right: 20px;
    left: auto;
    transform: translateY(-50%);
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}
.floating-search-widget label,
.floating-search-widget input,
.floating-search-widget select,
.floating-search-widget button {
    display: block;
    width: 100%;
    margin-bottom: 10px;
}

/* --- Custom Booking Grid (ux-booking-grid) --- */
.ux-booking-grid .box-text {
  padding-left: 10px !important;
  padding-right: 10px !important;
  padding-bottom: 5em !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}
.ux-booking-grid .price-wrapper {
  display: flex !important;
  flex-direction: column;
  align-items: flex-end;
  position: absolute;
  bottom: 10px;
  right: 10px;
}

/***** Something different *****/

.wc-bacs-bank-details li {
  margin-left: 3em;
}
p.contact-submit {
  color: white;
}

/* --- Modal for weddings --- */
#activity-modal, #edit-couple-name-modal {
    display: none; /* Make sure this is not overriding your display logic */
    position: fixed; /* If using fixed positioning, check top, left, etc. */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    z-index: 1000; /* Ensure it's on top */
}

.modal-content {
    background-color: #fff;
    margin: 100px auto;
    padding: 20px;
    border: 1px solid #888;
    width: 60%;
}

.wedding-program ul {
    padding-left: 18px;
}

button[name="confirm_order"] a {
    color: white;
}


/* ==========================================================================
   MODAL FORMS
   ========================================================================== */

.modal-header {
    display: flex; /* To align title and close button */
    justify-content: space-between; /* Push title to left, close to right */
    align-items: center; /* Vertically align title and close button */
    padding-bottom: 10px; /* Add some spacing below header */
    border-bottom: 1px solid #ccc; /* Optional: Separator line */
    margin-bottom: 15px;
}

.modal-close-button {
    color: #aaa;
    float: right; /* Push to the right (if not using flexbox for header) */
    font-size: 28px;
    font-weight: bold;
    cursor: pointer; /* Indicate it's clickable */
}

.modal-close-button:hover,
.modal-close-button:focus {
    color: black; /* Darken on hover/focus */
    text-decoration: none; /* Remove underline if any */
    cursor: pointer;
}


/* ==========================================================================
   RESPONSIVE STYLES - TABLET & DOWN
   ========================================================================== */

@media (max-width: 849px) {

    .shop-page-title.product-page-title.dark.featured-title.page-title {
        height: 130px;
    }

    .page-title-inner.flex-row.container.medium-flex-wrap.flex-has-center {
        padding-top: 0;
    }

    .shop-page-title h1.product-title {
        font-size: 2.0em !important;
    }

    div#bkap_start_date {
        margin-top: 16px;
    }

    .is-large {
        font-size: 0.7em !important;
    }

    .banner h3 {
       font-size: 2.0em !important;
       line-height: 1.2em !important;
    }
}

/* ==========================================================================
   RESPONSIVE STYLES - MOBILE ONLY
   @NOTE: Tablet styles above are inherited automatically. Only add rules here
   if they need to be DIFFERENT from the tablet styles.
   ========================================================================== */

@media (max-width: 549px) {

    /* This rule is unique to mobile, so it stays. */
    .is-xxlarge {
        font-size: 1.0em !important;
    }

    /* This rule is unique to mobile, so it stays. */
    .post-item .box-shade .box-text p.from_the_blog_excerpt {
        padding-top: 40px !important;
        visibility: hidden;
    }

    /* This rule is unique to mobile, so it stays. */
    .booking-grid h2 {
        font-size: 1.8em;
    }

    /* This h3 font-size is different from tablet, so it stays. */
    .banner h3 {
        font-size: 1.8em !important;
        line-height: 1.2em !important;
    }
}