/* ============================================================
   CART PAGE REDESIGN + RECENTLY VIEWED SLIDER
   Enqueued only on the Cart page (see functions.php Section 20d)
   ============================================================ */

/* ---------- Kill WooCommerce's default plain borders everywhere on this
   page. WooCommerce's own plugin stylesheet puts a flat 1px border on
   .cart-collaterals, .cross-sells and .cart_totals — that's the plain
   black-box look. We strip it with !important so our shadow-card look
   below always wins regardless of stylesheet load order. ---------- */
.woocommerce .cart-collaterals,
.woocommerce-page .cart-collaterals,
.cart-collaterals .cross-sells,
.cart-collaterals .cart_totals,
.woocommerce-cart-form,
.woocommerce-cart-form table.shop_table,
table.shop_table.cart{
    border: none !important;
    outline: none !important;
}

/* ---------- Recently Viewed section ---------- */
.recently-viewed-section{
    margin-bottom:20px;
    box-sizing:border-box;
    background:#fff;
    border-radius:12px;
    padding:24px;
    box-shadow:0 2px 14px rgba(0,0,0,0.08);
    overflow:hidden;
}

/* ---------- Italic quote ---------- */
.recently-viewed-quote{
    margin:0 0 20px;
    padding:20px 4px 0;
    font-family: 'Nunito Sans', sans-serif;
    font-style: italic;
    font-size:15px;
    line-height:1.6;
    color:#8a7f8a;
    text-align:center;
}

/* ---------- Gallery carousel ---------- */
.recentlyViewedSwiper{
    overflow:hidden;
    width:100%;
    padding-bottom:54px;
}
.recentlyViewedSwiper .swiper-wrapper{ margin:0 !important; }
.recentlyViewedSwiper .swiper-slide{
    height:auto;
    width:auto;
}

.gallery-item{
    position:relative;
    display:block;
    width:100%;
    aspect-ratio:1/1;
    border-radius:8px;
    overflow:hidden;
    background:#f5f0f5;
    text-decoration:none;
}
.gallery-item img{
    width:100%; height:100%;
    object-fit:cover; object-position:center;
    display:block;
    transition:transform .4s ease;
}
.gallery-item:hover img{
    transform:scale(1.06);
}
.gallery-caption{
    position:absolute;
    left:0; right:0; bottom:0;
    padding:10px 12px 8px;
    font-size:12px;
    font-weight:600;
    color:#fff;
    text-align:center;
    background:linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
    opacity:0;
    transform:translateY(6px);
    transition:opacity .25s ease, transform .25s ease;
}
.gallery-item:hover .gallery-caption{
    opacity:1;
    transform:translateY(0);
}

/* ---------- Carousel nav arrows + pagination dots ----------
   White circle background so the arrow is visible against the dark
   product photo, black arrow icon on top. */
.recentlyViewedSwiper .swiper-button-next,
.recentlyViewedSwiper .swiper-button-prev{
    color:#000;
    width:30px; height:30px;
    background:#fff;
    border-radius:50%;
    box-shadow:0 1px 4px rgba(0,0,0,0.25);
}
.recentlyViewedSwiper .swiper-button-next:after,
.recentlyViewedSwiper .swiper-button-prev:after{
    font-size:14px; font-weight:bold;
}
.recentlyViewedSwiper .swiper-button-prev{
    left:8px;
    right:auto;
}
.recentlyViewedSwiper .swiper-button-next{
    left:auto;
    right:8px;
}
.recentlyViewedSwiper .swiper-button-disabled{
    opacity:1 !important;
    pointer-events:auto !important;
    cursor:pointer !important;
}
.recentlyViewedSwiper .swiper-pagination{ bottom:0; }
.recentlyViewedSwiper .swiper-pagination-bullet-active{ background:#332b32; }

@media (max-width:480px){
    .recentlyViewedSwiper .swiper-button-next,
    .recentlyViewedSwiper .swiper-button-prev{ display:none; }
    .gallery-caption{ opacity:1; transform:none; background:linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0)); }
}

