/**
 * Master Frontend App-Like Stylesheet
 * Integrates HSL Variables, Premium Shadows, Glassmorphism & 5 Card Templates.
 *
 * @package Smart_WP_DOM
 */

/* ==========================================================================
   1. CORE APP STYLING & DESIGN TOKENS
   ========================================================================== */
:root {
	/* Harmonious HSL Palette */
	--smart-bg-app: #f8fafc;
	--smart-bg-card: #ffffff;
	--smart-text-main: #0f172a;
	--smart-text-desc: #475569;
	--smart-text-muted: #94a3b8;
	
	/* Brand Accents */
	--smart-primary: #0284c7;
	--smart-primary-hover: #0369a1;
	--smart-primary-light: #e0f2fe;
	
	--smart-success: #10b981;
	--smart-success-light: #ecfdf5;
	--smart-warning: #f59e0b;
	--smart-warning-light: #fef3c7;
	--smart-danger: #ef4444;
	--smart-danger-light: #fef2f2;
	
	/* Layout Accents */
	--smart-border-color: #e2e8f0;
	--smart-radius-card: 16px;
	--smart-radius-btn: 20px;
	
	/* Shadows */
	--smart-shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.02);
	--smart-shadow-md: 0 4px 20px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.02);
	--smart-shadow-lg: 0 10px 30px rgba(0,0,0,0.06), 0 5px 15px rgba(0,0,0,0.03);
	--smart-shadow-glow: 0 0 15px rgba(2, 132, 199, 0.25);
}

/* Base App-Like View Containments */
.smart-app-view {
	background: var(--smart-bg-card);
	border-radius: var(--smart-radius-card);
	border: 1px solid var(--smart-border-color);
	box-shadow: var(--smart-shadow-lg);
	padding: 35px;
	max-width: 680px;
	margin: 40px auto;
	box-sizing: border-box;
}

/* Glassmorphic Layering Panels */
.glass-panel {
	background: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: var(--smart-radius-card);
	box-shadow: var(--smart-shadow-md);
	padding: 30px;
}

/* ==========================================================================
   2. INTERACTIVE STEPPERS & CHECKOUT MODULES
   ========================================================================== */
.smart-stepper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 550px;
	margin: 0 auto 35px auto;
	padding: 0 10px;
}

.step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	position: relative;
	z-index: 2;
}

