/*
Theme Name:  Divi Child Theme
Theme URI:   http://yourwebsite.com
Description: Child theme for Divi — Johnson's Florist & Balloon Co.
Author:      Name
Author URI:  http://yourwebsite.com
Version:     1.1.0
Template:    Divi
*/


/* =========================================================================
   1. HIDE WOOCOMMERCE'S BUILT-IN SHIP-TO-DIFFERENT-ADDRESS TOGGLE
   ─────────────────────────────────────────────────────────────────────────
   Customers use our custom fulfillment card UI instead.
   The fieldset itself stays in the DOM (controlled by JS in functions.php).
   ========================================================================= */

.woocommerce-shipping-fields #ship-to-different-address,
#ship-to-different-address-checkbox {
    display: none !important;
}


/* =========================================================================
   2. FULFILLMENT SELECTOR — CARD UI
   ─────────────────────────────────────────────────────────────────────────
   Two large clickable cards: "Pick Up In Store" / "Deliver to an Address".
   Active card gets a coloured border + subtle background.
   ========================================================================= */

.fulfillment-selector {
    margin: 28px 0 0;
    padding: 0;
}

.fulfillment-selector__heading {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 14px;
    color: #333;
}

.fulfillment-selector__cards {
    display: flex;
    gap: 14px;
}

/* Stack on narrow viewports */
@media (max-width: 600px) {
    .fulfillment-selector__cards {
        flex-direction: column;
    }
}

.fulfillment-card {
    flex: 1;
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            6px;
    padding:        18px 20px;
    border:         2px solid #ddd;
    border-radius:  8px;
    cursor:         pointer;
    background:     #fff;
    transition:     border-color 0.18s ease, background 0.18s ease,
                    box-shadow 0.18s ease;
    position:       relative;
    user-select:    none;
}

.fulfillment-card:hover {
    border-color: #b85c5c;
    background:   #fdf5f5;
}

.fulfillment-card--active {
    border-color: #9b1c1c;
    background:   #fff6f6;
    box-shadow:   0 0 0 3px rgba(155, 28, 28, 0.12);
}

/* Hide the native radio — we style the card instead */
.fulfillment-card input[type="radio"] {
    position: absolute;
    opacity:  0;
    width:    0;
    height:   0;
}

.fulfillment-card__icon {
    font-size: 1.8rem;
    line-height: 1;
}

.fulfillment-card__title {
    font-size:   1rem;
    font-weight: 700;
    color:       #222;
}

.fulfillment-card--active .fulfillment-card__title {
    color: #9b1c1c;
}

.fulfillment-card__desc {
    font-size:   0.85rem;
    color:       #666;
    line-height: 1.45;
}


/* =========================================================================
   3. RECIPIENT SHIPPING ADDRESS SECTION
   ─────────────────────────────────────────────────────────────────────────
   DOM structure (confirmed via browser inspector):
     div.woocommerce-shipping-fields          ← outer WC wrapper, always rendered
       h3#ship-to-different-address           ← hidden by rule in Section 1
       div.shipping_address                   ← WooCommerce/Divi set display:none here
         div.woocommerce-shipping-fields__field-wrapper  ← actual input fields
         p#shipping_phone_field
         div.customdeliverydate

   Styling is applied to div.shipping_address — the element that is actually
   shown/hidden — so the border, background and padding animate correctly
   with the jQuery slideDown/slideUp in functions.php.
   ========================================================================= */

div.shipping_address {
    margin-top:    24px;
    padding:       20px 24px 12px;
    border:        1px solid #e8e0e0;
    border-radius: 8px;
    background:    #fffafa;
    overflow:      visible;
    display: none;
}

/* Section heading inside the shipping block */
div.shipping_address h3,
.woocommerce-shipping-fields h3:not(#ship-to-different-address) {
    font-size:     1.05rem;
    font-weight:   700;
    margin:        0 0 16px;
    color:         #9b1c1c;
}

/* "Same as my billing address" checkbox line */
#copy_billing_address_field {
    margin-bottom: 18px;
}
#copy_billing_address_field label {
    font-weight: 600;
    font-size:   0.9rem;
    color:       #444;
}


/* =========================================================================
   4. PICKUP DATE WRAPPER
   ========================================================================= */

.pickup-date-wrapper {
    margin-top: 20px;
}

.pickup-date-label {
    font-size:   0.95rem;
    font-weight: 700;
    color:       #333;
}


/* =========================================================================
   5. DELIVERY DATE SECTION  (rendered inside the shipping form)
   ========================================================================= */

.delivery-date-heading {
    font-size:   1rem;
    font-weight: 700;
    margin:      20px 0 8px;
    color:       #333;
}

