/**
 * assets/css/pwa-banner.css
 *
 * Styles for the WooPWA custom "Add to Home Screen" install banner.
 *
 * All colours are controlled via CSS custom properties so you can match
 * your brand without editing this file. Add overrides to your theme's
 * stylesheet or via the WordPress Customizer → Additional CSS:
 *
 *   :root {
 *     --woopwa-accent:       #e44d26;   /* your brand colour                 *\/
 *     --woopwa-accent-text:  #ffffff;   /* text that sits on the accent bg   *\/
 *     --woopwa-banner-bg:    #ffffff;   /* banner background                 *\/
 *   }
 *
 * The plugin also supports injecting --woopwa-accent automatically from the
 * "Theme Color" admin setting via wp_add_inline_style — see the main plugin
 * file if you want to enable that enhancement.
 */

/* =============================================================================
   CSS custom properties (design tokens)
   ============================================================================= */

:root {
	/* Accent colour — defaults to the plugin's default theme_color (black).
	   Override with your brand colour. */
	--woopwa-accent:       #000000;

	/* Text colour on top of the accent background. */
	--woopwa-accent-text:  #ffffff;

	/* Banner surface colours. */
	--woopwa-banner-bg:    #ffffff;
	--woopwa-banner-text:  #1d2327;
	--woopwa-banner-muted: #646970;

	/* Shared border-radius for buttons and tooltips. */
	--woopwa-radius:       0.5rem;

	/* Transition duration — set to 0s via prefers-reduced-motion below. */
	--woopwa-duration:     0.3s;
}

/* =============================================================================
   Banner container
   ============================================================================= */

.woopwa-banner {
	position:    fixed;
	left:        0;
	right:       0;
	z-index:     99999;       /* above WooCommerce notices, overlays, etc. */
	background:  var(--woopwa-banner-bg);
	padding:     0.875rem 1rem;
	box-sizing:  border-box;

	/* Typography inherits from the active theme — no hardcoded font stack. */
	font-family: inherit;
	font-size:   1rem;
	line-height: 1.5;
	color:       var(--woopwa-banner-text);

	/* Slide transition.  The banner starts translated off-screen;
	   .woopwa-banner--visible brings it into view. */
	transition:  transform var(--woopwa-duration) ease;
}

/* ── Bottom positioning (default) ── */

.woopwa-banner--bottom {
	bottom:       0;
	border-top:   3px solid var(--woopwa-accent);
	box-shadow:   0 -4px 24px rgba(0, 0, 0, 0.10),
	              0 -1px  6px rgba(0, 0, 0, 0.06);
	transform:    translateY(110%);  /* 110% avoids a 1-pixel peek at the edge */
}

/* ── Top positioning ── */

.woopwa-banner--top {
	top:           0;
	border-bottom: 3px solid var(--woopwa-accent);
	box-shadow:    0  4px 24px rgba(0, 0, 0, 0.10),
	               0  1px  6px rgba(0, 0, 0, 0.06);
	transform:     translateY(-110%);
}

/* ── Visible state (added by JS after a double rAF so the transition fires) ── */

.woopwa-banner--visible {
	transform: translateY(0);
}

/* =============================================================================
   Inner layout
   ============================================================================= */

.woopwa-banner__inner {
	display:         flex;
	align-items:     center;
	gap:             1rem;
	max-width:       960px;   /* keeps the banner readable on wide monitors */
	margin:          0 auto;
}

/* =============================================================================
   Text block
   ============================================================================= */

.woopwa-banner__text {
	flex:      1;
	min-width: 0;       /* prevents flex children from overflowing the container */
}

.woopwa-banner__title {
	margin:      0 0 0.125rem;
	font-size:   0.9375rem;    /* ~15 px */
	font-weight: 700;
	color:       var(--woopwa-banner-text);
	line-height: 1.3;
}

.woopwa-banner__body {
	margin:      0;
	font-size:   0.8125rem;    /* ~13 px */
	color:       var(--woopwa-banner-muted);
	line-height: 1.5;
}

/* =============================================================================
   Button row
   ============================================================================= */

.woopwa-banner__actions {
	display:     flex;
	flex-shrink: 0;
	align-items: center;
	gap:         0.5rem;
}

/* ── Shared button base ── */

