/* ==========================================================================
   Buy Once Plugin - Complete Stylesheet
   All plugin-specific styling consolidated here
   ========================================================================== */

/* -------------------------------
   Form Container & Base Styling
   ------------------------------- */
.variations_form.cart {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Select elements styling */
.variations_form.cart select {
    padding: 0px 10px;
    border: 1px solid #7b9b8a;
    border-radius: 4px;
    font-size: 16px;
    margin-left: 0px;
}

/* -------------------------------
   Purchase Box Container/Card
   ------------------------------- */
.bo-purchase-mode {
    /* layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    position: relative;
    top: -65px;
    /* box */
    width: 420px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 24px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;

    /* spacing vars */
    --bo-radio: 20px;  /* radio diameter */
    --bo-gap: 12px;    /* space between radio and label */
}

/* -------------------------------
   Choice Rows (Subscribe / One-time)
   ------------------------------- */
.bo-card {
    display: flex;
    align-items: center;
    gap: var(--bo-gap);
}

.bo-card-title {
    white-space: nowrap;
    font-weight: 400;
    font-size: 18px;
}

/* Custom Radio Buttons */
.bo-card input[type="radio"] {
    width: 16px;
    height: 16px;

    /* remove native UI */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* custom look */
    border: 2px solid #c48b2c;   /* outer ring color */
    border-radius: 50%;
    background: #fff;            /* unchecked fill */
    position: relative;
    top: -5px;                   /* nudge to align with text */

    outline: none;
    box-shadow: none;            /* no blue halo */
}

.bo-card input[type="radio"]:focus {
    outline: none;
    box-shadow: none;
}

.bo-card input[type="radio"]:checked {
    background: #c48b2c;         /* fully filled when selected */
    border-color: #c48b2c;
    box-shadow: none;
}

/* -------------------------------
   Subscription Details Section
   ------------------------------- */
.bo-subscribe-side {
    display: block;
    margin-left: calc(var(--bo-radio) + var(--bo-gap));
    width: calc(100% - (var(--bo-radio) + var(--bo-gap)));
    text-align: left;
}

.bo-subscribe-side[hidden] { 
    display: none !important; 
}

.bo-subscribe-title {
    display: inline-block;
    white-space: nowrap;
    font-weight: 400;
    margin-bottom: 6px;
    font-size: 18px;
}

.bo-subscribe-row select { 
    width: 100%; 
    max-width: none; 
}

/* -------------------------------
   Size Selection
   ------------------------------- */
.bo-size-row {
    display: block;
    margin-left: calc(var(--bo-radio) + var(--bo-gap));
    width: calc(100% - (var(--bo-radio) + var(--bo-gap)));
    text-align: left;
}

.bo-size-title {
    display: inline-block;
    white-space: nowrap;
    font-weight: 400;
    margin-bottom: 6px;
    font-size: 18px;
    padding-top: 10px;
}

.bo-size-field select { 
    width: 100%; 
    max-width: none; 
}

/* -------------------------------
   Price Display
   ------------------------------- */
.bo-total-price {
    font-weight: 700;
    margin-top: 10px;
    margin-left: calc(var(--bo-radio) + var(--bo-gap)); /* align to labels */
}

/* -------------------------------
   Quantity + Button Actions
   ------------------------------- */
.bo-actions {
    display: flex;
    flex-direction: column;   /* stack qty row and button row */
    align-items: flex-start;  /* keep left-aligned */
    gap: 14px;
    margin-top: 12px;
    width: 100%;
}

.bo-qty-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
}

.bo-qty-label { 
    margin-right: 8px; 
    font-size: 18px; 
}

.bo-actions .bo-qty-row input[type="number"] {
    width: 48px;
    height: 36px;
    padding: 0;
    text-align: center;
    line-height: 36px;
    border-radius: 6px;
}

/* -------------------------------
   Buttons (Add to Cart / View Cart)
   ------------------------------- */
