/* Modal Styles */
#woodofy-lm-store-selector-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.woodofy-lm-store-selector-content {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 90%;
}

.woodofy-lm-store-selector-content h2 {
    margin-bottom: 20px;
}

#woodofy-lm-store-selector-modal-dropdown {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
}

#woodofy-lm-store-selector-submit {
    background: #0071a1;
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}

#woodofy-lm-store-selector-submit:hover {
    background: #046224;
}

/* Visible focus indicator for the modal's controls. The modal moves focus to the <select>
   with a scripted .focus() call (there's nothing for a keyboard user to click first), and
   Chromium/Firefox do not reliably match :focus-visible on a scripted focus() the way they do
   for real keyboard navigation — so :focus is used here rather than :focus-visible, to
   guarantee the ring shows regardless of how focus arrived. Outline never affects layout
   (it paints outside the border box), so this cannot change the modal's measured size.
   No other rule in this file sets outline, so this is purely additive. */
#woodofy-lm-store-selector-modal-dropdown:focus,
#woodofy-lm-store-selector-modal .woodofy-lm-store-selector-dropdown:focus,
#woodofy-lm-store-selector-submit:focus {
    outline: 2px solid #553089;
    outline-offset: 2px;
}

/* Single-product location selector: the label used to be a plain <div>, which is block by
   default. Turning it into a real <label for="..."> (for the select's accessible name) makes
   it inline by default instead, so the block layout is restored explicitly here. */
.woodofy_lm-location-label {
    display: block;
}

/* Header Dropdown */
#woodofy-lm-header-store-selector {
    display: inline-block;
    margin-left: 20px;
}

#woodofy-lm-store-selector-header {
    padding: 5px;
}


/* Add this to your assets/css/style.css file */

