/**
 * DispatchIQ – Public Stylesheet v1.2.0
 *
 * Premium widget designs using CSS custom properties.
 * Zero emoji, zero external images — inline SVG icons only.
 *
 * @package DispatchIQ
 */

/* ==========================================================================
   1. Shared Base & Reset
   ========================================================================== */

.diqwcd-widget {
	/* Custom property defaults — overridden by PHP inline style="" */
	--diqwcd-icon:   #2271b1;
	--diqwcd-text:   #3c434a;
	--diqwcd-bg:     #eef5ff;
	--diqwcd-border: #2271b1;
	--diqwcd-radius: 6px;
	--diqwcd-fs:     14px;

	display:        block;
	font-family:    inherit;
	font-size:      var( --diqwcd-fs );
	color:          var( --diqwcd-text );
	line-height:    1.5;
	margin:         12px 0;
	box-sizing:     border-box;
}

.diqwcd-widget *,
.diqwcd-widget *::before,
.diqwcd-widget *::after {
	box-sizing: inherit;
}

/* SVG icons */
.diqwcd-icon-svg {
	display:        inline-block;
	vertical-align: middle;
	flex-shrink:    0;
}

.diqwcd-icon-inline {
	vertical-align: -2px;
	margin-right:   3px;
}

/* Countdown — tabular numbers so digits don't jump */
.diqwcd-countdown {
	display:            inline-flex;
	align-items:        center;
	gap:                1px;
	font-variant-numeric: tabular-nums;
	font-weight:        700;
	letter-spacing:     -0.01em;
}

.diqwcd-cd-hours,
.diqwcd-cd-mins,
.diqwcd-cd-secs {
	display:    inline-block;
	min-width:  2ch;
	text-align: right;
}

.diqwcd-cd-sep {
	font-weight: 400;
	opacity:     0.6;
	font-size:   0.85em;
	margin:      0 1px;
}

/* ==========================================================================
   2. Minimal Style — Clean card with left accent bar
   ========================================================================== */

.diqwcd-minimal {
	display:        flex;
	align-items:    flex-start;
	gap:            11px;
	padding:        12px 15px;
	background:     var( --diqwcd-bg );
	border-radius:  var( --diqwcd-radius );
	border:         1px solid color-mix( in srgb, var( --diqwcd-icon ) 20%, transparent );
	border-left:    4px solid var( --diqwcd-icon );
	position:       relative;
}

.diqwcd-minimal .diqwcd-icon-wrap {
	color:       var( --diqwcd-icon );
	margin-top:  1px;
	flex-shrink: 0;
	opacity:     0.9;
}

.diqwcd-minimal .diqwcd-text-wrap {
	flex:      1;
	min-width: 0;
}

.diqwcd-minimal .diqwcd-msg {
	display:     block;
	font-weight: 500;
	color:       var( --diqwcd-text );
}

.diqwcd-minimal .diqwcd-delivery-msg {
	display:     block;
	font-size:   0.85em;
	color:       var( --diqwcd-text );
	opacity:     0.65;
	margin-top:  4px;
}