.customdeliverydate {
    margin-top: 8px;
}


/* =========================================================================
   6. OUT-OF-AREA DELIVERY NOTICE
   ========================================================================= */

.delivery-zone-notice,
#delivery-zone-notice {
    background:    #fbeaea;
    border:        1px solid #f5c2c2;
    border-left:   4px solid #dc3545;
    border-radius: 4px;
    padding:       12px 16px;
    margin-bottom: 16px;
    font-size:     14px;
    line-height:   1.6;
    color:         #721c24;
}

#delivery-zone-notice strong {
    color: #721c24;
}


/* =========================================================================
   7. SAME-DAY CUTOFF NOTICE
   ========================================================================= */

#delivery-cutoff-notice {
    display:     none; /* JS shows it when before the 1:30 PM cutoff */
    font-size:   13px;
    color:       #555;
    margin-top:  6px;
    padding:     6px 10px;
    background:  #fff8e1;
    border-left: 3px solid #f0ad4e;
    border-radius: 3px;
}


/* =========================================================================
   8. PLACE ORDER BUTTON — DISABLED STATE
   ========================================================================= */

#place_order.button--disabled,
#place_order:disabled {
    opacity:        0.5 !important;
    cursor:         not-allowed !important;
    pointer-events: auto !important; /* keep pointer-events so cursor shows */
}


/* =========================================================================
   9. CHARACTER COUNTER  (checkout-char-limit.js)
   ========================================================================= */

.char-counter {
    font-size:  12px;
    margin-top: 4px;
    transition: color 0.25s ease;
}


/* =========================================================================
   10. ADDITIONAL INFORMATION SECTION
   ─────────────────────────────────────────────────────────────────────────
   "Additional information" (order notes + message card) is shown below
   the main form. Light styling so it reads as a secondary section.
   ========================================================================= */

.woocommerce-additional-fields {
    margin-top:  24px;
}

.woocommerce-additional-fields h3 {
    font-size:   1.05rem;
    font-weight: 700;
    color:       #333;
    margin:      0 0 14px;
}

/* Message-card textarea hint */
#customermessage + .char-counter {
    color: #888;
}


/* =========================================================================
   10b. MESSAGE CARD SECTION
   ─────────────────────────────────────────────────────────────────────────
   Mirrors the fulfillment-card aesthetic so the gift message block reads
   as a first-class checkout step, not an afterthought.
   ========================================================================= */

.message-card-section {
    margin-top:    20px;
    padding:       18px 20px;
    border:        2px solid #ddd;
    border-radius: 8px;
    background:    #fff;
    transition:    border-color 0.18s ease, box-shadow 0.18s ease;
}

/* Active/focused state — matches .fulfillment-card--active colours */
.message-card-section:focus-within {
    border-color: #9b1c1c;
    box-shadow:   0 0 0 3px rgba(155, 28, 28, 0.12);
}

.message-card-section__heading {
    font-size:   1.05rem;
    font-weight: 700;
    margin:      0 0 14px;
    color:       #333;
}

/* Remove WooCommerce default bottom margin inside the card */
.message-card-section .form-row {
    margin-bottom: 0;
}


/* =========================================================================
   10c. MESSAGE REMINDER NOTICE
   ─────────────────────────────────────────────────────────────────────────
   Warm amber colour scheme — clearly distinct from the red zone-error
   notice and WooCommerce green success messages.
   ========================================================================= */

.message-reminder-notice {
    background:    #fff8e1;
    border:        1px solid #ffe082;
    border-left:   4px solid #f0ad4e;
    border-radius: 4px;
    padding:       14px 16px;
    margin-bottom: 16px;
    font-size:     14px;
    line-height:   1.6;
    color:         #5d4037;
}

.message-reminder-notice p {
    margin: 0 0 10px;
}

.message-reminder-notice__actions {
    display:   flex;
    gap:       10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.message-reminder-notice__btn {
    padding:       8px 16px;
    border-radius: 4px;
    font-size:     13px;
    font-weight:   600;
    cursor:        pointer;
    border:        none;
    transition:    background 0.15s ease, border-color 0.15s ease;
}

.message-reminder-notice__btn--primary {
    background: #9b1c1c;
    color:      #fff;
}

.message-reminder-notice__btn--primary:hover {
    background: #7a1515;
}

.message-reminder-notice__btn--secondary {
    background:   transparent;
    color:        #5d4037;
    border:       1px solid #c8a96e;
}

.message-reminder-notice__btn--secondary:hover {
    background: #fff3e0;
}


/* =========================================================================
   11. GENERAL CHECKOUT SECTION SPACING
   ========================================================================= */

.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout #order_review {
    margin-bottom: 28px;
}