/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* ============================================
   CHECKOUT PAGE UI OVERHAUL
   ============================================ */

/* --- 1. Modern Rounded Input Fields --- */
.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.woocommerce-checkout .select2-container .select2-selection--single {
    border-radius: 8px !important;
    border: 1.5px solid rgba(0,0,0,0.15) !important;
    padding: 12px 10px !important;
    font-size: 15px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    background-color: #fff !important;
}
.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus {
    border-color: #3561ac !important;
    box-shadow: 0 0 0 3px rgba(53,97,172,0.1) !important;
    outline: none !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single {
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 10px !important;
    padding-right: 28px !important;
    line-height: 22px !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    right: 10px !important;
}

/* Keep the opened SelectWoo panel aligned with the closed checkout field. */
.woocommerce-checkout .select2-container--default .select2-dropdown {
    margin-top: 6px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0 16px 34px rgba(17,17,17,0.08) !important;
    overflow: hidden !important;
}
.woocommerce-checkout .select2-container--open .select2-dropdown--above {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
}
.woocommerce-checkout .select2-container--default .select2-search--dropdown {
    padding: 12px !important;
    border-bottom: 1px solid #edf2f7 !important;
    background: #fff !important;
}
.woocommerce-checkout .select2-container--default .select2-search--dropdown::before,
.woocommerce-checkout .select2-container--default .select2-search--dropdown::after {
    display: none !important;
}
.woocommerce-checkout .select2-container--default .select2-search--dropdown .select2-search__field {
    min-height: 42px !important;
    padding: 0 12px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: #fbfcff !important;
    background-image: none !important;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.8) !important;
    color: #0f172a !important;
    font-size: 14px !important;
}
.woocommerce-checkout .select2-container--default .select2-search--dropdown .select2-search__field::placeholder {
    color: #d4dce6 !important;
    opacity: 1 !important;
}
.woocommerce-checkout .select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: #3561ac !important;
    box-shadow: 0 0 0 3px rgba(53,97,172,0.1) !important;
    outline: none !important;
}
.woocommerce-checkout .select2-results__options {
    padding: 8px !important;
}
.woocommerce-checkout .select2-container--default .select2-results__option {
    padding: 12px 14px !important;
    border-radius: 8px !important;
    color: #1a1a2e !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}
.woocommerce-checkout .select2-container--default .select2-results__option[data-selected=true] {
    background: rgba(53,97,172,0.08) !important;
    color: #1a1a2e !important;
    font-weight: 600 !important;
}
.woocommerce-checkout .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #3561ac !important;
    color: #fff !important;
}


/* --- 2. Form Labels --- */
.woocommerce-checkout .form-row label {
    font-weight: 600 !important;
    color: #1a1a2e !important;
    font-size: 14px !important;
    margin-bottom: 6px !important;
}

/* --- 3. Section Headings --- */
.woocommerce-checkout h3,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .order-review-heading {
    color: #1a1a2e !important;
    font-weight: 700 !important;
    letter-spacing: -0.3px !important;
}

