/**
 * In-Detail Catalog Stock Display — Stylesheet
 * Version:  1.0.0
 * Author:   Gerald Yapp @ In-Detail
 *
 * Design: Precision Industrial Catalog
 * Fonts:  Barlow Condensed (numerics) + Barlow (labels)
 */

/* ============================================================
   CUSTOM PROPERTIES
   ============================================================ */

:root {
	--idcs-font-display:  'Barlow Condensed', 'Arial Narrow', sans-serif;
	--idcs-font-body:     'Barlow', system-ui, sans-serif;

	/* In-stock — deep emerald */
	--idcs-in-stock-ink:     #065F46;
	--idcs-in-stock-bg:      #ECFDF5;
	--idcs-in-stock-border:  #A7F3D0;
	--idcs-in-stock-accent:  #059669;

	/* Low-stock — warm amber */
	--idcs-low-stock-ink:    #92400E;
	--idcs-low-stock-bg:     #FFFBEB;
	--idcs-low-stock-border: #FDE68A;
	--idcs-low-stock-accent: #D97706;

	/* Out-of-stock — slate rose */
	--idcs-oos-ink:          #7F1D1D;
	--idcs-oos-bg:           #FEF2F2;
	--idcs-oos-border:       #FECACA;
	--idcs-oos-accent:       #DC2626;

	/* Backorder — indigo */
	--idcs-bo-ink:           #1E3A8A;
	--idcs-bo-bg:            #EFF6FF;
	--idcs-bo-border:        #BFDBFE;
	--idcs-bo-accent:        #2563EB;

	/* Pending — cool gray */
	--idcs-pending-ink:      #4B5563;
	--idcs-pending-bg:       #F9FAFB;
	--idcs-pending-border:   #E5E7EB;
	--idcs-pending-accent:   #9CA3AF;

	/* Geometry */
	--idcs-radius:           7px;
	--idcs-left-bar:         4px;
	--idcs-pad-v:            14px;
	--idcs-pad-h:            18px;
	--idcs-icon-size:        38px;
	--idcs-gap:              13px;

	/* Motion */
	--idcs-ease:             cubic-bezier(0.4, 0, 0.2, 1);
	--idcs-spring:           cubic-bezier(0.34, 1.56, 0.64, 1);
	--idcs-dur:              0.32s;
}


/* ============================================================
   WRAPPER  (variable products — appended after variation form)
   ============================================================ */

.idcs-variation-stock-wrapper {
	margin-top:    12px;
	margin-bottom: 8px;
}


/* ============================================================
   BASE CARD
   ============================================================ */

.idcs-stock-display {
	display:          block;
	font-family:      var(--idcs-font-body);
	border-radius:    var(--idcs-radius);
	border:           1px solid transparent;
	border-left-width: var(--idcs-left-bar);
	overflow:         hidden;
	transition:       background-color var(--idcs-dur) var(--idcs-ease),
	                  border-color     var(--idcs-dur) var(--idcs-ease);

	/* Reset any Flatsome table/list inheritance */
	box-sizing: border-box;
}

.idcs-stock-display *,
.idcs-stock-display *::before,
.idcs-stock-display *::after {
	box-sizing: border-box;
}


/* ============================================================
   STATES — background / border
   ============================================================ */

.idcs-state-in-stock {
	background-color: var(--idcs-in-stock-bg);
	border-color:     var(--idcs-in-stock-border);
	border-left-color: var(--idcs-in-stock-accent);
}

.idcs-state-low-stock {
	background-color: var(--idcs-low-stock-bg);
	border-color:     var(--idcs-low-stock-border);
	border-left-color: var(--idcs-low-stock-accent);
}

.idcs-state-out-of-stock {
	background-color: var(--idcs-oos-bg);
	border-color:     var(--idcs-oos-border);
	border-left-color: var(--idcs-oos-accent);
}

.idcs-state-on-backorder {
	background-color: var(--idcs-bo-bg);
	border-color:     var(--idcs-bo-border);
	border-left-color: var(--idcs-bo-accent);
}

.idcs-state-pending {
	background-color: var(--idcs-pending-bg);
	border-color:     var(--idcs-pending-border);
	border-left-color: var(--idcs-pending-accent);
}


/* ============================================================
   INNER FLEX ROW
   ============================================================ */

.idcs-stock-inner {
	display:     flex;
	align-items: center;
	gap:         var(--idcs-gap);
	padding:     var(--idcs-pad-v) var(--idcs-pad-h);
	position:    relative;
}


/* ============================================================
   ICON CIRCLE
   ============================================================ */

.idcs-stock-icon {
	flex-shrink:     0;
	width:           var(--idcs-icon-size);
	height:          var(--idcs-icon-size);
	border-radius:   50%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	transition:      background-color var(--idcs-dur) var(--idcs-ease),
	                 color            var(--idcs-dur) var(--idcs-ease);
}