/* Shortcode Styles */
.woodofy-lm-shortcode-store-selector {
    margin: 20px 0;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.woodofy-lm-shortcode-title {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 600;
}

.woodofy-lm-selector-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.woodofy-lm-location-dropdown {
    flex: 1;
    min-width: 200px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.woodofy-lm-shortcode-submit {
    padding: 8px 15px;
    background-color: #0071a1;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.woodofy-lm-shortcode-submit:hover {
    background-color: #046224;
}

@media (max-width: 480px) {
    .woodofy-lm-selector-form {
        flex-direction: column;
    }
    
    .woodofy-lm-location-dropdown,
    .woodofy-lm-shortcode-submit {
        width: 100%;
    }
}

.location-loop-details {
    margin: 8px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.stock-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

.stock-badge.in-stock {
    background-color: #e8f5e9;
    color: #2e7d32;
}

.stock-badge.out-of-stock {
    background-color: #ffebee;
    color: #c62828;
}

.stock-badge.on-backorder {
    background-color: #fff3e0;
    color: #ef6c00;
}

.location-price-loop {
    font-size: 14px;
}

.location-price-loop small {
    opacity: 0.7;
}

.location-specific-info {
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.location-specific-info h4 {
    margin-top: 0;
    color: #333;
    font-size: 16px;
    margin-bottom: 10px;
}

.location-stock, .location-price {
    margin-bottom: 8px;
}

.in-stock {
    color: #7cb342;
    font-weight: bold;
}

.out-of-stock {
    color: #d32f2f;
    font-weight: bold;
}

.on-backorder {
    color: #ff9800;
    font-weight: bold;
}

.location-specific-info-loop {
    font-size: 13px;
    margin: 5px 0;
}

.location-stock-loop {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 3px;
    background-color: #f8f8f8;
}

.product-location-unavailable {
    margin: 15px 0;
    padding: 15px;
    background-color: #f8d7da;
    border-left: 5px solid #dc3545;
    color: #721c24;
    font-weight: bold;
}
.unavailable-notice {
    margin: 0;
    font-size: 16px;
}
.button.unavailable-product {
    background-color: #f5f5f5 !important;
    color: #888 !important;
    cursor: not-allowed;
    border: 1px solid #ddd !important;
}

.select2-container--open {
    z-index: 99999;
}
.select2-selection__rendered{
    text-align: left;
}
form#woodofy-lm-store-selector-form-modal>div, form#woodofy-lm-store-selector-form-modal>select,form#woodofy-lm-store-selector-form-modal>.select2 {
    margin-bottom: 1rem;
}
form#woodofy-lm-store-selector-form-modal>div * {
 width: 100% !important;
}







/* Add this to your assets/css/style.css file */

.woodofy-lm-location-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.woodofy-lm-popup-content {
    background-color: #fff;
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.woodofy-lm-popup-header {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.woodofy-lm-popup-header h3 {
    margin: 0;
    font-size: 18px;
}

.woodofy-lm-close-popup {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #555;
}

.woodofy-lm-popup-body {
    flex: 1;
    overflow: auto;
}

.woodofy-lm-location-step {
    height: 100%;
}

.woodofy-lm-map-container {
    position: relative;
    height: 70vh;
}

.woodofy-lm-location-map {
    height: 100%;
    width: 100%;
}

.woodofy-lm-map-controls {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    padding: 0 20px;
    z-index: 99999999999999999;
}

.woodofy-lm-location-details {
    padding: 20px;
}

.woodofy-lm-details-header {
    margin-bottom: 20px;
}

.woodofy-lm-details-header h4 {
    margin: 0 0 10px 0;
    font-size: 16px;
}

.woodofy-lm-address-preview {
    margin: 0;
    color: #666;
    font-size: 14px;
}

.woodofy-lm-form-group {
    margin-bottom: 15px;
}

.woodofy-lm-form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.woodofy-lm-form-group input,
.woodofy-lm-form-group select,
.woodofy-lm-form-group textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.woodofy-lm-form-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.woodofy-lm-form-actions .button {
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
}

.woodofy-lm-form-actions .button-primary {
    background-color: #0073aa;
    color: white;
    border: none;
}

.woodofy-lm-form-actions .button-primary:hover {
    background-color: #046224;
}

.woodofy-lm-user-location-features {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.woodofy-lm-saved-locations-dropdown {
    flex: 1;
}

.woodofy-lm-saved-locations-dropdown label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.woodofy-lm-saved-locations {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Add this to your assets/css/style.css file */

/* Address content button */
.address-content {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.address-content:hover {
    background-color: #046224;
}

.address-label-icon {
    margin-right: 8px;
}

.header-order-button-content {
    font-weight: 500;
}

/* Tooltip popup */
.woodofy-lm-location-tooltip {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-width: 400px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    margin-top: 5px;
}

.bds-c-modal__content {
    padding: 16px;
}

.where-component-search-form {
    margin-bottom: 16px;
}

.LocationSearchForm-component {
    display: flex;
    flex-direction: column;
}

.search-form {
    display: flex;
    flex-direction: row;
}

.address-search-container {
    flex: 1;
}

.validation-wrapper {
    position: relative;
}

.search-input-container {
    position: relative;
}

.search-input-container input {
    width: 100%;
    padding: 10px 40px 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.search-input-container label {
    position: absolute;
    top: 10px;
    left: 12px;
    color: #999;
    font-size: 14px;
    pointer-events: none;
    transition: all 0.2s;
}

.search-input-container input:focus + label,
.search-input-container input:not(:placeholder-shown) + label {
    top: -8px;
    left: 8px;
    font-size: 12px;
    background-color: #fff;
    padding: 0 4px;
}

.bds-c-btn-circular-cursor {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.bds-c-btn-circular {
    background: none;
    border: none;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.bds-c-btn-circular:hover {
    background-color: #046224;
}

.location-search-button-Mweb {
    margin-top: 12px;
}

.location-search-go-icon {
    width: 100%;
}

.saved-address-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.saved-address-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.saved-address-list-item-container {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.saved-address-list-item-container:hover {
    background-color: #f5f5f5;
}

.saved-address-list-item-container.focused {
    background-color: #f0f7ff;
    border: 1px solid #0073aa;
}

.saved-address-icon {
    margin-right: 12px;
}

.saved-address-list-item {
    flex: 1;
}

.two-lines {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.saved-address-tooltip {
    margin-left: auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .woodofy-lm-location-tooltip {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        max-width: 350px;
        max-height: 80vh;
        overflow-y: auto;
    }
}

/* Loading Overlay */
.woodofy-lm-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    z-index: 9999999;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.woodofy-lm-loading-overlay.active {
    display: flex;
}

.woodofy-lm-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #e0e0e0;
    border-top: 4px solid #555555;
    border-radius: 50%;
    animation: woodofy-lm-spin 0.8s linear infinite;
}

@keyframes woodofy-lm-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.woodofy-lm-loading-text {
    margin-top: 15px;
    font-size: 15px;
    color: #555;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}