/* Give checkout sections a stable gutter away from the viewport edge. */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout .woocommerce-shipping-fields {
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* --- 4. Order Summary Card --- */
.woocommerce-checkout .woocommerce-checkout-review-order-table-wrapper,
.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table {
    background: #f7f8fc !important;
    border-radius: 12px !important;
    padding: 20px !important;
    border: 1px solid #e8eaf0 !important;
}
.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table th,
.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table td {
    border-color: #e8eaf0 !important;
}
.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table .order-total td {
    font-size: 20px !important;
    font-weight: 700 !important;
}

/* --- 5. Payment Method Cards --- */
body.woocommerce-checkout ul.wc_payment_methods.payment_methods li.wc_payment_method,
body .woocommerce-checkout .wc_payment_methods li.wc_payment_method {
    border: 2px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 14px 18px !important;
    margin-bottom: 10px !important;
    transition: all 0.2s ease !important;
    background: #fff !important;
    list-style: none !important;
}
body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method.active,
body .woocommerce-checkout .wc_payment_methods li.wc_payment_method.active {
    border-color: #3561ac !important;
    background: #f0f4fb !important;
    box-shadow: 0 0 0 3px rgba(53,97,172,0.08) !important;
}
body.woocommerce-checkout .wc_payment_methods li.wc_payment_method label,
body .woocommerce-checkout .wc_payment_methods li label {
    font-weight: 600 !important;
    cursor: pointer !important;
    font-size: 15px !important;
    color: #1a1a2e !important;
}
body .woocommerce-checkout .payment_box {
    background: transparent !important;
    padding: 10px 0 0 28px !important;
    color: #666 !important;
    font-size: 13.5px !important;
}
body .woocommerce-checkout .payment_box::before {
    display: none !important;
}

/* --- 6. Place Order Button --- */
.woocommerce-checkout #place_order {
    background: #2d54a0 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    padding: 16px 32px !important;
    border-radius: 10px !important;
    width: 100% !important;
    min-height: 56px !important;
    transition: all 0.25s !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(45,84,160,0.25) !important;
    text-transform: uppercase !important;
}
.woocommerce-checkout #place_order:hover {
    background: #234080 !important;
    box-shadow: 0 6px 20px rgba(45,84,160,0.35) !important;
    transform: translateY(-1px) !important;
}

/* --- 7. Coupon Section - Smaller/Subtler --- */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
    background: transparent !important;
    border: none !important;
    color: #888 !important;
    font-size: 13px !important;
    padding: 8px 0 !important;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a {
    color: #3561ac !important;
    font-weight: 500 !important;
}

/* --- 8. Spacing --- */
.woocommerce-checkout .col2-set {
    padding-right: 32px !important;
}
.woocommerce-checkout .form-row {
    margin-bottom: 16px !important;
}

/* --- 9. Order Review Sticky on Desktop --- */
@media (min-width: 992px) {
    .woocommerce-checkout #order_review_heading,
    .woocommerce-checkout .woocommerce-checkout-review-order {
        position: sticky !important;
        top: 80px !important;
    }
}

/* --- 10. YOUR ORDER heading --- */
.woocommerce-checkout #order_review_heading {
    color: #1a1a2e !important;
    font-size: 22px !important;
    text-align: center !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid #3561ac !important;
    margin-bottom: 16px !important;
}

/* --- 11. Checkout page subtle background --- */
.woocommerce-checkout .entry-content,
.woocommerce-checkout .site-content {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 40%) !important;
}

/* --- 12. Terms & Conditions link --- */
.woocommerce-checkout .woocommerce-terms-and-conditions-link {
    color: #3561ac !important;
    font-weight: 600 !important;
}

/* --- 13. Mobile Responsive Tweaks --- */
@media (max-width: 768px) {
    .woocommerce-checkout .col2-set {
        padding-right: 0 !important;
    }
    .woocommerce-checkout #place_order {
        font-size: 16px !important;
        min-height: 52px !important;
    }
    .ep-trust-badges {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    .ep-trust-badges span {
        font-size: 12px !important;
    }
}

/* ============================================
   NAVIGATION - UPPERCASE MENU ITEMS
   ============================================ */

html .wd-nav-main > li > a.woodmart-nav-link,
html .wd-nav.wd-nav-main > li > a.woodmart-nav-link,
a.woodmart-nav-link {
    text-transform: uppercase !important;
}

html .wd-nav-mobile > li > a.woodmart-nav-link {
    text-transform: uppercase !important;
}


/* ============================================================
   Emirates Peptides — Product Page Improvements
   ============================================================ */