.step-circle {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f1f5f9;
	color: var(--smart-text-desc);
	font-weight: 700;
	font-size: 14px;
	border: 2px solid #fff;
	box-shadow: 0 0 0 2px #e2e8f0;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.step-label {
	font-size: 11px;
	font-weight: 700;
	color: var(--smart-text-desc);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.step-line {
	flex: 1;
	height: 3px;
	background: #e2e8f0;
	margin: 0 10px;
	transform: translateY(-11px);
	z-index: 1;
}

/* Active and Complete Stepper States */
.step-active .step-circle {
	background: var(--smart-primary);
	color: #fff;
	box-shadow: 0 0 0 2px var(--smart-primary), var(--smart-shadow-glow);
}
.step-active .step-label {
	color: var(--smart-primary);
	font-weight: 800;
}
.step-completed .step-circle {
	background: var(--smart-success);
	color: #fff;
	box-shadow: 0 0 0 2px var(--smart-success);
}
.step-completed .step-label {
	color: var(--smart-success);
}

/* ==========================================================================
   3. SECURE FILE UPLOAD & RECEIPT DRAG-ZONES
   ========================================================================== */
.payment-proof-dropzone {
	border: 2px dashed #cbd5e1;
	border-radius: var(--smart-radius-card);
	background: #fafbfc;
	padding: 40px 25px;
	text-align: center;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}
.payment-proof-dropzone:hover, .payment-proof-dropzone.drag-over {
	border-color: var(--smart-primary);
	background: var(--smart-primary-light);
}

.dropzone-icon {
	color: var(--smart-text-muted);
	transition: transform 0.2s ease;
}
.payment-proof-dropzone:hover .dropzone-icon {
	transform: scale(1.1);
	color: var(--smart-primary);
}

.portal-ajax-msg {
	margin-top: 15px;
	padding: 12px 18px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 10px;
}
.portal-ajax-msg.success-msg {
	background: var(--smart-success-light);
	color: var(--smart-success);
	border: 1px solid #d1fae5;
}
.portal-ajax-msg.error-msg {
	background: var(--smart-danger-light);
	color: var(--smart-danger);
	border: 1px solid #fee2e2;
}

/* Spinner Rotate Keyframes */
.smart-spin {
	animation: smart-spin-rotate 1s linear infinite;
	display: inline-block;
}
@keyframes smart-spin-rotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* ==========================================================================
   4. SHOWCASE FILTERS & LIVE SEARCH MODULES
   ========================================================================== */
.smart-search-header-bar {
	display: flex;
	align-items: center;
	background: var(--smart-bg-card);
	border: 1.5px solid var(--smart-border-color);
	border-radius: var(--smart-radius-btn);
	padding: 5px 15px 5px 40px;
	box-shadow: var(--smart-shadow-sm);
	transition: all 0.2s ease;
}
.smart-search-header-bar:focus-within {
	border-color: var(--smart-primary);
	box-shadow: var(--smart-shadow-glow);
}
.search-bar-icon {
	position: absolute;
	left: 15px;
	color: var(--smart-text-muted);
	font-size: 20px;
	width: 20px;
	height: 20px;
}
.smart-live-search-input {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
	width: 100%;
	padding: 8px 0;
	font-size: 14px;
	color: var(--smart-text-main);
}

/* Dropdown overlay search matches */
.smart-search-dropdown-results {
	position: absolute;
	top: 105%;
	left: 0;
	right: 0;
	background: var(--smart-bg-card);
	border-radius: var(--smart-radius-card);
	border: 1px solid var(--smart-border-color);
	box-shadow: var(--smart-shadow-lg);
	z-index: 999;
	max-height: 400px;
	overflow-y: auto;
	display: none;
}
.smart-search-results-grid {
	padding: 10px;
}
.smart-search-item {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 12px;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s ease;
}
.smart-search-item:hover {
	background: var(--smart-bg-app);
}
.search-item-thumb {
	width: 50px;
	height: 50px;
	background-size: cover;
	background-position: center;
	border-radius: 8px;
	flex-shrink: 0;
}
.search-item-details {
	flex: 1;
}
.search-item-badge {
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: 10px;
}
.search-item-title {
	margin: 3px 0;
	font-size: 14px;
	font-weight: bold;
	color: var(--smart-text-main);
}
.search-item-pricing {
	font-size: 12px;
	font-weight: 600;
}

/* Category Filter Tabs Bar */
.smart-filter-tabs {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 5px;
	margin-bottom: 30px;
}
.smart-tab-trigger {
	background: var(--smart-bg-card);
	border: 1px solid var(--smart-border-color);
	color: var(--smart-text-desc);
	padding: 8px 18px;
	border-radius: 20px;
	cursor: pointer;
	font-weight: 700;
	font-size: 13px;
	white-space: nowrap;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.smart-tab-trigger:hover {
	background: #f8fafc;
	color: var(--smart-text-main);
}
.smart-tab-trigger.tab-active {
	background: var(--smart-primary);
	color: #fff;
	border-color: var(--smart-primary);
	box-shadow: var(--smart-shadow-glow);
}

/* Responsive grid layout columns (4 per row on PC) */
.smart-products-showcase-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 20px;
}
@media (max-width: 900px) {
	.smart-products-showcase-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.smart-products-showcase-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   5. THE 5 GORGEOUS SELECTED CARD DESIGN SCHEMES
   ========================================================================== */

/* --------------------------------------------------------------------------
   STYLE 1: MINIMALIST PREMIUM
   -------------------------------------------------------------------------- */
.smart-product-card-item.smart-card-1 {
	background: var(--smart-bg-card);
	border: 1px solid var(--smart-border-color);
	border-radius: var(--smart-radius-card);
	overflow: hidden;
	box-shadow: var(--smart-shadow-sm);
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.smart-product-card-item.smart-card-1:hover {
	transform: translateY(-5px);
	box-shadow: var(--smart-shadow-lg);
}
.smart-card-1 .card-cover-wrapper {
	height: 160px;
	background-size: cover;
	background-position: center;
	position: relative;
	transition: transform 0.3s ease;
}
.smart-card-1:hover .card-cover-wrapper {
	transform: scale(1.02);
}

/* --------------------------------------------------------------------------
   STYLE 2: VIBRANT GLASSMORPHIC (DARK THEME FOCUS)
   -------------------------------------------------------------------------- */
.smart-product-card-item.smart-card-2 {
	position: relative;
	background: rgba(15, 23, 42, 0.7);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--smart-radius-card);
	color: #fff;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.smart-card-2 .card-title {
	color: #fff !important;
}
.smart-card-2 .card-excerpt {
	color: #94a3b8 !important;
}
.smart-card-2 .card-cover-wrapper {
	height: 160px;
	background-size: cover;
	background-position: center;
}
.btn-neon-glow {
	background: var(--smart-primary);
	color: #fff;
	box-shadow: 0 0 15px var(--smart-primary);
	border: none;
}
.btn-neon-glow:hover {
	background: #0284c7;
	box-shadow: 0 0 25px var(--smart-primary);
}

/* --------------------------------------------------------------------------
   STYLE 3: GRADIENT BORDER & ACCENT
   -------------------------------------------------------------------------- */
.smart-product-card-item.smart-card-3 {
	background: #111;
	border-radius: var(--smart-radius-card);
	overflow: hidden;
	padding: 2px; /* For border outline */
	background: linear-gradient(135deg, #6366f1, #d946ef);
	box-shadow: var(--smart-shadow-md);
	transition: all 0.25s ease;
}
.smart-product-card-item.smart-card-3:hover {
	transform: translateY(-8px);
	box-shadow: 0 15px 30px rgba(217, 70, 239, 0.2);
}
.smart-card-3 .gradient-border-wrapper {
	background: #000;
	border-radius: calc(var(--smart-radius-card) - 2px);
	height: 100%;
	width: 100%;
}
.smart-card-3 .card-title {
	color: #fff !important;
}
.smart-card-3 .card-excerpt {
	color: #888 !important;
}
.smart-card-3 .card-cover-wrapper {
	height: 160px;
	background-size: cover;
	background-position: center;
}
.btn-gradient-bg {
	background: linear-gradient(135deg, #6366f1, #d946ef) !important;
	color: #fff !important;
	border: none !important;
}

/* --------------------------------------------------------------------------
   STYLE 4: MODERN E-COMMERCE CLASSIC
   -------------------------------------------------------------------------- */
.smart-product-card-item.smart-card-4 {
	background: var(--smart-bg-card);
	border: 1px solid var(--smart-border-color);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 8px 30px rgba(0,0,0,0.03);
	transition: all 0.2s ease;
}
.smart-product-card-item.smart-card-4:hover {
	box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}
.smart-card-4 .card-cover-wrapper {
	height: 160px;
	background-size: cover;
	background-position: center;
}
.smart-card-4 .card-details-wrapper {
	padding: 20px;
}

/* --------------------------------------------------------------------------
   STYLE 5: CYBERPUNK / TECH DYNAMICS (CLIP-PATHS)
   -------------------------------------------------------------------------- */
.smart-product-card-item.smart-card-5 {
	background: #090e1a;
	border: 1.5px solid #00f0ff;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
	color: #fff;
	overflow: hidden;
	position: relative;
}
.smart-card-5 .card-title {
	color: #00f0ff !important;
	font-family: monospace;
}
.smart-card-5 .card-excerpt {
	color: #a5b4fc !important;
}
.smart-card-5 .card-cover-wrapper {
	height: 150px;
	background-size: cover;
	background-position: center;
	border-bottom: 1.5px solid #00f0ff;
}
.smart-card-5 .price-current-tag {
	color: #00f0ff !important;
	font-family: monospace;
	font-weight: 800;
}
.smart-card-5 .smart-buy-cta-btn {
	background: transparent;
	border: 1.5px solid #ff007f;
	color: #ff007f;
	clip-path: polygon(0 0, 90% 0, 100% 30%, 100% 100%, 0 100%);
}
.smart-card-5 .smart-buy-cta-btn:hover {
	background: #ff007f;
	color: #fff;
}

/* ==========================================================================
   6. COMMON BUTTONS, BADGES, AND FORMATTING GLOBALS
   ========================================================================== */
.card-details-wrapper {
	padding: 18px;
}
.card-title {
	margin: 0 0 8px 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--smart-text-main);
	line-height: 1.3;
}
.card-excerpt {
	margin: 0 0 15px 0;
	font-size: 13px;
	color: var(--smart-text-desc);
	line-height: 1.4;
	height: 38px;
	overflow: hidden;
}
.card-footer-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 15px;
}

/* Badges contextual colors mapping */
.card-type-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 10px;
	border-radius: 20px;
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	color: #fff;
	box-shadow: var(--smart-shadow-sm);
}
.badge-digital_product { background: var(--smart-success); }
.badge-digital_service { background: var(--smart-primary); }
.badge-course { background: #8b5cf6; }

/* Pricing elements */
.price-current-tag {
	font-size: 16px;
	font-weight: 700;
	color: var(--smart-text-main);
}
.price-old-tag {
	font-size: 12px;
	color: var(--smart-text-muted);
	text-decoration: line-through;
	margin-right: 5px;
}
.free-tag {
	color: var(--smart-success);
	font-weight: 700;
}

/* Primary actions buttons */
.smart-buy-cta-btn, .button-primary {
	display: inline-block;
	text-align: center;
	padding: 8px 18px;
	border-radius: var(--smart-radius-btn);
	font-weight: 700;
	font-size: 12px;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.2s ease-in-out;
}
.smart-buy-cta-btn {
	background: var(--smart-primary);
	color: #fff;
	border: 1px solid var(--smart-primary);
}
.smart-buy-cta-btn:hover {
	background: var(--smart-primary-hover);
	border-color: var(--smart-primary-hover);
}