/* ---------- Shipping calculator, cart table, cart totals (unchanged) ---------- */
.woocommerce-shipping-calculator .form-row{ margin-bottom:12px; }
.woocommerce-shipping-calculator label{
    display:block; font-size:12px; font-weight:600; color:#332b32; margin-bottom:4px;
}
.woocommerce-shipping-calculator select,
.woocommerce-shipping-calculator input.input-text{
    width:100%; border:1.5px solid #e0d6ea; border-radius:6px;
    padding:8px 10px; font-size:14px; color:#332b32; background:#fff;
}
.woocommerce-shipping-calculator button[name="calc_shipping"]{
    background:#332b32; color:#fff; border:none; border-radius:6px;
    padding:10px 20px; font-weight:600; cursor:pointer; transition:background .2s ease;
}
.woocommerce-shipping-calculator button[name="calc_shipping"]:hover{ background:#4d424b; }

table.shop_table.cart{
    border-collapse:separate; border-spacing:0 12px; width:100%;
}
table.shop_table.cart th{
    background:#7c6678 !important; color:#fff !important;
    border:none !important; padding:14px; font-size:13px;
    font-weight:600; text-transform:uppercase; letter-spacing:0.3px;
}
table.shop_table.cart tr.woocommerce-cart-form__cart-item{
    background:#fff;
    box-shadow:0 2px 10px rgba(0,0,0,0.06);
    border-radius:10px;
}
table.shop_table.cart td{
    padding:16px 14px; vertical-align:middle; border:none;
}
table.shop_table.cart td.product-remove a{
    color:#332b32; font-size:20px; text-decoration:none;
}
table.shop_table.cart td.product-name a{
    color:#7c6678; font-weight:600; text-decoration:none;
}
table.shop_table.cart .quantity .qty{
    width:60px; text-align:center; border:1.5px solid #e0d6ea;
    border-radius:6px; padding:8px 6px;
}
table.shop_table.cart td.actions{ background:none; box-shadow:none; padding:6px 14px; }
table.shop_table.cart td.actions .button{
    background:#332b32; color:#fff; border-radius:6px;
    padding:10px 22px; border:none; font-weight:600; cursor:pointer;
    transition:background .2s ease;
}
table.shop_table.cart td.actions .button:hover{ background:#4d424b; }

.cart_totals{
    background:#fff; border-radius:12px; padding:0 24px 24px;
    box-shadow:0 2px 14px rgba(0,0,0,0.08);
    border:none !important;
    overflow:hidden;
}
.cart_totals h2{
    font-size:16px; font-weight:600;
    background:#7c6678 !important; color:#fff !important;
    margin:0 -24px 20px;
    padding:16px 24px;
    border:none !important;
    box-shadow:none !important;
}
.cart_totals table.shop_table{ border:none; width:100%; }
.cart_totals table.shop_table tr{ border-bottom:1px solid #f0eaf0; }
.cart_totals table.shop_table th,
.cart_totals table.shop_table td{
    padding:14px 0; border:none; vertical-align:top;
}
.cart_totals table.shop_table th{
    font-weight:600; color:#332b32; width:35%;
}

.cart_totals tr.woocommerce-shipping-totals td{
    display:flex; flex-direction:column; gap:8px;
}
.cart_totals tr.woocommerce-shipping-totals .woocommerce-Price-amount{
    font-weight:600; color:#332b32;
}
.cart_totals tr.woocommerce-shipping-totals p{
    margin:0; font-size:13px; color:#8a7f8a; line-height:1.5;
    background:#f8f5f8; padding:10px 12px; border-radius:8px;
}
.cart_totals .shipping-calculator-button{
    display:inline-block; align-self:flex-start;
    background:#332b32 !important; color:#fff !important; text-decoration:none;
    font-size:13px; font-weight:600; padding:8px 16px;
    border-radius:6px; margin-top:4px;
    transition:background .2s ease;
}
.cart_totals .shipping-calculator-button:hover{ background:#4d424b !important; }

.cart_totals tr.order-total th,
.cart_totals tr.order-total td{
    font-size:16px; font-weight:700; color:#332b32;
    border-top:1px solid #eee; padding-top:16px;
}

.cart_totals .checkout-button{
    display:block; width:100%; text-align:center;
    background:#332b32; color:#fff; padding:14px;
    border-radius:8px; font-weight:600; margin-top:18px;
    text-decoration:none; transition:background .2s ease;
}
.cart_totals .checkout-button:hover{ background:#4d424b; }

@media (max-width:900px){
    .cart_totals{ margin-top:20px; }
}

/* Show cart totals before the recently-viewed slider on mobile phones only.
   Both live inside .cart-collaterals (cross-sells/slider hooked at priority 5,
   cart_totals at priority 10 — see functions.php), so we flip the visual
   order here without touching the PHP hooks. Scoped to 600px and below so
   the desktop/laptop two-column layout (slider left, totals right) is
   untouched. */
@media (max-width:600px){
    .cart-collaterals{
        display:flex;
        flex-direction:column;
    }
    .cart-collaterals .cart_totals{
        order:1;
        margin-top:0;
    }
    .cart-collaterals .recently-viewed-section{
        order:2;
        margin-top:20px;
    }
}

@media (min-width:601px){
    .cart-collaterals{
        display:flex !important;
        align-items:stretch !important;
        flex-wrap:wrap;
    }
    .cart-collaterals .recently-viewed-section,
    .cart-collaterals .cart_totals{
        display:flex !important;
        flex-direction:column;
        height:auto;
    }
    .cart-collaterals .cart-trust-badge-section{
        flex:1;
        display:flex;
        flex-direction:column;
        justify-content:center;
        box-sizing:border-box;
    }
}



/* ---------- Dropdown arrow on the City field ----------
   The real City field is a dynamically-injected <select id="flower_city_calc_dropdown">
   (see flower_shipping_calculator_script() in functions.php) that replaces the
   hidden #calc_shipping_city text input once a valid pincode is entered.
   appearance:none removes any inconsistent native browser arrow, then a
   custom chevron is drawn via background-image so it looks the same in
   every browser. ---------- */
#flower_city_calc_dropdown{
    -webkit-appearance:none !important;
    -moz-appearance:none !important;
    appearance:none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0L5 6L10 0Z' fill='%23332b32'/></svg>") !important;
    background-repeat:no-repeat !important;
    background-position:right 14px center !important;
    background-color:#fff !important;
    padding-right:34px !important;
}
/* Mobile browsers (especially iOS Safari) dim disabled selects using
   -webkit-text-fill-color, which the "color" property alone can't override —
   this was making both the placeholder text and the arrow look invisible
   on phones even though desktop showed them fine. */
#flower_city_calc_dropdown:disabled{
    opacity:1 !important;
    -webkit-text-fill-color:#332b32 !important;
    color:#332b32 !important;
}

/* ---------- Permanently lock State to "Goa" — CSS only ----------
   The site only ships within Goa, so State should never appear as an
   editable dropdown. There's existing JS (flower_shipping_calculator_script()
   in functions.php) that tries to hide this select and swap in a plain
   "Goa" label, but it depends on jQuery timing and can fail silently if
   another script on the page errors first. This CSS rule hides the select
   unconditionally and draws a static "Goa" label in its place, so it works
   every time regardless of JS. ---------- */
#calc_shipping_state_field select#calc_shipping_state{
    display:none !important;
}
#calc_shipping_state_field .woocommerce-input-wrapper::after{
    content:"Goa";
    display:block;
    width:100%;
    box-sizing:border-box;
    padding:10px 14px;
    border:1.5px solid #e0d6ea;
    border-radius:0;
    font-size:14px;
    color:#2d2140;
    background:#fff;
}


#shipping-calculator-form{
    display:flex;
    flex-direction:column;
}
#shipping-calculator-form #calc_shipping_country_field{ order:1; }
#shipping-calculator-form #calc_shipping_state_field{ order:2; }
#shipping-calculator-form #calc_shipping_postcode_field{ order:3; }
#shipping-calculator-form #calc_shipping_city_field{ order:4; }
#shipping-calculator-form p:has(button[name="calc_shipping"]){ order:5; }
#shipping-calculator-form button[name="calc_shipping"]{ order:5; }