/**
 * E-POTION Design System — Component Utility Classes
 *
 * Reusable classes built on top of design-tokens.css. Use these in feature
 * code instead of redeclaring styles.
 *
 * Available components:
 *   - Buttons:    .ep-btn .ep-btn-primary .ep-btn-secondary .ep-btn-accent
 *                 .ep-btn-ghost .ep-btn-danger
 *                 modifiers: .ep-btn-sm .ep-btn-lg .ep-btn-block
 *   - Badges:     .ep-badge .ep-badge-sale .ep-badge-new .ep-badge-success
 *                 .ep-badge-warning .ep-badge-danger .ep-badge-info
 *                 .ep-badge-neutral
 *   - Forms:      .ep-label .ep-input .ep-select .ep-textarea
 *                 .ep-help .ep-error
 *                 .is-invalid modifier
 *   - Cards:      .ep-card .ep-card-elevated .ep-card-flat
 *   - Notices:    .ep-notice .ep-notice-success .ep-notice-warning
 *                 .ep-notice-danger .ep-notice-info
 *   - Dividers:   .ep-divider .ep-divider-strong
 *   - Text:       .ep-text-primary .ep-text-secondary .ep-text-muted
 *                 .ep-text-accent .ep-text-success .ep-text-danger
 *
 * @package Shoptimizer_Child
 * @version 1.0.0
 */

/* ============================================================================
 * Buttons
 * ========================================================================== */

.ep-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ep-space-2);
	padding: 13px 20px;
	font-family: var(--ep-font-stack-sans);
	font-size: var(--ep-font-sm);
	font-weight: var(--ep-weight-semibold);
	line-height: 1.2;
	letter-spacing: 0.3px;
	border-radius: var(--ep-radius-md);
	border: 0;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	transition: background-color var(--ep-transition-fast), color var(--ep-transition-fast), transform var(--ep-transition-fast), box-shadow var(--ep-transition-fast);
	user-select: none;
}

.ep-btn:active { transform: translateY(0.5px); }

.ep-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(14, 17, 22, 0.18);
}

.ep-btn[disabled],
.ep-btn:disabled {
	background: var(--ep-border-subtle) !important;
	color: var(--ep-text-disabled) !important;
	border-color: transparent !important;
	cursor: not-allowed;
	pointer-events: none;
}

