/*
Theme Name: Astra Child
Theme URI: https://blissfulbellies.com.au/
Description: Child theme for Astra
Author: BlissfulBellies
Author URI: https://blissfulbellies.com.au/
Template: astra
Version: 1.4.33
Text Domain: astra-child
*/

/* Parent stylesheet loaded via wp_enqueue_style() with 'astra-theme-css' dependency in functions.php */
/* Removed @import to prevent render-blocking and potential double-loading */

/* Your custom styles go below this line */

/* Font Declarations */
@font-face {
    font-family: 'Larsseit';
    src: url('fonts/LarsseitMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Larsseit';
    src: url('fonts/LarsseitMedium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Larsseit';
    src: url('fonts/LarsseitBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* Color Variables */
:root {
    --bb-primary: #eed6d3;
    --bb-secondary: #141414;
    --bb-accent: #fff7ca;
    --bb-text: #333;
}

/* give space between the date picker and the other form fields */
.bb-date-picker-container {
  margin-bottom: 1.5em; /* adjust this value to taste */
}

/* if you want a bit more space above the picker too: */
.bb-date-picker-label {
  margin-bottom: 0.5em;
  display: block;
}

/* ==============================================
   BACK LINK ON SINGLE PRODUCT PAGES
   ============================================== */

.bb-single-product-back-container {
    margin-bottom: 25px;
    display: block;
    width: 100%;
    clear: both;
}

/* Increase margin for pantry items to create more space from product image */
.bb-single-product-back-container:has(.bb-back-pantry) {
    margin-bottom: 40px;
}

.bb-back-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    background: transparent !important;
    color: #666 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    font-family: 'Larsseit', sans-serif !important;
    transition: all 0.2s ease !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

.bb-back-button:hover {
    color: #CB6CE6 !important;
    text-decoration: underline !important;
    transform: translateX(-2px) !important;
    background: transparent !important;
}

.bb-back-button:focus {
    outline: 2px solid #CB6CE6 !important;
    outline-offset: 2px !important;
    border-radius: 2px !important;
    background: transparent !important;
}

/* Mobile styling for back link */
@media (max-width: 768px) {
    .bb-single-product-back-container {
        margin-bottom: 20px;
    }

    .bb-single-product-back-container:has(.bb-back-pantry) {
        margin-bottom: 30px;
    }

    .bb-back-button {
        font-size: 14px !important;
        padding: 8px 0 !important;
        min-height: 36px;
        display: inline-flex !important;
        align-items: center !important;
    }
}

/* Product Modifier Styles - Consolidated in weekly-menus.css and components/modifiers.css */

/* Brand Filter Tiles - Consolidated in pantry-styles.css */

/* --- Category Section --- */
.bb-category-section {
  margin-top: 0.25em;
  margin-left: 0;
  padding-left: 0;
  padding-right: 10px;
  padding-bottom: 20px;
}

/* --- Category Heading --- */
.bb-filter-heading {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 0.5em;
  color: #32244e;
  text-align: left;
}

/* --- Category Tile Row --- */
.bb-category-tiles {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 10px;
  justify-content: flex-start;
  padding-bottom: 10px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.bb-category-tiles::-webkit-scrollbar {
  display: none;              /* Hide scrollbar (Chrome/Safari) */
}

/* --- Individual Category Tile --- */
.bb-category-tile {
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 14px;
  color: #32244e;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 100px;
  max-width: 150px;
  text-align: center;
}
.bb-category-tile:hover,
.bb-category-tile.active {
  background: #a87abb;
  color: #32244e;
  border-color: #a87abb;
  transform: scale(1.01);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* --- Unified Landing Page --- */
.bb-unified-landing {
  padding: 2rem 0;
  max-width: 800px;
  margin: 0 auto;
}

.bb-landing-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding: 0 1rem;
}

/* Legacy styles removed - see newer .bb-landing-tile rule below */

/* Hover effects moved to .bb-tile-image:hover rule */

/* Legacy link styles removed - see newer .bb-landing-tile a rule below */

.bb-tile-content h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #32244e;
}

.bb-tile-content p {
  color: #666;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 768px) {
  .bb-landing-tiles {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0 0.5rem;
  }
  
  .bb-landing-tile {
    min-height: 150px;
  }
  
  /* Mobile link padding removed for edge-to-edge images */
  
  .bb-tile-content h3 {
    font-size: 1.25rem;
  }
  
  .bb-tile-content p {
    font-size: 0.9rem;
  }
}

/* Checkout page styles */
.woocommerce-checkout .product-name,
.woocommerce-checkout .woocommerce-table__product-name,
.woocommerce-checkout .cart_item .product-name,
.woocommerce-checkout table.shop_table .product-name,
.woocommerce-checkout .woocommerce-cart-form__cart-item .product-name,
.woocommerce-checkout .order_item .product-name {
    font-weight: bold !important;
}

/* Show subtotal on cart page (product cost without shipping) */
.wc-block-cart .wp-block-woocommerce-cart-order-summary-subtotal-block,
.wc-block-cart-container .wp-block-woocommerce-cart-order-summary-subtotal-block,
.wp-block-woocommerce-cart-order-summary-subtotal-block {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Ensure subtotal is not hidden by any wrapper */
.wc-block-cart .wc-block-components-totals-item:has(.wp-block-woocommerce-cart-order-summary-subtotal-block),
.wc-block-cart-container .wc-block-components-totals-item:has(.wp-block-woocommerce-cart-order-summary-subtotal-block) {
    display: block !important;
    visibility: visible !important;
}

/* Hide subtotal only on checkout page */
.woocommerce-checkout-review-order .cart-subtotal,
.woocommerce-checkout .order-review .cart-subtotal {
    display: none !important;
}

/* Hide shipping block completely on cart page but add subtext */
.wc-block-cart .wp-block-woocommerce-cart-order-summary-shipping-block {
    display: none !important;
}


/* Landing Page Large Tiles */
.bb-unified-landing {
    max-width: 1320px;
    margin: 0 auto;
    padding: 20px 10px;
}

.bb-landing-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
}

.bb-landing-tile {
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    overflow: hidden;
    border-radius: 12px;
    border: 3px solid transparent;
    background: transparent;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.bb-landing-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border-color: #CB6CE6;
}

.bb-landing-tile a {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

.bb-tile-image {
    width: 100%;
    height: 400px;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    margin: 0;
    padding: 0;
    border: none;
}

.bb-tile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Removed background-image rules - now using <img> tags with fetchpriority for better LCP */

/* Hover effects moved to .bb-landing-tile:hover for entire tile interaction */

.bb-landing-tile .bb-tile-content {
    text-align: center;
    padding: 0;
    color: #333;
    background: transparent;
}

.bb-landing-tile .bb-tile-explanation {
    background: #fff7fa !important;
    padding: 20px !important;
    margin: 0 !important;
    border-radius: 0 0 12px 12px !important;
    text-align: left !important;
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.bb-landing-tile .bb-tile-explanation h3 {
    color: #32244e !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    margin: 0 0 15px 0 !important;
    display: block !important;
    text-align: center !important;
    font-family: 'Larsseit', sans-serif !important;
}

.bb-landing-tile .bb-tile-explanation h4 {
    color: #32244e !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    margin: 0 0 10px 0 !important;
    display: block !important;
}

.bb-landing-tile .bb-tile-explanation p {
    color: #333 !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    margin: 0 0 15px 0 !important;
    display: block !important;
}

.bb-landing-tile .bb-tile-explanation p:last-child {
    margin-bottom: 0 !important;
}

/* h3 styles moved to .bb-tile-explanation h3 above */

.bb-landing-tile .bb-tile-content p {
    font-size: 1rem;
    font-weight: 400;
    margin: 0;
    color: #666;
    line-height: 1.4;
}

/* Touch interactions for mobile */
@media (hover: none) and (pointer: coarse) {
    .bb-landing-tile:hover {
        transform: none;
    }
    
    .bb-landing-tile:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
}

/* Mobile responsive design */
@media (max-width: 768px) {
    .bb-landing-tiles {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .bb-tile-image {
        height: 300px;
    }
    
    .bb-landing-tile .bb-tile-content {
        padding: 0;
    }
    
    .bb-landing-tile .bb-tile-explanation {
        padding: 15px !important;
        margin: 0 !important;
    }
    
    .bb-landing-tile .bb-tile-explanation h3 {
        font-size: 1.75rem !important;
    }
    
    .bb-landing-tile .bb-tile-explanation h4 {
        font-size: 1.1rem !important;
    }
    
    .bb-landing-tile .bb-tile-explanation p {
        font-size: 0.9rem !important;
    }
    
    .bb-landing-tile .bb-tile-content p {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .bb-unified-landing {
        padding: 15px 5px;
    }
    
    .bb-tile-image {
        height: 250px;
    }
    
    .bb-landing-tile .bb-tile-content {
        padding: 0;
    }
    
    .bb-landing-tile .bb-tile-explanation {
        padding: 12px !important;
        margin: 0 !important;
    }
    
    .bb-landing-tile .bb-tile-explanation h3 {
        font-size: 1.5rem !important;
    }
    
    .bb-landing-tile .bb-tile-explanation h4 {
        font-size: 1rem !important;
    }
    
    .bb-landing-tile .bb-tile-explanation p {
        font-size: 0.85rem !important;
    }
    
    .bb-landing-tile .bb-tile-content p {
        font-size: 0.9rem;
    }
}

/* ============================================
   LANDING PAGE TRANSITION ANIMATIONS
   ============================================ */

/* Exit animation when clicking on landing tile */
.bb-landing-tile.bb-tile-transitioning,
.bb-landing-tile.bb-tile-transitioning-delayed {
    animation: tileExit 0.25s cubic-bezier(0.4, 0.0, 1, 1) forwards;
}

@keyframes tileExit {
    0% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
    100% {
        transform: scale(0.96) translateY(-8px);
        opacity: 0;
    }
}

/* Entrance animation for category pages coming from landing */
.bb-page-entering {
    opacity: 0;
    transform: translateY(20px);
}

.bb-page-entering.bb-page-entered {
    animation: pageEnter 0.35s cubic-bezier(0.0, 0.0, 0.2, 1) forwards;
}

@keyframes pageEnter {
    0% {
        opacity: 0;
        transform: translateY(12px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger animation for weekly menu tiles */
.bb-page-entered .bb-menu-tile {
    animation: menuTileFadeIn 0.3s cubic-bezier(0.0, 0.0, 0.2, 1) backwards;
}

.bb-page-entered .bb-menu-tile:nth-child(1) {
    animation-delay: 0.03s;
}

.bb-page-entered .bb-menu-tile:nth-child(2) {
    animation-delay: 0.06s;
}

.bb-page-entered .bb-menu-tile:nth-child(3) {
    animation-delay: 0.09s;
}

.bb-page-entered .bb-menu-tile:nth-child(4) {
    animation-delay: 0.12s;
}

.bb-page-entered .bb-menu-tile:nth-child(5) {
    animation-delay: 0.15s;
}

.bb-page-entered .bb-menu-tile:nth-child(6) {
    animation-delay: 0.18s;
}

@keyframes menuTileFadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .bb-landing-tile.bb-tile-transitioning,
    .bb-page-entering.bb-page-entered,
    .bb-page-entered .bb-menu-tile {
        animation: none !important;
        transition: none !important;
    }
}

/* Multi-date delivery fee styling */
.cart_totals .multi-date-delivery-fees {
    border-left: 3px solid #007cba;
    padding-left: 10px;
    margin: 10px 0;
}

.fee[data-fee-name*="Delivery -"] td {
    font-size: 14px;
    padding: 5px 0;
}

.fee[data-fee-name*="Delivery -"] .amount {
    color: #007cba;
    font-weight: 500;
}

/* Add visual separator for multiple delivery fees */
.fee[data-fee-name*="Delivery -"]:not(:last-of-type) {
    border-bottom: 1px dotted #ddd;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

/* Postcode autocomplete styling */
.bb-postcode-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-top: none;
    max-height: 200px;
    overflow-y: auto;
    z-index: 9999;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.bb-postcode-suggestions .suggestion-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.bb-postcode-suggestions .suggestion-item:hover {
    background-color: #f8f9fa;
}

.bb-postcode-field-container {
    position: relative;
}

/* Shipping notice styling */
.bb-shipping-notice {
    margin: 10px 0;
    padding: 15px;
    background: #f0f8ff;
    border-left: 4px solid #007cba;
    border-radius: 4px;
}

.bb-shipping-notice strong {
    color: #005a87;
}

/* Multi-date delivery styling */
.bb-multi-date-shipping-method {
    background: #f9f9f9 !important;
    border-left: 3px solid #007cba !important;
    padding: 10px !important;
    margin: 5px 0 !important;
    border-radius: 4px;
}

.bb-multi-date-breakdown {
    background: #f9f9f9 !important;
    border-left: 3px solid #007cba !important;
}

.bb-multi-date-breakdown div {
    font-family: monospace;
    font-size: 14px;
    line-height: 1.4;
}

/* Hide digital wallet buttons on WooCommerce Blocks cart page */
.wc-block-cart .wc-block-components-express-payment,
.wc-block-cart .apple-pay-button,
.wc-block-cart .gpay-card-info-container {
    display: none !important;
}

/* Hide the "Or" divider text on cart page */
.wc-block-cart .wc-block-components-express-payment-continue-rule,
.wc-block-cart .wc-block-components-express-payment-continue-rule--cart {
    display: none !important;
}

/* Hide shipping costs on WooCommerce Blocks cart ONLY - NOT checkout */
.wc-block-cart-container .wc-block-components-totals-shipping,
.woocommerce-cart .wc-block-components-totals-shipping {
    display: none !important;
}

/* Hide 'Estimated total' completely on cart page (it includes shipping costs) */
.wc-block-cart .wc-block-components-totals-footer-item,
.wc-block-cart .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item),
.wc-block-cart-container .wc-block-components-totals-footer-item,
.wc-block-cart-container .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item) {
    display: none !important;
}

/* Force subtotal to be visible even when pickup methods are selected */
body.pickup-method-selected .wc-block-cart .wp-block-woocommerce-cart-order-summary-subtotal-block,
body.pickup-method-selected .wc-block-cart-container .wp-block-woocommerce-cart-order-summary-subtotal-block,
body.pickup-method-selected .wp-block-woocommerce-cart-order-summary-subtotal-block {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Force subtotal wrapper to be visible when pickup methods are selected */
body.pickup-method-selected .wc-block-cart .wc-block-components-totals-item:has(.wp-block-woocommerce-cart-order-summary-subtotal-block),
body.pickup-method-selected .wc-block-cart-container .wc-block-components-totals-item:has(.wp-block-woocommerce-cart-order-summary-subtotal-block) {
    display: block !important;
    visibility: visible !important;
}

/* Add "Shipping calculated at checkout" text under the actual subtotal */
.wc-block-cart .wp-block-woocommerce-cart-order-summary-subtotal-block::after,
.wc-block-cart-container .wp-block-woocommerce-cart-order-summary-subtotal-block::after {
    content: "Shipping calculated at checkout";
    display: block;
    font-size: 12px;
    color: #666;
    font-style: italic;
    text-align: left;
    margin-top: 5px;
    padding-left: 0;
}

/* REMOVED: Old CSS targeting non-existent subtotal block */

/* Remove bottom borders from hidden shipping sections only - CART PAGE ONLY */
.wc-block-cart .wp-block-woocommerce-cart-order-summary-shipping-block,
.wc-block-cart-container .wp-block-woocommerce-cart-order-summary-shipping-block {
    border-bottom: none !important;
    border-top: none !important;
}

/* REMOVED: WooCommerce Blocks address field reordering customization */


/* Google Places Autocomplete Styling */
/* Legacy .pac-container and .pac-item styles removed - Extended Component Library uses different structure */

/* Legacy autocomplete styling removed - Extended Component Library handles positioning */

/* ========================================
   CHECKOUT FIELD CUSTOMIZATION
   ======================================== */

/* Three-column layout for postcode/city/state row */
.woocommerce-checkout .form-row-third {
    width: 32% !important;
    float: left;
    margin-right: 2%;
}

.woocommerce-checkout .form-row-third:last-child {
    margin-right: 0;
}

/* Ensure proper clearing after three-column rows */
.woocommerce-checkout .form-row-third:nth-child(3n+1) {
    clear: both;
}

/* Enhanced styling for checkout forms */
.woocommerce-checkout .form-row {
    margin-bottom: 1.5em;
}

/* Better spacing for address fields */
.woocommerce-checkout .form-row-wide {
    clear: both;
    width: 100%;
}

.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
    width: 48%;
}

.woocommerce-checkout .form-row-first {
    float: left;
    margin-right: 4%;
}

.woocommerce-checkout .form-row-last {
    float: right;
    margin-right: 0;
}

/* Clear floats after two-column rows */
.woocommerce-checkout .form-row-last::after {
    content: "";
    display: table;
    clear: both;
}


/* Legacy .pac-container styles removed - Extended Component Library uses gmpx-place-picker__dropdown */

/* Legacy icon positioning removed - Extended Component Library handles icon styling internally */

/* Google Places Extended Component Library - Clean Implementation */
/* Using gmpx-place-picker with CSS custom properties for font control */

/* Extended Component Library CSS Custom Properties - Official approach */
:root {
    /* Typography */
    --gmpx-font-family-base: 'Comfortaa', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --gmpx-font-size-base: 16px;

    /* Colors */
    --gmpx-color-surface: #ffffff;
    --gmpx-color-primary: transparent; /* Remove all outline colors */
    --gmpx-color-on-surface: #000000;
    --gmpx-color-on-surface-variant: #666666;

    /* Layout */
    --gmpx-border-radius: 4px;

    /* Input field specific - all outline colors set to transparent */
    --gmpx-color-surface-variant: #ffffff;
    --gmpx-color-outline: transparent;
    --gmpx-color-outline-variant: transparent;
    --gmpx-outlined-field-border-color: transparent;
    --gmpx-outlined-field-idle-border-color: transparent;
    --gmpx-outlined-field-default-border-color: transparent;
    --gmpx-border-color: transparent;
    --gmpx-border-color-idle: transparent;
    --gmpx-border-color-default: transparent;

    /* Padding and spacing */
    --mdc-text-field-container-height: 64px;
    --mdc-text-field-filled-container-height: 64px;
    --mdc-text-field-outlined-container-height: 64px;

    /* Input padding */
    --gmpx-input-padding: 16px 12px;

    /* Border colors */
    --mdc-text-field-outlined-idle-border-color: transparent;
    --mdc-text-field-outlined-hover-border-color: transparent;
    --mdc-text-field-outlined-disabled-border-color: transparent;
    --mdc-text-field-outlined-focused-border-color: transparent;

    /* Outline colors - set all to transparent */
    --mdc-text-field-focus-ring-color: transparent;
    --mdc-text-field-outlined-focus-outline-color: transparent;
    --mdc-outlined-text-field-focus-outline-color: transparent;
    --mdc-outlined-text-field-outline-color: transparent;
}

/* Extended Component Library container - CSS custom properties approach only */
.wc-block-components-address-form gmpx-place-picker,
.woocommerce-checkout gmpx-place-picker,
gmpx-place-picker {
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    /* All styling handled via CSS custom properties in :root */
}

/* Border styling handled via --mdc-text-field-outlined-*-border-color custom properties in :root */

/* Position autocomplete dropdown below the address field */
gmpx-place-picker .gmpx-place-picker__dropdown,
.wc-block-components-address-form gmpx-place-picker .gmpx-place-picker__dropdown,
.woocommerce-checkout gmpx-place-picker .gmpx-place-picker__dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    background: white !important;
    border: 1px solid #ddd !important;
    border-top: none !important;
    border-radius: 0 0 4px 4px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    max-height: 200px !important;
    overflow-y: auto !important;
}

/* Style individual dropdown items */
gmpx-place-picker .gmpx-place-picker__suggestion,
.wc-block-components-address-form gmpx-place-picker .gmpx-place-picker__suggestion,
.woocommerce-checkout gmpx-place-picker .gmpx-place-picker__suggestion {
    padding: 10px 12px !important;
    border-bottom: 1px solid #eee !important;
    cursor: pointer !important;
    /* Font styling handled via CSS custom properties */
}

gmpx-place-picker .gmpx-place-picker__suggestion:hover,
.wc-block-components-address-form gmpx-place-picker .gmpx-place-picker__suggestion:hover,
.woocommerce-checkout gmpx-place-picker .gmpx-place-picker__suggestion:hover {
    background-color: #f5f5f5 !important;
}

gmpx-place-picker .gmpx-place-picker__suggestion:last-child,
.wc-block-components-address-form gmpx-place-picker .gmpx-place-picker__suggestion:last-child,
.woocommerce-checkout gmpx-place-picker .gmpx-place-picker__suggestion:last-child {
    border-bottom: none !important;
}

/* Wrapper-based solution - gray outline with purple external glow on focus */
.bb-place-picker-wrapper {
    position: relative !important;
    width: 100% !important;
    min-height: 56px !important;
    border: none !important;
    outline: 1px solid #d5d5d5 !important;
    border-radius: 4px !important;
    background: white !important;
    box-sizing: border-box !important;
    display: block !important;
    font-family: 'Comfortaa', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
    font-size: 16px !important;
    transition: box-shadow 0.2s ease !important;
}

/* External glow on focus - keep outline gray */
.bb-place-picker-wrapper:focus-within {
    box-shadow: 0 0 0 4px rgba(203,108,230,0.2) !important;
}

/* Force gmpx-place-picker to have no borders - wrapper handles all styling */
.bb-place-picker-wrapper gmpx-place-picker {
    width: 100% !important;
    height: 100% !important;
    min-height: 56px !important;
    background: transparent !important;
    padding: 6px 12px !important;
    box-sizing: border-box !important;
    border-radius: 4px !important;
    border: none !important;
}

/* Hide floating labels that might overlap with wrapper - only for address fields */
.wc-block-components-address-form .wc-block-components-text-input:has(.bb-place-picker-wrapper) label,
.woocommerce-checkout .wc-block-components-text-input:has(.bb-place-picker-wrapper) label {
    display: none !important;
}

/* Ensure gmpx-place-picker fills the space properly */
.wc-block-components-address-form .wc-block-components-text-input gmpx-place-picker,
.woocommerce-checkout .wc-block-components-text-input gmpx-place-picker {
    position: relative;
    z-index: 1;
    background: white;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .woocommerce-checkout .form-row-first,
    .woocommerce-checkout .form-row-last,
    .woocommerce-checkout .form-row-third {
        width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
        margin-bottom: 1em;
    }

    /* Stack fields vertically on mobile */
    .woocommerce-checkout .form-row-third:nth-child(3n+1) {
        clear: none;
    }

    /* Mobile optimization for gmpx-place-picker - CSS custom properties approach only */
    /* All styling handled via CSS custom properties in :root - no direct overrides needed */
}

/* WooCommerce Blocks specific styling */
.wc-block-checkout .wc-block-components-address-form .form-row-third {
    width: 32% !important;
    margin-right: 2%;
}

.wc-block-checkout .wc-block-components-address-form .form-row-third:last-child {
    margin-right: 0;
}

/* REMOVED: WooCommerce Blocks checkout field reordering customization
 * This was causing conflicts with the default WooCommerce checkout flow
 */

/* Extended Component Library handles dropdown styling via CSS custom properties */

/* Postcode Autocomplete Loading Styles */
.bb-loading {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 11-6.219-8.56"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px 16px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* REMOVED: WooCommerce Blocks address field grouping and reordering customization */