.ep-product-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 14px;
  flex-wrap: wrap;
}
.ep-rating-badge {
  display: inline-flex;
  align-items: center;
  background: #f59e0b;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.02em;
  line-height: 1;
}
.ep-rating-stars {
  display: flex;
  align-items: center;
  gap: 1px;
}
.ep-star-icon {
  font-size: 1rem;
  color: #e2e8f0;
  line-height: 1;
}
.ep-star-icon.filled { color: #f59e0b; }
.ep-rating-link {
  font-size: 0.82rem;
  color: #2563eb;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color 0.15s;
}
.ep-rating-link:hover { color: #1d4ed8; }

.woocommerce-product-gallery { min-height: 400px !important; }
.woocommerce-product-gallery .woocommerce-product-gallery__image {
  background: #f0f5fa;
  border-radius: 16px;
  overflow: hidden;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 380px;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 380px;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image img,
.woocommerce-product-gallery__wrapper img {
  width: 100% !important;
  height: auto !important;
  max-height: 460px !important;
  object-fit: contain !important;
  padding: 24px !important;
  display: block;
}
.flex-control-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px !important;
  flex-wrap: wrap;
}
.flex-control-thumbs li {
  list-style: none;
  width: 64px !important;
  height: 64px !important;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid #e2e8f0;
  transition: border-color 0.15s;
  cursor: pointer;
}
.flex-control-thumbs li:hover,
.flex-control-thumbs li .flex-active { border-color: #2563eb !important; }
.flex-control-thumbs li img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 4px !important;
  max-height: unset !important;
}

.ep-trust-signals {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 14px 0 18px;
  padding: 14px 16px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
}
.ep-trust-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.88rem;
  color: #1e3a2f;
  font-weight: 500;
  line-height: 1.4;
}
.ep-trust-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: #16a34a;
  color: #fff;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 800;
  flex-shrink: 0;
  line-height: 1;
}

@media (min-width: 1025px) {
  footer .footer-sidebar.wd-grid-g {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr 1fr !important;
    gap: 40px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  footer .footer-sidebar.wd-grid-g .footer-column {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: none !important;
    float: none !important;
  }
  footer .footer-sidebar.wd-grid-g .footer-column-2 { display: contents !important; }
}

span.nav-link-text,
.wd-nav span.nav-link-text,
.wd-nav-main span.nav-link-text,
.wd-nav-mobile span.nav-link-text,
.wd-header span.nav-link-text {
    font-family: "Inter", Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
}

.single-product .product_title,
.single-product h1.product_title {
    line-height: 1.1 !important;
}

/* ============================================================
   HOMEPAGE PRODUCT TABS — Mobile
   2026-06-13: legacy page-builder-scoped rules removed
   (builder deactivated 2026-06-11). Kept live WoodMart rule.
   ============================================================ */
@media (max-width: 768px) {
    .wd-products-tabs .product {
        transform: none !important;
        -webkit-transform: none !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
        opacity: 1 !important;
        animation: none !important;
        -webkit-animation: none !important;
        transition: none !important;
        -webkit-transition: none !important;
        will-change: auto !important;
    }
}

/* 2026-04-24: Lift category page title clear of sticky header (overrides .wd-header-overlap .wd-page-title) */
@media (max-width: 768.98px) {
  .wd-header-overlap .wd-page-title.page-title,
  body .wd-page-title.page-title {
    padding-top: 140px !important;
  }
}

/* 2026-04-24: Hide cookie consent reopen icon on mobile */
@media (max-width: 768px) {
  [data-cky-tag="revisit-consent"] { display: none !important; }
}

/* 2026-04-24: Push single product content below sticky header on mobile */
@media (max-width: 768px) {
  body.single-product #content {
    padding-top: var(--wd-header-sticky-h, 70px) !important;
  }
}

/* 2026-04-24: Fix BUY NOW + ADD TO CART overflow on mobile single product page */
@media (max-width: 768px) {
  body.single-product form.cart {
    flex-wrap: nowrap !important;
    width: 100% !important;
    gap: 8px !important;
  }
  body.single-product form.cart :where(.single_add_to_cart_button, .wd-buy-now-btn) {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding-inline: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}