.idcs-state-in-stock  .idcs-stock-icon { background: var(--idcs-in-stock-accent);  color: #fff; }
.idcs-state-low-stock .idcs-stock-icon { background: var(--idcs-low-stock-accent); color: #fff; }
.idcs-state-out-of-stock .idcs-stock-icon { background: var(--idcs-oos-accent);    color: #fff; }
.idcs-state-on-backorder .idcs-stock-icon { background: var(--idcs-bo-accent);     color: #fff; }
.idcs-state-pending   .idcs-stock-icon { background: var(--idcs-pending-border);   color: var(--idcs-pending-ink); }

/* Pending icon — three-dot breathing animation */
.idcs-state-pending .idcs-stock-icon svg circle {
	animation: idcs-dot-breathe 1.6s ease-in-out infinite;
}
.idcs-state-pending .idcs-stock-icon svg circle:nth-child(2) { animation-delay: 0.2s; }
.idcs-state-pending .idcs-stock-icon svg circle:nth-child(3) { animation-delay: 0.4s; }

@keyframes idcs-dot-breathe {
	0%, 100% { opacity: 0.3; transform: scale(0.8); transform-origin: center; }
	50%       { opacity: 1;   transform: scale(1.2); }
}


/* ============================================================
   CONTENT AREA
   ============================================================ */

.idcs-stock-content {
	flex:      1;
	min-width: 0;
}

/* --- Quantity row: big number + label baseline-aligned --- */

.idcs-stock-quantity {
	display:     flex;
	align-items: baseline;
	gap:         8px;
	line-height: 1;
}

.idcs-stock-count {
	font-family:    var(--idcs-font-display);
	font-weight:    700;
	font-size:      2.1rem;
	line-height:    1;
	letter-spacing: -0.02em;
	transition:     color var(--idcs-dur) var(--idcs-ease);
}

.idcs-state-in-stock  .idcs-stock-count { color: var(--idcs-in-stock-ink); }
.idcs-state-low-stock .idcs-stock-count { color: var(--idcs-low-stock-ink); }

/* --- Label beside the number --- */

.idcs-stock-label {
	font-family:    var(--idcs-font-body);
	font-weight:    600;
	font-size:      0.7rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	line-height:    1;
	transition:     color var(--idcs-dur) var(--idcs-ease);
}

.idcs-state-in-stock     .idcs-stock-label { color: var(--idcs-in-stock-ink); }
.idcs-state-low-stock    .idcs-stock-label { color: var(--idcs-low-stock-ink); }
.idcs-state-out-of-stock .idcs-stock-label { color: var(--idcs-oos-ink); }
.idcs-state-on-backorder .idcs-stock-label { color: var(--idcs-bo-ink); }

/* Standalone label (no count number) */
.idcs-stock-label-standalone {
	font-size:   0.9rem;
	font-weight: 600;
}

/* --- Sub-label (Low Stock warning) --- */

.idcs-stock-sublabel {
	font-family:    var(--idcs-font-body);
	font-size:      0.7rem;
	font-weight:    600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color:          var(--idcs-low-stock-accent);
	margin-top:     4px;
}

/* --- Pending prompt text --- */

.idcs-stock-prompt {
	font-family:  var(--idcs-font-body);
	font-size:    0.85rem;
	font-style:   italic;
	color:        var(--idcs-pending-ink);
	line-height:  1.4;
}


/* ============================================================
   AVAILABILITY PULSE DOT  (in-stock only, top-right corner)
   ============================================================ */

.idcs-stock-pulse {
	position:      absolute;
	top:           12px;
	right:         14px;
	width:         8px;
	height:        8px;
	border-radius: 50%;
	background:    var(--idcs-in-stock-accent);
}

.idcs-stock-pulse::after {
	content:       '';
	position:      absolute;
	inset:         -4px;
	border-radius: 50%;
	background:    var(--idcs-in-stock-accent);
	opacity:       0.35;
	animation:     idcs-pulse-ring 2s ease-out infinite;
}

@keyframes idcs-pulse-ring {
	0%   { transform: scale(0.6); opacity: 0.5; }
	70%  { transform: scale(1.8); opacity: 0; }
	100% { transform: scale(1.8); opacity: 0; }
}


/* ============================================================
   ENTRY ANIMATIONS
   ============================================================ */

@keyframes idcs-reveal {
	from {
		opacity:   0;
		transform: translateY(-10px);
	}
	to {
		opacity:   1;
		transform: translateY(0);
	}
}

@keyframes idcs-count-pop {
	from {
		opacity:   0;
		transform: scale(0.7);
	}
	to {
		opacity:   1;
		transform: scale(1);
	}
}

/* Applied by JS when a variation is selected */
.idcs-stock-display.idcs-animate {
	animation: idcs-reveal var(--idcs-dur) var(--idcs-ease) both;
}

.idcs-stock-display.idcs-animate .idcs-stock-count {
	animation: idcs-count-pop 0.42s var(--idcs-spring) 0.08s both;
}

.idcs-stock-display.idcs-animate .idcs-stock-icon {
	animation: idcs-count-pop 0.35s var(--idcs-spring) 0s both;
}


/* ============================================================
   FLATSOME THEME — OVERRIDE RESETS
   ============================================================ */

/* Prevent theme table/list styles bleeding in */
.woocommerce .summary .idcs-stock-display,
.woocommerce-page .summary .idcs-stock-display {
	border-top:    none;
	border-bottom: none;
	border-right:  none;
	margin-left:   0;
	padding:       0;
}

/* Force our color tokens even if Flatsome injects `.in-stock` color */
.woocommerce .summary .idcs-state-in-stock  .idcs-stock-count { color: var(--idcs-in-stock-ink)  !important; }
.woocommerce .summary .idcs-state-low-stock .idcs-stock-count { color: var(--idcs-low-stock-ink) !important; }

/* Flatsome sometimes adds `a` color to all children */
.idcs-stock-display a,
.idcs-stock-display span {
	color: inherit;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 640px) {
	:root {
		--idcs-icon-size: 32px;
		--idcs-pad-v:     11px;
		--idcs-pad-h:     14px;
		--idcs-gap:       10px;
	}

	.idcs-stock-count {
		font-size: 1.7rem;
	}

	.idcs-stock-pulse {
		display: none; /* avoid clutter on mobile */
	}
}