/* Primary — black CTA (Add to cart, Checkout, primary actions) */
.ep-btn-primary {
	background: var(--ep-bg-dark);
	color: var(--ep-text-on-dark);
}
.ep-btn-primary:hover { background: #1f2229; color: #ffffff; }

/* Secondary — outlined dark (alternative actions) */
.ep-btn-secondary {
	background: var(--ep-bg-page);
	color: var(--ep-text-primary);
	border: 1.5px solid var(--ep-border-strong);
	padding: 11.5px 20px;
	font-weight: var(--ep-weight-medium);
}
.ep-btn-secondary:hover { background: var(--ep-bg-dark); color: #ffffff; }

/* Accent — orange (PROMOTIONAL ONLY: sale CTAs, urgency) */
.ep-btn-accent {
	background: var(--ep-accent);
	color: #ffffff;
}
.ep-btn-accent:hover { background: var(--ep-accent-dark); }

/* Ghost — minimal underlined link */
.ep-btn-ghost {
	background: transparent;
	color: var(--ep-text-primary);
	text-decoration: underline;
	text-underline-offset: 4px;
	font-weight: var(--ep-weight-medium);
	letter-spacing: 0;
}
.ep-btn-ghost:hover { text-decoration: none; }

/* Danger — red outlined (destructive actions) */
.ep-btn-danger {
	background: var(--ep-bg-page);
	color: var(--ep-danger);
	border: 1.5px solid var(--ep-danger);
	padding: 11.5px 20px;
	font-weight: var(--ep-weight-medium);
}
.ep-btn-danger:hover { background: var(--ep-danger); color: #ffffff; }

/* Sizes */
.ep-btn-sm { padding: 9px 14px; font-size: var(--ep-font-xs); letter-spacing: 0.5px; }
.ep-btn-lg { padding: 16px 28px; font-size: var(--ep-font-base); }

.ep-btn-secondary.ep-btn-sm,
.ep-btn-danger.ep-btn-sm   { padding: 7.5px 14px; }
.ep-btn-secondary.ep-btn-lg,
.ep-btn-danger.ep-btn-lg   { padding: 14.5px 28px; }

.ep-btn-block { width: 100%; display: flex; }

/* ============================================================================
 * Badges & tags
 * ========================================================================== */

.ep-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 10px;
	font-family: var(--ep-font-stack-sans);
	font-size: var(--ep-font-xs);
	font-weight: var(--ep-weight-semibold);
	line-height: 1;
	letter-spacing: 0.3px;
	border-radius: var(--ep-radius-sm);
	white-space: nowrap;
}

.ep-badge-sale     { background: var(--ep-accent);      color: #ffffff;             font-weight: var(--ep-weight-bold); }
.ep-badge-new      { background: var(--ep-bg-dark);     color: #ffffff; }
.ep-badge-success  { background: var(--ep-success-soft); color: var(--ep-success-dark); }
.ep-badge-warning  { background: var(--ep-warning-soft); color: var(--ep-warning-dark); }
.ep-badge-danger   { background: var(--ep-danger-soft);  color: var(--ep-danger-dark); }
.ep-badge-info     { background: var(--ep-info-soft);    color: var(--ep-info-dark); }
.ep-badge-neutral  { background: var(--ep-bg-muted);     color: var(--ep-text-secondary); font-weight: var(--ep-weight-medium); }

/* ============================================================================
 * Form elements
 * ========================================================================== */

.ep-label {
	display: block;
	font-family: var(--ep-font-stack-sans);
	font-size: var(--ep-font-sm);
	font-weight: var(--ep-weight-medium);
	color: var(--ep-text-primary);
	margin-bottom: 6px;
}

.ep-input,
.ep-select,
.ep-textarea {
	width: 100%;
	padding: 11px 14px;
	background: var(--ep-bg-page);
	color: var(--ep-text-primary);
	border: 1px solid var(--ep-border-default);
	border-radius: var(--ep-radius-md);
	font-family: var(--ep-font-stack-sans);
	font-size: var(--ep-font-sm);
	line-height: 1.4;
	outline: none;
	box-sizing: border-box;
	transition: border-color var(--ep-transition-fast), box-shadow var(--ep-transition-fast);
}

.ep-textarea { min-height: 96px; resize: vertical; }

.ep-input:hover,
.ep-select:hover,
.ep-textarea:hover { border-color: var(--ep-text-muted); }

.ep-input:focus,
.ep-select:focus,
.ep-textarea:focus {
	border-color: var(--ep-border-strong);
	box-shadow: 0 0 0 3px rgba(14, 17, 22, 0.08);
}

.ep-input::placeholder,
.ep-textarea::placeholder { color: var(--ep-text-disabled); }

.ep-input[disabled],
.ep-select[disabled],
.ep-textarea[disabled] {
	background: var(--ep-bg-muted);
	color: var(--ep-text-disabled);
	cursor: not-allowed;
}

.ep-input.is-invalid,
.ep-select.is-invalid,
.ep-textarea.is-invalid { border-color: var(--ep-danger); border-width: 1.5px; }

.ep-input.is-invalid:focus,
.ep-select.is-invalid:focus,
.ep-textarea.is-invalid:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); }

.ep-error { font-size: var(--ep-font-xs); color: var(--ep-danger); margin-top: 4px; }
.ep-help  { font-size: var(--ep-font-xs); color: var(--ep-text-muted); margin-top: 4px; }

.ep-select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%236b7280" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>');
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 36px;
}

/* ============================================================================
 * Cards
 * ========================================================================== */

.ep-card {
	background: var(--ep-bg-page);
	border: 1px solid var(--ep-border-default);
	border-radius: var(--ep-radius-lg);
	padding: var(--ep-space-5);
}

.ep-card-elevated {
	background: var(--ep-bg-page);
	border: 0;
	border-radius: var(--ep-radius-lg);
	padding: var(--ep-space-5);
	box-shadow: var(--ep-shadow-sm);
}

.ep-card-flat {
	background: var(--ep-bg-surface);
	border: 0;
	border-radius: var(--ep-radius-lg);
	padding: var(--ep-space-5);
}

/* ============================================================================
 * Notices / inline alerts
 * ========================================================================== */

.ep-notice {
	display: flex;
	align-items: flex-start;
	gap: var(--ep-space-3);
	padding: var(--ep-space-3) var(--ep-space-4);
	font-family: var(--ep-font-stack-sans);
	font-size: var(--ep-font-sm);
	line-height: 1.5;
	border-radius: 0 var(--ep-radius-md) var(--ep-radius-md) 0;
	border-left: 3px solid;
}

.ep-notice-success { background: var(--ep-success-soft); color: var(--ep-success-dark); border-left-color: var(--ep-success); }
.ep-notice-warning { background: var(--ep-warning-soft); color: var(--ep-warning-dark); border-left-color: var(--ep-warning); }
.ep-notice-danger  { background: var(--ep-danger-soft);  color: var(--ep-danger-dark);  border-left-color: var(--ep-danger); }
.ep-notice-info    { background: var(--ep-info-soft);    color: var(--ep-info-dark);    border-left-color: var(--ep-info); }

/* ============================================================================
 * Text utilities
 * ========================================================================== */

.ep-text-primary    { color: var(--ep-text-primary); }
.ep-text-secondary  { color: var(--ep-text-secondary); }
.ep-text-muted      { color: var(--ep-text-muted); }
.ep-text-accent     { color: var(--ep-accent); }
.ep-text-success    { color: var(--ep-success); }
.ep-text-danger     { color: var(--ep-danger); }

/* ============================================================================
 * Dividers
 * ========================================================================== */

.ep-divider        { height: 1px; background: var(--ep-border-subtle); border: 0; margin: var(--ep-space-5) 0; }
.ep-divider-strong { height: 1px; background: var(--ep-border-default); border: 0; margin: var(--ep-space-6) 0; }

/* ============================================================================
 * Visually-hidden helper (for accessibility — screen reader only)
 * ========================================================================== */

.ep-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}