.woopwa-banner__btn {
	/* Reset theme button styles that could bleed in. */
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	margin:           0;
	padding:          0.5rem 1.125rem;
	box-sizing:       border-box;
	border:           2px solid transparent;
	border-radius:    var(--woopwa-radius);

	font-family:      inherit;
	font-size:        0.875rem;
	font-weight:      600;
	line-height:      1.2;
	text-decoration:  none;
	white-space:      nowrap;
	cursor:           pointer;

	/* Smooth micro-interactions. */
	transition:       opacity          var(--woopwa-duration) ease,
	                  color            var(--woopwa-duration) ease,
	                  background-color var(--woopwa-duration) ease,
	                  border-color     var(--woopwa-duration) ease;

	/* Override any box-shadow the theme applies to <button>. */
	box-shadow: none;
}

/* ── Focus ring (accessible, visible on both light and dark backgrounds) ── */

.woopwa-banner__btn:focus-visible {
	outline:        3px solid var(--woopwa-accent);
	outline-offset: 2px;
}

/* ── Install / primary button ── */

.woopwa-banner__install {
	background-color: var(--woopwa-accent);
	border-color:     var(--woopwa-accent);
	color:            var(--woopwa-accent-text);
}

.woopwa-banner__install:hover {
	opacity: 0.82;
}

.woopwa-banner__install:active {
	opacity: 0.70;
}

/* ── Dismiss / ghost button ── */

.woopwa-banner__dismiss {
	background-color: transparent;
	border-color:     var(--woopwa-banner-muted);
	color:            var(--woopwa-banner-muted);
}

.woopwa-banner__dismiss:hover {
	border-color: var(--woopwa-banner-text);
	color:        var(--woopwa-banner-text);
}

.woopwa-banner__dismiss:active {
	opacity: 0.70;
}

/* =============================================================================
   iOS instruction tooltip
   ============================================================================= */

/**
 * iOS step-by-step install guide — injected automatically into the banner body
 * when an iOS device is detected. No click required; instructions are always visible.
 */
.woopwa-ios-guide {
	list-style:    none;
	margin:        0.6rem 0 0;
	padding:       0.6rem 0.75rem 0.6rem 0.75rem;
	border-radius: var(--woopwa-radius);
	background:    #f6f7f7;
	border-left:   3px solid var(--woopwa-accent);
	counter-reset: ios-steps;
	animation:     woopwa-fade-in 0.3s ease both;
}

.woopwa-ios-guide li {
	counter-increment: ios-steps;
	font-size:         0.8rem;
	color:             var(--woopwa-banner-text);
	line-height:       1.5;
	padding:           0.2rem 0 0.2rem 1.75rem;
	position:          relative;
}

.woopwa-ios-guide li + li {
	margin-top: 0.25rem;
}

/* Numbered circle badge using CSS counter */
.woopwa-ios-guide li::before {
	content:         counter(ios-steps);
	position:        absolute;
	left:            0;
	top:             0.2rem;
	width:           1.15rem;
	height:          1.15rem;
	border-radius:   50%;
	background:      var(--woopwa-accent);
	color:           var(--woopwa-accent-text);
	font-size:       0.65rem;
	font-weight:     700;
	text-align:      center;
	line-height:     1.15rem;
}

.woopwa-ios-guide li strong {
	color: var(--woopwa-accent);
}

@keyframes woopwa-fade-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0);    }
}

/* =============================================================================
   Responsive — narrow screens (≤ 480 px)
   ============================================================================= */

@media (max-width: 480px) {
	.woopwa-banner {
		padding: 0.875rem;
	}

	/* Stack text above buttons on very small screens. */
	.woopwa-banner__inner {
		flex-direction: column;
		align-items:    stretch;
		gap:            0.75rem;
	}

	/* Buttons fill the full width and share the row equally. */
	.woopwa-banner__actions {
		justify-content: stretch;
	}

	.woopwa-banner__btn {
		flex:        1;
		text-align:  center;
	}
}

/* =============================================================================
   Medium screens (481 px – 768 px) — slightly tighter padding
   ============================================================================= */

@media (min-width: 481px) and (max-width: 768px) {
	.woopwa-banner__title { font-size: 0.875rem; }
	.woopwa-banner__body  { font-size: 0.8125rem; }
}

/* =============================================================================
   Reduced-motion preference
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
	:root {
		/* Collapse all WooPWA transitions to instant. */
		--woopwa-duration: 0s;
	}

	.woopwa-banner {
		transition: none;
	}

	.woopwa-ios-guide {
		animation: none;
	}
}

/* =============================================================================
   Print — hide the banner entirely
   ============================================================================= */

@media print {
	.woopwa-banner,
	.woopwa-ios-guide {
		display: none !important;
	}
}