/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/* ========================================
   CART & CHECKOUT IMAGE STYLING
   ======================================== */

/* Checkout item image styling */
.drobe-checkout-item-wrapper {
	display: flex;
	align-items: center;
	gap: 12px;
}

.drobe-checkout-item-image {
	width: 50px !important;
	height: 50px !important;
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid #ddd;
	flex-shrink: 0;
}

.drobe-checkout-item-details {
	flex: 1;
}

.drobe-checkout-quantity {
	font-weight: bold;
	color: white;
}

/* Cart item image styling */
.drobe-cart-item-with-image {
	display: flex;
	align-items: center;
	gap: 15px;
	width: 100%;
}

.drobe-cart-item-image {
	width: 80px !important;
	height: 80px !important;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid #ddd;
	flex-shrink: 0;
}

/* Override Elementor and WooCommerce specific cart image styles */
.woocommerce table.cart img {
    width: 150px !important;
    height: 150px !important;
	max-width: 200px !important;
	max-height: 200px !important;
	object-fit: cover !important;
	border-radius: 8px !important;
}

.drobe-cart-item-details {
	flex: 1;
}

/* Order review image styling */
.drobe-order-review-item {
	display: flex;
	align-items: center;
	gap: 12px;
}

.drobe-order-review-image {
	width: 50px !important;
	height: 50px !important;
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid #ddd;
	flex-shrink: 0;
}

.drobe-order-item-details {
	flex: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.drobe-cart-item-image,
	.drobe-checkout-item-image,
	.drobe-order-review-image {
		width: 50px !important;
		height: 50px !important;
	}

	/* Override WooCommerce thumbnail images in cart on mobile */
	.drobe-cart-item-with-image img,
	.drobe-cart-item-with-image .attachment-woocommerce_thumbnail,
	.elementor-widget-woocommerce-cart .woocommerce table.cart img,
	.woocommerce-js table.shop_table .product-thumbnail img,
	.woocommerce-page table.shop_table .product-thumbnail img {
		width: 50px !important;
		height: 50px !important;
		max-width: 50px !important;
		max-height: 50px !important;
	}

	.drobe-cart-item-with-image,
	.drobe-checkout-item-wrapper,
	.drobe-order-review-item {
		gap: 8px;
	}
}

/* Form styling - labels and legends */
label, legend {
	color: white !important;
}

/* Make sure images don't break layout in narrow columns */
.woocommerce-checkout-review-order-table .drobe-checkout-item-wrapper {
	justify-content: center;
	flex-direction: column;
}

.woocommerce-checkout-review-order-table .drobe-checkout-quantity {
	margin-top: 5px;
	font-size: 0.9em;
}

/* Cart table specific styling */
.woocommerce-cart-form .drobe-cart-item-with-image {
	align-items: flex-start;
}

.woocommerce-cart-form .drobe-cart-item-details a {
	text-decoration: none;
	color: inherit;
}

.woocommerce-cart-form .drobe-cart-item-details a:hover {
	color: #007cba;
}

/* CART */

.elementor-menu-cart__container {
    display: none !important;
}

/* ========================================
   TOASTIFY STYLING & Z-INDEX FIX
   ======================================== */

/* Ensure Toastify notifications appear above everything */
.toastify {
    z-index: 999999 !important;
    font-family: inherit !important;
    font-size: 16px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.drobe-toast {
    z-index: 999999 !important;
    position: fixed !important;
}

/* Override any theme z-index that might interfere */
.toastify.toastify-center {
    z-index: 999999 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
}