/**
 * Wineland Box Display — Stylesheet
 * Compatible with WoodMart theme (dark + light modes).
 *
 * Uses CSS custom properties so WoodMart can override via its own variables.
 */

/* ==========================================================================
   Custom properties (fallback values; WoodMart vars override when available)
   ========================================================================== */
:root {
	--wbd-primary:         var(--woodmart-primary-color, #8b1a1a);
	--wbd-accent:          var(--woodmart-accent-color,  #c0392b);
	--wbd-bg:              var(--woodmart-widget-background, #ffffff);
	--wbd-bg-box:          #fdf6ec;
	--wbd-border:          #e0e0e0;
	--wbd-border-box:      #d4a017;
	--wbd-text:            var(--woodmart-body-color, #333333);
	--wbd-text-muted:      #777777;
	--wbd-btn-bg:          var(--woodmart-primary-color, #8b1a1a);
	--wbd-btn-bg-hover:    #a82020;
	--wbd-btn-text:        #ffffff;
	--wbd-radius:          6px;
	--wbd-badge-bg:        #e8a800;
	--wbd-badge-text:      #ffffff;
	--wbd-best-value-bg:   #2ecc71;
	--wbd-best-value-text: #ffffff;
	--wbd-shadow:          0 2px 8px rgba(0, 0, 0, 0.08);
	--wbd-shadow-hover:    0 4px 16px rgba(0, 0, 0, 0.14);
}

/* Dark theme (WoodMart adds .dark-skin to body) */
.dark-skin {
	--wbd-bg:        #1e1e1e;
	--wbd-bg-box:    #2a2212;
	--wbd-border:    #3a3a3a;
	--wbd-border-box:#8b6914;
	--wbd-text:      #e8e8e8;
	--wbd-text-muted:#aaaaaa;
	--wbd-shadow:    0 2px 8px rgba(0, 0, 0, 0.4);
	--wbd-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   Container
   ========================================================================== */
.wbd-buy-options {
	display:        flex;
	flex-direction: column;
	gap:            16px;
	margin:         20px 0 24px;
	font-family:    inherit;
}

/* ==========================================================================
   Card base
   ========================================================================== */
.wbd-card {
	position:         relative;
	background:       var(--wbd-bg);
	border:           1px solid var(--wbd-border);
	border-radius:    var(--wbd-radius);
	padding:          18px 20px 20px;
	box-shadow:       var(--wbd-shadow);
	transition:       box-shadow 0.2s ease, border-color 0.2s ease;
	/* Flex column so price+button can be pinned to bottom */
	display:          flex;
	flex-direction:   column;
}

.wbd-card:hover {
	box-shadow: var(--wbd-shadow-hover);
}

/* Box-of-6 card — highlighted */
.wbd-card--box {
	background:   var(--wbd-bg-box);
	border-color: var(--wbd-border-box);
	border-width: 2px;
}

/* ==========================================================================
   Card header (title row — badge now on its own line below)
   ========================================================================== */
.wbd-card__header {
	display:     flex;
	align-items: center;
	gap:         8px;
	margin-bottom: 4px;
}

.wbd-card__icon {
	font-size:   1.4em;
	line-height: 1;
	flex-shrink: 0;
}

.wbd-card__title {
	font-size:   1.05rem;
	font-weight: 700;
	color:       var(--wbd-text);
	flex:        1;
}

/* ==========================================================================
   Badges
   ========================================================================== */
/* Cards with savings badge: extra top padding */
.wbd-card--box,
.wbd-card--single {
	padding-top: 28px;
}

.wbd-savings-badge {
	position:      absolute;
	top:           -1px;
	right:         -1px;
	background:    var(--wbd-badge-bg);
	color:         var(--wbd-badge-text);
	font-size:     0.78rem;
	font-weight:   800;
	letter-spacing: 0.5px;
	padding:       4px 12px;
	border-radius: 0 var(--wbd-radius) 0 var(--wbd-radius);
	white-space:   nowrap;
	text-transform: uppercase;
}

.wbd-best-value-badge {
	display:       inline-block;
	/* Fit to content width, don't stretch in flex container */
	align-self:    flex-start;
	width:         fit-content;
	/* Match Add to Cart button color */
	background:    var(--wbd-btn-bg);
	color:         var(--wbd-btn-text);
	font-size:     0.7rem;
	font-weight:   700;
	padding:       2px 8px;
	border-radius: 20px;
	white-space:   nowrap;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	/* Margin below badge, before image */
	margin-bottom: 14px;
}

/* ==========================================================================
   Price
   ========================================================================== */
.wbd-card__price {
	font-size:      1.25rem;
	font-weight:    700;
	color:          var(--wbd-primary);
	margin-bottom:  14px;
	margin-top:     auto;
	display:        flex;
	flex-direction: column;
	align-items:    flex-start;
	gap:            2px;
}

.wbd-card__price--was {
	font-size:       0.9rem;
	font-weight:     400;
	color:           var(--wbd-text-muted);
	text-decoration: line-through;
	order:           -1; /* regular price on top, sale price below */
}

/* WooCommerce injects a <span class="woocommerce-Price-amount"> */
.wbd-card__price .woocommerce-Price-amount {
	color: inherit;
}

/* ==========================================================================
   Card images — fixed equal height for single bottle and box
   ========================================================================== */
.wbd-single-image,
.wbd-box-image {
	/* Flex container to vertically center the image */
	display:        flex;
	align-items:    center;
	justify-content: center;
	height:         180px;
	margin:         10px 0 16px;
	border-radius:  4px;
	overflow:       hidden;
}

.wbd-single-image img,
.wbd-box-image img {
	display:       block;
	max-width:     100%;
	max-height:    170px;
	width:         auto;
	height:        auto;
	border-radius: 4px;
	object-fit:    contain;
}

/* Single bottle needs larger image to match box visual weight */
.wbd-single-image img {
	max-height:    170px;
	min-height:    140px;
	height:        170px;
	width:         auto;
}

/* ==========================================================================
   Add to Cart button
   ========================================================================== */
.wbd-add-to-cart.button {
	display:          block;
	width:            100%;
	padding:          13px 20px;
	background:       var(--wbd-btn-bg);
	color:            var(--wbd-btn-text) !important;
	border:           none;
	border-radius:    var(--wbd-radius);
	font-size:        0.95rem;
	font-weight:      700;
	text-align:       center;
	cursor:           pointer;
	transition:       background 0.2s ease, opacity 0.2s ease, transform 0.1s ease;
	text-transform:   uppercase;
	letter-spacing:   0.5px;
}

.wbd-add-to-cart.button:hover,
.wbd-add-to-cart.button:focus {
	background: var(--wbd-btn-bg-hover);
	color:      var(--wbd-btn-text) !important;
	transform:  translateY(-1px);
}

.wbd-add-to-cart.button:active {
	transform: translateY(0);
}

.wbd-add-to-cart.button:disabled,
.wbd-add-to-cart.button.loading {
	opacity: 0.65;
	cursor:  not-allowed;
	transform: none;
}

/* Box card button — gold/amber accent */
.wbd-add-to-cart--box.button {
	background: #c0832a;
}
.wbd-add-to-cart--box.button:hover,
.wbd-add-to-cart--box.button:focus {
	background: #a06820;
}

/* ==========================================================================
   View Cart link (injected by JS after adding)
   ========================================================================== */
.wbd-view-cart {
	display:      block;
	text-align:   center;
	margin-top:   8px;
	font-size:    0.85rem;
	color:        var(--wbd-primary);
	text-decoration: underline;
}

/* ==========================================================================
   Spinner (inside button)
   ========================================================================== */
.wbd-add-to-cart.loading::after {
	content:    '';
	display:    inline-block;
	width:      14px;
	height:     14px;
	border:     2px solid rgba(255,255,255,0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation:  wbd-spin 0.6s linear infinite;
	margin-left: 8px;
	vertical-align: middle;
}

@keyframes wbd-spin {
	to { transform: rotate(360deg); }
}

/* ==========================================================================
   Responsive — side-by-side on larger screens
   ========================================================================== */
@media (min-width: 640px) {
	.wbd-buy-options {
		flex-direction: row;
		align-items:    stretch;
	}

	.wbd-card {
		flex: 1;
	}
}

@media (max-width: 639px) {
	.wbd-card__header {
		flex-wrap: wrap;
	}

	.wbd-savings-badge {
		font-size: 0.72rem;
		padding:   3px 9px;
	}
}

/* ==========================================================================
   WoodMart compatibility overrides
   ========================================================================== */

/* WoodMart uses .wd-add-btn and may inject extra styles on .button.alt;
   ensure our buttons are not overridden by theme resets */
.wbd-add-to-cart.button.alt {
	line-height: normal;
}

/* Prevent WoodMart's quantity-input from appearing inside our widget */
.wbd-buy-options .quantity {
	display: none !important;
}

/* Layout overrides removed — using theme defaults */

/* ==========================================================================
   Product page layout — equal columns using WoodMart grid variables
   ========================================================================== */

.single-product .product-images,
.single-product .summary {
	--wd-col-lg: 5;
}

/* Empty spacer in single bottle card to align with Best Value badge */
.wbd-badge-spacer {
	height: 20px;  /* Match approximate height of .wbd-best-value-badge with its margin */
	margin-bottom: 14px;  /* Same as .wbd-best-value-badge margin-bottom */
}

/* Coming Soon state */
.wbd-coming-soon {
  background: #f59e0b !important;
  color: #fff !important;
}

.wbd-add-to-cart.wbd-disabled {
  background: #f1c87c !important;
  border-radius: 6px !important;
  color: #443100 !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

.wbd-add-to-cart.wbd-disabled:hover {
  background: #f1c87c !important;
  color: #443100 !important;
  opacity: 1 !important;
}

/* Override browser default disabled opacity for wbd buttons */
.wbd-btn[disabled] {
  opacity: 1 !important;
}

/* ==========================================================================
   Two-row price grid (below H1 title)
   ========================================================================== */
.wl-price-grid {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            6px;
    line-height:    1.2;
}
.wl-price-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    width:           100%;
}
.wl-price-pill {
    display:          inline-flex;
    align-items:      center;
    background:       #e8e8e8;
    color:            #888;
    border-radius:    4px;
    padding:          2px 8px;
    font-size:        0.82em;
    font-weight:      400;
    text-decoration:  line-through;
}
.wl-price-pill .woocommerce-Price-amount,
.wl-price-pill .woocommerce-Price-currencySymbol {
    color: inherit;
}
.wl-price-pill--empty {
    text-decoration: none;
    background: transparent;
    color: transparent;
    padding: 0;
    font-size: 0;
}
.wl-price-sale {
    font-size:   1em;
    font-weight: 700;
    color:       inherit;
}
.wl-price-sale .woocommerce-Price-amount {
    color: inherit;
}
.wl-price-grid--single-product {
    margin-bottom: 8px;
}
.wl-price-grid--single-product .wl-price-pill {
    font-size: 0.9rem;
}
.wl-price-grid--single-product .wl-price-sale {
    font-size: 1.4rem;
    color: var(--wd-primary-color, #d4a847);
}
.wl-price-grid--single-product .wl-price-sale .woocommerce-Price-amount {
    color: inherit;
}
.wl-price-row--labels {
    display:         flex;
    justify-content: space-between;
    width:           100%;
    margin-bottom:   2px;
}
.wl-price-label {
    font-size:      0.75rem;
    font-weight:    600;
    color:          var(--wbd-text-muted, #777);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Coming soon button style */
.wbd-btn.wbd-disabled,
.wbd-btn.wbd-disabled:disabled {
    background:    #f1c87c !important;
    border-radius: 6px;
    color:         #443100 !important;
    opacity:       1 !important;
    cursor:        not-allowed !important;
}
.wbd-btn.wbd-disabled:hover {
    background: #f1c87c !important;
    color:      #443100 !important;
    opacity:    1 !important;
}

/* Add to Cart button style */
.wbd-btn:not(.wbd-disabled) {
    background:    #8c1b19;
    border-radius: 6px;
    color:         #fff;
    opacity:       1;
}
.wbd-btn:not(.wbd-disabled):hover {
    background: #6e1513;
    color:      #fff;
    opacity:    1;
}