.bo-button-row {
       width: 100%;
       margin-top: 10px;
       display: flex;
       flex-direction: column;
       gap: 10px;
   }
   
   /* Base button styling */
   .single_add_to_cart_button {
       background-color: #f9f4da;
       color: #A16438;
       padding: 10px 20px;
       border: 1px solid #7b9b8a;
       border-radius: 4px;
       font-size: 16px;
       cursor: pointer;
       transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
   }
   
   .single_add_to_cart_button:hover {
       background-color: #ffffff;
   }
   
   /* Coffee + merch success buttons use the same visual styling */
   .bo-button-row .single_add_to_cart_button,
   .bo-button-row .added_to_cart.wc-forward,
   .bo-button-row .bo-merch-view-cart {
       display: flex !important;
       align-items: center;
       justify-content: center;
       width: 100% !important;
       min-height: 52px;
       padding: 0 22px;
       font-weight: 400;
       text-align: center;
       color: #A16438 !important;
       font-family: 'Montserrat', sans-serif;
       font-size: 18px;
       border: 1px solid #000 !important;
       border-radius: 4px !important;
       background-color: #f9f4da !important;
       box-sizing: border-box;
       text-decoration: none;
       line-height: normal !important;
       float: none !important;
       clear: both !important;
       margin: 0 !important;
   }
   
   /* Hover matches coffee */
   .bo-button-row .single_add_to_cart_button:hover,
   .bo-button-row .added_to_cart.wc-forward:hover,
   .bo-button-row .bo-merch-view-cart:hover {
       color: #ffffff !important;
       background-color: #7b9b8a !important;
       border-color: #7b9b8a !important;
   }
   
   /* Keep the success button readable after Woo disables it */
   .single_add_to_cart_button.added {
       opacity: 1 !important;
       color: #A16438 !important;
   }
   
   .single_add_to_cart_button.added:disabled {
       opacity: 1 !important;
   }
   
   /* Back to shop spacing */
   .bo-continue-shopping {
       display: block;
       clear: both;
       margin-top: 14px;
   }
   
 .bo-purchase-mode--merch {
     width: 100%;
     max-width: 420px !important;
     margin-top: 40px;
 }
 
 .bo-purchase-mode--merch .bo-size-row {
     margin-left: 0;
     width: 100%;
 }
 
 .bo-purchase-mode--merch .bo-size-title {
     padding-top: 0;
 }
 
 .bo-purchase-mode--merch .single_variation_wrap {
     width: 100% !important;
 }
 
 .bo-purchase-mode--merch .woocommerce-variation-add-to-cart,
 .bo-purchase-mode--merch .variations_button,
 .bo-purchase-mode--merch .bo-actions {
     width: 100%;
     display: block;
 }      
 
 .bo-button-row .single_add_to_cart_button {
     width: 100% !important;
     display: flex !important;
 } 
 
/* -------------------------------
   Hide Duplicate Elements
   ------------------------------- */

/* Hide duplicate prices from WooCommerce output */
.woocommerce-variation-price,
form.variations_form .single_variation .price,
form.variations_form .single_variation_wrap .price {
    display: none !important;
}

/* Hide price in card labels if present */
.bo-card .bo-card-price {
    display: none !important;
}

/* Hide no-JS fallback when JavaScript is active */
.bon-noscript { 
    display: none !important; 
}

/* -------------------------------
   Inline Notices
   ------------------------------- */
.bo-notices .woocommerce-message,
.bo-notices .woocommerce-error,
.bo-notices .woocommerce-info { 
    margin: 0;
}

/* -------------------------------
   Responsive Design
   ------------------------------- */
@media (max-width: 480px) {
    .bo-purchase-mode {
        padding: 18px;
        border-radius: 6px;
        gap: 14px;
        width: 100%;
    }
    
    .bo-button-row .single_add_to_cart_button {
        width: 100%;
    }
    
    /* Full width selects on mobile */
    .bo-subscribe-row select,
    .bo-size-field select {
        width: 100%;
        max-width: none;
    }
}