/* ==========================================================================
   Custom Styles for Moon Moments Theme
   --------------------------------------------------------------------------
   This file contains custom CSS rules to override or extend the default
   PrestaShop theme styling. It should be placed in your child theme's
   assets/css/ directory and loaded AFTER the main theme.css.
   ========================================================================== */


/* ==========================================================================
   Global / Base Styles (Apply to all screen sizes by default)
   ========================================================================== */

/* Header Top Bar Background Color */
#header, #header .header-top { /* Combined selector for efficiency */
    background-color: #383232 !important;
}

/* User Info Link Color in Header */
div.user-info a {
    color: white !important;
}

/* Footer Copyright Link Color and Font Size */
.copyright a {
    color: white;
    font-size: 12px;
}

/* Newsletter Block Title in Footer */
#footer .block_newsletter #block-newsletter-label {
    padding-top: 30px;
    color: white;
    font-family: 'Caveat', cursive; /* Ensure Caveat font is loaded, e.g., via Google Fonts */
    font-size: 42px;
}

/* Product Title Container Padding */
div#product-title {
    padding: 0px;
}

/* Product Title (H1) Styling */
div#product-title .h1 {
    float: right; /* Aligns the title to the right */
    font-family: 'Caveat', cursive; /* Ensure Caveat font is loaded */
    font-size: 30px;
}

/* Customization Card Title */
p.h6.card-title.custom {
    font-family: 'Caveat', cursive; /* Ensure Caveat font is loaded */
    text-align: center;
    margin-bottom: 5px;
    white-space: nowrap !important; /* Force the text onto a single line */
    overflow: hidden !important;   /* Hide any text that still overflows */
    text-overflow: ellipsis;        /* Add an ellipsis (...) for truncated text */
}

/* Moonphase Title */
.moonphase-title {
    font-family: 'Caveat', cursive; /* Ensure Caveat font is loaded */
    font-size: 45px !important;
}

/* Moonphase Container Background with Transparency */
#moonphase-container {
    position: relative;
    background-color: white;
    overflow: hidden; /* Important for background-size:cover within positioned parent */
    padding: 20px;
}

#moonphase-container::before {
    content: ""; /* Required for pseudo-elements */
    background-image: url('../img/moonphaseselectorbg.png'); /* Adjust path if your image is elsewhere */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.3; /* Adjust this value (0.0 = fully transparent, 1.0 = fully opaque) */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Puts the background BEHIND the content */
}

/* Ensure content inside moonphase-container is above the transparent background */
#moonphase-container > * {
    position: relative;
    z-index: 1;
}

/* Moonphase Input Group Spacing */
.moonphase-input-group {
    margin-top: 10px;
}

/* --- CRITICAL FIX: Global hiding rules (apply to ALL screen sizes) --- */
.hidden-customization-inputs,
.hidden-button {
    display: none !important;
}
/* --- END CRITICAL FIX --- */


/* NEW CSS for 100% width buttons */
#moonphase-form-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

#moonphase-form-buttons .btn {
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
}

/* NEW CSS to hide the formatted date display */
#moonphase-formatted-date-display {
    display: none !important;
}

.tax-shipping-delivery-label {
    display:none;
}

/* AGGRESSIVE GLOBAL OVERRIDE FOR SPAN.EXPAND-MORE */
span.expand-more {
    font-size: clamp(0.7em, 1.2vw, 0.9em) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    display: inline-block !important;
    color: white !important;
}

/* ==========================================================================
   Desktop Specific Styles (Applies when screen width is 768px or wider)
   ========================================================================== */
@media (min-width: 768px) {

    /* Hide mobile-specific header elements on desktop */
    .header-nav,
    #mobile-top-bar-modules,
    #mobile_top_menu_wrapper { /* Ensure mobile menu wrapper is also hidden */
        display: none !important;
    }

    /*
     * This is the main container for all widgets on the right.
     * We make IT the flex container and tell it how to align its children.
    */
    .header-top-right {
        display: flex;
        align-items: center;
        justify-content: flex-end; /* Pushes all widgets to the far right */
        flex-wrap: nowrap;
    }

    /*
     * This rule tells the main menu to expand and fill the available
     * space, pushing the other widgets to the right.
    */
    .header-top-right #_desktop_top_menu {
        flex-grow: 1;
        justify-content: flex-end; /* Aligns menu items to the right */
        display: flex; /* The menu itself needs to be a flex container for its items */
        gap: 15px;
    }

    /*
     * This adds a consistent space between the language/currency/cart widgets.
    */
    .header-top-right #_desktop_language_selector,
    .header-top-right #_desktop_currency_selector,
    .header-top-right #_desktop_cart {
        margin-left: 15px; /* Adjust this value to change spacing */
    }

    /*
     * This ensures your menu links have a responsive font size.
    */
    .header-top-right #_desktop_top_menu .top-menu > li > a {
        font-size: clamp(0.75rem, 1.3vw, 0.9375rem) !important;
    }
}

/* Add padding to the logo container in the footer on small screens */
@media (max-width: 575.98px) { /* Targets screens smaller than 576px */
   #footer .block-contact #_desktop_logo {
    padding-left: 12px;
    padding-bottom: 10px;
  }
}

.footer-container .material-icons { 
    color: #fbf5df; 
}

/*
#mobile_top_menu_wrapper {
    background: #383232; // This is now part of Rule 4 if needed
}
*/

span#currency-selector-label {
    display: none;
}

/* ==========================================================================
   Mobile Specific Styles (Applies when screen width is under 576px)
   ========================================================================== */