/* State tints */
.diqwcd-minimal.diqwcd-state-before_cutoff {
	border-left-color: #00a32a;
	background:        color-mix( in srgb, #00a32a 6%, #fff );
	--diqwcd-icon:      #00a32a;
}

.diqwcd-minimal.diqwcd-state-weekend_holiday {
	border-left-color: #d97706;
	background:        #fffbeb;
	--diqwcd-icon:      #d97706;
}

/* ==========================================================================
   3. Banner Style — Full-width pill-style bar
   ========================================================================== */

.diqwcd-banner {
	display:        flex;
	align-items:    center;
	gap:            14px;
	padding:        13px 18px;
	background:     var( --diqwcd-bg );
	border-radius:  var( --diqwcd-radius );
	border:         1px solid color-mix( in srgb, var( --diqwcd-icon ) 18%, transparent );
	position:       relative;
	overflow:       hidden;
}

/* Animated gradient left edge */
.diqwcd-banner::before {
	content:    '';
	position:   absolute;
	inset-block: 0;
	left:       0;
	width:      5px;
	background: linear-gradient( 180deg, var( --diqwcd-icon ) 0%, color-mix( in srgb, var( --diqwcd-icon ) 70%, #000 ) 100% );
	border-radius: var( --diqwcd-radius ) 0 0 var( --diqwcd-radius );
}

.diqwcd-banner-icon {
	color:       var( --diqwcd-icon );
	flex-shrink: 0;
	margin-left: 4px;
}

.diqwcd-banner-body {
	flex: 1;
}

.diqwcd-banner .diqwcd-msg {
	display:     block;
	font-weight: 600;
	color:       var( --diqwcd-text );
}

.diqwcd-banner .diqwcd-delivery-msg {
	display:    block;
	font-size:  0.84em;
	color:      var( --diqwcd-text );
	opacity:    0.65;
	margin-top: 3px;
}

.diqwcd-banner-arrow {
	color:      var( --diqwcd-icon );
	opacity:    0.4;
	flex-shrink: 0;
}

.diqwcd-banner.diqwcd-state-before_cutoff {
	background: #f0fdf4;
	--diqwcd-icon: #00a32a;
}

.diqwcd-banner.diqwcd-state-weekend_holiday {
	background: #fffbeb;
	--diqwcd-icon: #d97706;
}

/* ==========================================================================
   4. Boxed Style — Card with coloured header
   ========================================================================== */

.diqwcd-boxed {
	background:    var( --diqwcd-bg );
	border:        1px solid var( --diqwcd-border );
	border-radius: var( --diqwcd-radius );
	overflow:      hidden;
	box-shadow:    0 1px 3px color-mix( in srgb, var( --diqwcd-border ) 15%, transparent );
}

.diqwcd-boxed-head {
	display:        flex;
	align-items:    center;
	gap:            8px;
	padding:        9px 14px;
	background:     var( --diqwcd-border );
	color:          #fff;
	font-size:      0.78em;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.diqwcd-boxed-head .diqwcd-icon-svg { color: rgba( 255, 255, 255, 0.85 ); }

.diqwcd-boxed-row {
	display:       flex;
	align-items:   flex-start;
	gap:           10px;
	padding:       11px 14px;
	border-bottom: 1px solid color-mix( in srgb, var( --diqwcd-border ) 10%, transparent );
}

.diqwcd-boxed-row:last-child { border-bottom: none; }

.diqwcd-boxed-row-icon {
	color:       var( --diqwcd-border );
	flex-shrink: 0;
	margin-top:  2px;
	opacity:     0.8;
}

.diqwcd-boxed .diqwcd-msg {
	font-weight: 500;
	color:       var( --diqwcd-text );
}

.diqwcd-boxed .diqwcd-delivery-msg {
	color:     var( --diqwcd-text );
	opacity:   0.7;
	font-size: 0.9em;
}

.diqwcd-boxed-foot {
	display:    flex;
	flex-wrap:  wrap;
	gap:        6px;
	padding:    10px 14px;
	border-top: 1px solid color-mix( in srgb, var( --diqwcd-border ) 12%, transparent );
	background: color-mix( in srgb, var( --diqwcd-border ) 5%, var( --diqwcd-bg ) );
}

.diqwcd-pill {
	display:       inline-flex;
	align-items:   center;
	gap:           5px;
	padding:       4px 11px;
	border-radius: 50px;
	font-size:     0.78em;
	font-weight:   600;
	letter-spacing: 0.02em;
}

.diqwcd-pill-dispatch {
	background: var( --diqwcd-border );
	color:      #fff;
}

.diqwcd-pill-dispatch .diqwcd-icon-svg { color: rgba( 255, 255, 255, 0.85 ); }

.diqwcd-pill-delivery {
	background: color-mix( in srgb, var( --diqwcd-border ) 12%, transparent );
	color:      var( --diqwcd-text );
}

.diqwcd-pill-delivery .diqwcd-icon-svg { color: var( --diqwcd-border ); }

/* State overrides */
.diqwcd-boxed.diqwcd-state-before_cutoff  { --diqwcd-border: #00a32a; }
.diqwcd-boxed.diqwcd-state-weekend_holiday { --diqwcd-border: #d97706; }

/* ==========================================================================
   5. Badge Style — Pill badges
   ========================================================================== */

.diqwcd-badge-wrap {
	display:   flex;
	flex-wrap: wrap;
	gap:       7px;
	margin:    10px 0;
}

.diqwcd-badge-wrap .diqwcd-badge {
	display:       inline-flex;
	align-items:   center;
	gap:           6px;
	padding:       7px 14px;
	border-radius: var( --diqwcd-radius );
	font-size:     var( --diqwcd-fs );
	line-height:   1.3;
}

.diqwcd-badge-dispatch {
	background: var( --diqwcd-bg );
	color:      var( --diqwcd-text );
	border:     1.5px solid var( --diqwcd-border );
	font-weight: 600;
}

.diqwcd-badge-dispatch .diqwcd-badge-icon .diqwcd-icon-svg { color: var( --diqwcd-border ); }

.diqwcd-badge-delivery {
	background: color-mix( in srgb, var( --diqwcd-border ) 8%, transparent );
	color:      var( --diqwcd-text );
	border:     1.5px solid transparent;
	font-weight: 500;
}

.diqwcd-badge-delivery .diqwcd-badge-icon .diqwcd-icon-svg { color: var( --diqwcd-border ); }

/* State overrides */
.diqwcd-badge-wrap.diqwcd-state-before_cutoff  { --diqwcd-border: #00a32a; }
.diqwcd-badge-wrap.diqwcd-state-weekend_holiday { --diqwcd-border: #d97706; }

/* ==========================================================================
   6. Loop / Shop Archive — Premium urgency widget
   ========================================================================== */

/* ── Shared shell ── */
.diqwcd-loop {
	display:       block;
	margin:        6px 0 8px;
	border-radius: calc( var( --diqwcd-radius ) * 1px + 2px );
	overflow:      hidden;
	font-size:     0.82em;
	line-height:   1.4;
	width:         100%;
}

/* ── BEFORE CUTOFF layout ── */
.diqwcd-loop-before {
	display:        flex;
	flex-direction: column;
	gap:            3px;
	padding:        8px 11px 9px;
	background:     #f0fdf4;
	border:         1px solid #bbf7d0;
	border-radius:  inherit;
}

/* Top eyebrow row */
.diqwcd-loop-eyebrow {
	display:     flex;
	align-items: center;
	gap:         6px;
}

.diqwcd-loop-eyebrow-text {
	font-size:      0.78em;
	font-weight:    600;
	color:          #15803d;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Pulsing live indicator dot */
.diqwcd-loop-pulse-dot {
	display:       inline-block;
	width:         7px;
	height:        7px;
	border-radius: 50%;
	background:    #16a34a;
	flex-shrink:   0;
	position:      relative;
	animation:     diqwcd-pulse 2s ease-in-out infinite;
}

.diqwcd-loop-pulse-dot::after {
	content:       '';
	position:      absolute;
	inset:         -3px;
	border-radius: 50%;
	background:    #16a34a;
	opacity:       0.3;
	animation:     diqwcd-pulse-ring 2s ease-in-out infinite;
}

@keyframes diqwcd-pulse {
	0%, 100% { opacity: 1; }
	50%       { opacity: 0.6; }
}

@keyframes diqwcd-pulse-ring {
	0%        { transform: scale( 0.6 ); opacity: 0.4; }
	70%       { transform: scale( 1.6 ); opacity: 0; }
	100%      { transform: scale( 0.6 ); opacity: 0; }
}

/* Countdown row */
.diqwcd-loop-countdown-row {
	display:     flex;
	align-items: baseline;
	gap:         6px;
}

.diqwcd-loop-countdown-prefix {
	font-size:  0.85em;
	color:      #166534;
	opacity:    0.75;
	font-weight: 500;
	flex-shrink: 0;
}

/* Countdown timer — individual digit units */
.diqwcd-loop-countdown {
	display:     inline-flex;
	align-items: baseline;
	gap:         3px;
}

.diqwcd-loop-cd-unit {
	display:         inline-flex;
	align-items:     baseline;
	gap:             1px;
	background:      #fff;
	border:          1px solid #bbf7d0;
	border-radius:   4px;
	padding:         1px 5px 1px 4px;
	font-variant-numeric: tabular-nums;
}

.diqwcd-loop-cd-unit .diqwcd-cd-hours,
.diqwcd-loop-cd-unit .diqwcd-cd-mins,
.diqwcd-loop-cd-unit .diqwcd-cd-secs {
	font-size:   1.1em;
	font-weight: 800;
	color:       #15803d;
	min-width:   2ch;
	text-align:  right;
	display:     inline-block;
}

.diqwcd-loop-cd-label {
	font-size:   0.7em;
	font-weight: 600;
	color:       #16a34a;
	opacity:     0.7;
}

.diqwcd-loop-cd-colon {
	font-size:   1em;
	font-weight: 700;
	color:       #15803d;
	opacity:     0.35;
	margin:      0 1px;
	align-self:  center;
}

/* ── AFTER CUTOFF / WEEKEND layout ── */
.diqwcd-loop-after {
	display:       flex;
	align-items:   center;
	gap:           7px;
	padding:       8px 12px;
	border-radius: inherit;
	border:        1px solid rgba( 0, 0, 0, 0.08 );
	background:    #f8fafc;
}

.diqwcd-loop-icon {
	color:       var( --diqwcd-icon );
	flex-shrink: 0;
	opacity:     0.85;
}

.diqwcd-loop-label {
	flex:        1;
	font-weight: 500;
	color:       #374151;
	font-size:   0.92em;
}

.diqwcd-loop-delivery-pill {
	display:       inline-flex;
	align-items:   center;
	padding:       2px 8px;
	border-radius: 20px;
	background:    color-mix( in srgb, var( --diqwcd-icon ) 10%, transparent );
	color:         var( --diqwcd-icon );
	font-size:     0.78em;
	font-weight:   600;
	white-space:   nowrap;
	flex-shrink:   0;
}

/* State overrides for after/weekend */
.diqwcd-loop.diqwcd-state-after_cutoff .diqwcd-loop-after {
	background:   #f0f7ff;
	border-color: #bfdbfe;
	--diqwcd-icon: #2563eb;
}

.diqwcd-loop.diqwcd-state-after_cutoff .diqwcd-loop-label { color: #1e3a5f; }

.diqwcd-loop.diqwcd-state-weekend_holiday .diqwcd-loop-after {
	background:   #fffbeb;
	border-color: #fde68a;
	--diqwcd-icon: #d97706;
}

.diqwcd-loop.diqwcd-state-weekend_holiday .diqwcd-loop-label { color: #78350f; }

/* ==========================================================================
   7. Context Modifiers
   ========================================================================== */

.diqwcd-ctx-cart,
.diqwcd-ctx-checkout {
	margin: 16px 0 20px;
}

/* ==========================================================================
   8. Accessibility
   ========================================================================== */

@media ( prefers-reduced-motion: reduce ) {
	.diqwcd-widget,
	.diqwcd-widget * {
		transition:  none !important;
		animation:   none !important;
	}
}

/* ==========================================================================
   9. Responsive
   ========================================================================== */

@media ( max-width: 480px ) {
	.diqwcd-boxed-foot       { flex-direction: column; }
	.diqwcd-banner           { flex-wrap: wrap; }
	.diqwcd-banner-arrow     { display: none; }
	.diqwcd-badge-wrap       { flex-direction: column; }
}

/* ==========================================================================
   10. Compact Style — Amazon/clean inline delivery rows
   ========================================================================== */

.diqwcd-compact {
	display:    flex;
	flex-direction: column;
	gap:        5px;
	padding:    10px 0;
	border-top: 1px solid rgba( 0, 0, 0, 0.07 );
}

.diqwcd-compact-row {
	display:     flex;
	align-items: flex-start;
	gap:         8px;
}

.diqwcd-compact-icon {
	flex-shrink: 0;
	margin-top:  1px;
}

.diqwcd-compact-delivery .diqwcd-compact-icon { color: var( --diqwcd-icon ); }
.diqwcd-compact-row:not(.diqwcd-compact-delivery) .diqwcd-compact-icon { color: var( --diqwcd-icon ); opacity: 0.6; }

.diqwcd-compact .diqwcd-compact-text {
	font-size:   var( --diqwcd-fs );
	color:       var( --diqwcd-text );
	line-height: 1.4;
}

/* Delivery row is bold */
.diqwcd-compact-delivery .diqwcd-compact-text { font-weight: 600; }

/* Dispatch row is lighter */
.diqwcd-compact-row:not(.diqwcd-compact-delivery) .diqwcd-compact-text {
	font-size: 0.88em;
	opacity:   0.7;
}

/* State colours */
.diqwcd-compact.diqwcd-state-before_cutoff .diqwcd-compact-delivery .diqwcd-compact-text { color: #166534; }
.diqwcd-compact.diqwcd-state-before_cutoff .diqwcd-compact-icon { color: #00a32a; }