@media (max-width: 575.98px) {

  /* Rule 1: The main row holding all mobile header content. */
  .mobile-header-mobile-content > .row.align-items-center.w-100.no-gutters {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    padding: 5px 10px !important;
    box-sizing: border-box !important;
    min-height: 50px;
    position: relative;
  }

  /* Rule 2: Style the direct child columns of the main header row. */
  #mobile-menu-icon-col,
  #mobile-logo-col,
  #mobile-right-nav-col {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-basis: auto !important;
  }

  /* Rule 2.1: Menu icon column & the icon itself */
  #mobile-menu-icon-col {
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    position: relative; /* For z-index context */
    z-index: 1001;      /* Higher than the menu drop-down */
  }
  #menu-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 8px;
    cursor: pointer;
  }
  #menu-icon .material-icons {
    display: inline-block !important;
    color: white !important;
    font-size: 28px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Rule 2.2: Logo column */
  #mobile-logo-col {
    flex-grow: 1;
    justify-content: center;
    text-align: center;
  }
  #_mobile_logo img {
    max-height: 35px;
    width: auto;
    display: inline-block;
  }

  /* Rule 2.3: Right navigation column (currency & cart) */
  #mobile-right-nav-col {
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-end;
    margin-left: auto;
  }

  /* Rule 3: Items within #mobile-right-nav-col */
  #_desktop_currency_selector,
  #_desktop_cart {
    display: flex !important;
    align-items: center !important;
    margin-left: 5px;
  }
  #_desktop_currency_selector .expand-more,
  #_desktop_currency_selector .material-icons,
  #_desktop_cart .material-icons,
  #_desktop_cart .cart-products-count {
    color: white !important;
    font-size: 0.85rem !important;
    line-height: 1 !important;
  }
  #_desktop_currency_selector select.hidden-md-up {
    background-color: transparent !important;
    color: white !important;
    border: none !important;
    padding: 2px 0px 2px 5px !important;
    height: auto !important;
    font-size: 0.85rem !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  #_desktop_currency_selector select.hidden-md-up option {
    color: #000000;
    background-color: #FFFFFF;
  }
  #_desktop_currency_selector .currency-selector > button > .material-icons.expand-more {
      display: none; /* Hide desktop arrow if select is visible on mobile */
  }
  /* This nested media query is fine as it further refines for mobile */
  @media (max-width: 767px) {
      #_desktop_currency_selector .currency-selector > button.hidden-sm-down {
          display: none !important; /* Hide desktop button */
      }
      #_desktop_currency_selector .currency-selector > select.hidden-md-up {
          display: inline-block !important; /* Show mobile select */
      }
  }

  /*
   * Rule 4: Mobile Menu Styling - FINAL VERSION
  */
  /* Hide the menu wrapper by default */
  #mobile_top_menu_wrapper {
    display: none !important; /* Initially hidden */
    background-color: #383232; /* Match your header background */
    box-sizing: border-box;
    clear: both; /* Ensure it clears the header items above */
    /* position: static; (default) - will push content down */
    z-index: 999; /* Below the menu icon (which is 1001) */
    border-top: 1px solid #504a4a;
  }

  /* Show the menu wrapper when #header has the 'is-open' class */
  header#header.is-open #mobile_top_menu_wrapper {
    display: block !important;
  }

  /* Styling for the UL list (#top-menu) inside the opened mobile menu */
  header#header.is-open #mobile_top_menu_wrapper #top-menu {
    display: block !important;
    list-style: none;
    margin: 0;
    padding: 10px 0; /* Vertical padding for the menu list */
    text-align: center; /* This centers the text of the <a> tags */
  }

  /* Styling for links (<a> tags) inside the opened mobile menu */
  header#header.is-open #mobile_top_menu_wrapper #top-menu li a {
    display: block; /* Make links block to fill li and respect parent's text-align */
    padding: 12px 15px; /* Tappable area */
    color: white;
    text-decoration: none;
    border-bottom: 1px solid #4a4a4a;
    font-size: 1rem;
    text-transform: none;
  }

  header#header.is-open #mobile_top_menu_wrapper #top-menu li:last-child a {
    border-bottom: none; /* No border on the last item */
  }

  header#header.is-open #mobile_top_menu_wrapper #top-menu li a:hover {
    background-color: #504a4a; /* Hover effect */
  }
  
  /*
 * Force #wrapper to be visible when the mobile menu is open,
 * overriding inline style="display: none;" set by JavaScript.
*/
header#header.is-open + section#wrapper, /* If #wrapper is immediately after #header */
body.lang-gb section#wrapper /* More general, if #header.is-open adds a class to body, or just to ensure visibility */ {
  display: block !important; /* Or your theme's default display for #wrapper, e.g., flex */
  visibility: visible !important;
  height: auto !important; /* Ensure it has height */
}

/* You might need a more direct selector if the above doesn't work due to JS timing: */
/* This specifically targets #wrapper when the header has is-open,
   assuming body structure. Adjust if #wrapper isn't a direct sibling like this. */
body:has(header#header.is-open) section#wrapper {
    display: block !important;
    visibility: visible !important;
    height: auto !important;}
}


#_desktop_currency_selector ul.dropdown-menu.hidden-sm-down {
    background: #383232;
    border:0px;
    left: -25px;
}

.product-customization .product-message {
    border: 1px solid; }
    
.product-customization h1.h1.text-center.main-product-title
 {
    FONT-SIZE: 1EM;
    text-align: center;
    margin-bottom: 30px;
}