/**
 * AMD KonOs — Flagship Modern Coffeehouse Stylesheet (Starbucks Reserve Edition)
 * Palette:
 *   Siren Green:       #00704A
 *   Deep House Green:  #1E3932
 *   Soft Mint Foam:    #D4E9E2
 *   Reserve Gold:      #CBA258
 *   Warm Oat Cream:    #F9F6F0
 *   Pure Porcelain:    #FFFFFF
 *   Espresso Ink:      #1F1F1F
 * Plus High-Contrast Dark Mode for KDS Touch Screen (/kds-cocina/)
 */

:root {
	--sbux-green: #00704A;
	--sbux-green-hover: #005c3d;
	--sbux-house: #1E3932;
	--sbux-house-deep: #12241F;
	--sbux-mint: #D4E9E2;
	--sbux-mint-soft: #EBF5F1;
	--sbux-gold: #CBA258;
	--sbux-gold-light: #F6EFE0;
	--sbux-cream: #F9F6F0;
	--sbux-cream-alt: #F1ECE1;
	--sbux-card: #FFFFFF;
	--sbux-ink: #1E2623;
	--sbux-muted: #5C6B64;
	--sbux-border: rgba(30, 57, 50, 0.11);
	--sbux-danger: #D62B1F;
	--sbux-shadow-sm: 0 4px 16px rgba(30, 57, 50, 0.06);
	--sbux-shadow-md: 0 14px 34px rgba(30, 57, 50, 0.10);
	--sbux-shadow-lg: 0 24px 56px rgba(18, 36, 31, 0.16);
	--konos-font-display: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
	--konos-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	--konos-mono: 'JetBrains Mono', monospace;
}

/* ==========================================================================
   FULL-SCREEN WORDPRESS THEME OVERRIDE
   ========================================================================== */
body.amdkonos-fullscreen-app {
	margin: 0 !important;
	padding: 0 !important;
	background: var(--sbux-cream) !important;
	color: var(--sbux-ink) !important;
	font-family: var(--konos-font) !important;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

body.amdkonos-fullscreen-app.amdkonos-kds-kiosk-body {
	background: #090D16 !important;
	color: #F8FAFC !important;
}

body.amdkonos-fullscreen-app > header,
body.amdkonos-fullscreen-app > footer,
body.amdkonos-fullscreen-app .site-header,
body.amdkonos-fullscreen-app .site-footer,
body.amdkonos-fullscreen-app .entry-header,
body.amdkonos-fullscreen-app .wp-block-template-part,
body.amdkonos-fullscreen-app #wpadminbar {
	display: none !important;
}

body.amdkonos-fullscreen-app .wp-site-blocks,
body.amdkonos-fullscreen-app main,
body.amdkonos-fullscreen-app .entry-content,
body.amdkonos-fullscreen-app article {
	margin: 0 !important;
	padding: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
}

.amdkonos-wrapper * {
	box-sizing: border-box;
}

.amdkonos-wrapper {
	min-height: 100vh;
	width: 100%;
	position: relative;
	padding-bottom: 40px;
}

.amdkonos-theme-starbucks {
	background: radial-gradient(circle at 0% 0%, #FFFFFF 0%, #F9F6F0 55%, #F1ECE1 100%);
	color: var(--sbux-ink);
}

/* ==========================================================================
   SHARED STARBUCKS GLOBAL TOP BAR
   ========================================================================== */
.amdkonos-eco-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 12px 28px;
	position: sticky;
	top: 0;
	z-index: 950;
	flex-wrap: wrap;
	transition: all 0.2s ease;
}

.amdkonos-eco-bar.eco-bar-sbux {
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--sbux-border);
	box-shadow: 0 2px 14px rgba(30, 57, 50, 0.05);
}

.amdkonos-eco-bar.eco-bar-dark {
	background: rgba(9, 13, 22, 0.95);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.amdkonos-eco-brand {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sbux-siren-badge {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--sbux-house);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(0, 112, 74, 0.28);
}

.amdkonos-brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.amdkonos-brand-text strong {
	font-family: var(--konos-font-display);
	font-size: 0.96rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	color: var(--sbux-house);
}

.eco-bar-dark .amdkonos-brand-text strong {
	color: #F8FAFC;
}

.amdkonos-brand-text span {
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--sbux-green);
}

.eco-bar-dark .amdkonos-brand-text span {
	color: #34D399;
}

.amdkonos-eco-links {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.amdkonos-eco-link {
	text-decoration: none !important;
	font-size: 0.82rem;
	font-weight: 700;
	padding: 8px 15px;
	border-radius: 999px;
	transition: all 0.2s ease;
	color: var(--sbux-ink);
}

.eco-bar-sbux .amdkonos-eco-link:hover {
	background: var(--sbux-mint-soft);
	color: var(--sbux-green);
}

.eco-bar-sbux .amdkonos-eco-link.active {
	background: var(--sbux-green);
	color: #FFFFFF;
	box-shadow: 0 4px 12px rgba(0, 112, 74, 0.26);
}

.eco-bar-dark .amdkonos-eco-link {
	color: #CBD5E1;
}

.eco-bar-dark .amdkonos-eco-link.active {
	background: #00704A;
	color: #FFFFFF;
}

.amdkonos-btn-auth-trigger {
	background: var(--sbux-house);
	color: #FFFFFF;
	border: none;
	padding: 7px 14px 7px 9px;
	border-radius: 999px;
	font-family: var(--konos-font);
	font-size: 0.8rem;
	font-weight: 700;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-shadow: 0 4px 12px rgba(30, 57, 50, 0.18);
	transition: transform 0.15s ease;
}

.amdkonos-btn-auth-trigger:hover {
	transform: translateY(-1px);
}

.sbux-star-badge {
	background: var(--sbux-gold);
	color: #1E2623;
	padding: 3px 8px;
	border-radius: 999px;
	font-size: 0.74rem;
	font-weight: 900;
}

/* ==========================================================================
   STARBUCKS TWO-PANE WEB APP SHELL (LEFT STICKY RAIL + RIGHT SPA VIEWPORT)
   ========================================================================== */
.sbux-app-shell {
	max-width: 1400px;
	margin: 0 auto;
	padding: 24px 28px 60px;
	display: grid;
	grid-template-columns: 380px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

@media (max-width: 1040px) {
	.sbux-app-shell {
		grid-template-columns: 1fr;
		padding: 14px 14px 120px;
		gap: 20px;
	}
}

/* LEFT RAIL CARD */
.sbux-left-rail {
	position: sticky;
	top: 78px;
}

@media (max-width: 1040px) {
	.sbux-left-rail {
		position: static;
	}
}

.sbux-rail-card {
	background: #FFFFFF;
	border-radius: 26px;
	padding: 24px;
	border: 1px solid var(--sbux-border);
	box-shadow: var(--sbux-shadow-md);
}

.sbux-StoreBadge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--sbux-mint);
	color: var(--sbux-house);
	font-size: 0.76rem;
	font-weight: 800;
	padding: 6px 13px;
	border-radius: 999px;
	margin-bottom: 12px;
}

.sbux-greeting-headline {
	font-family: var(--konos-font-display);
	font-size: 1.75rem;
	font-weight: 800;
	color: var(--sbux-house);
	margin: 0 0 6px;
	line-height: 1.15;
}

.sbux-greeting-sub {
	margin: 0 0 18px;
	font-size: 0.85rem;
	color: var(--sbux-muted);
	line-height: 1.45;
}

/* Rewards Pill in Left Rail */
.sbux-rail-rewards {
	background: linear-gradient(135deg, var(--sbux-house) 0%, #10211C 100%);
	color: #FFFFFF;
	border-radius: 18px;
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	box-shadow: 0 8px 20px rgba(30, 57, 50, 0.22);
}

.sbux-rail-rewards:hover {
	transform: translateY(-2px);
}

.rewards-star-ring {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 2px solid var(--sbux-gold);
	background: rgba(203, 162, 88, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	flex-shrink: 0;
}

.rewards-star-ring strong {
	font-family: var(--konos-font-display);
	font-size: 1.05rem;
	font-weight: 900;
	color: #FFFFFF;
}

.rewards-star-ring span {
	color: var(--sbux-gold);
	font-size: 0.9rem;
}

.rewards-rail-info {
	flex: 1;
}

.rewards-rail-info strong {
	display: block;
	font-size: 0.86rem;
	color: var(--sbux-gold);
	margin-bottom: 2px;
}

.rewards-rail-info span {
	display: block;
	font-size: 0.74rem;
	color: rgba(255, 255, 255, 0.82);
	margin-bottom: 6px;
}

.rewards-mini-bar {
	height: 6px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 99px;
	overflow: hidden;
}

.rewards-mini-bar > div {
	height: 100%;
	background: linear-gradient(90deg, var(--sbux-gold), #F4D078);
	border-radius: 99px;
}

/* SECTION NAVIGATION MENU IN LEFT RAIL */
.sbux-section-nav {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin-bottom: 18px;
}

.sbux-nav-btn {
	width: 100%;
	background: var(--sbux-cream);
	border: 1px solid transparent;
	border-radius: 16px;
	padding: 11px 14px;
	display: flex;
	align-items: center;
	gap: 12px;
	text-align: left;
	cursor: pointer;
	font-family: var(--konos-font);
	transition: all 0.18s ease;
}

.sbux-nav-btn:hover {
	background: var(--sbux-mint-soft);
	border-color: rgba(0, 112, 74, 0.25);
	transform: translateX(3px);
}

.sbux-nav-btn.active {
	background: var(--sbux-green);
	color: #FFFFFF;
	box-shadow: 0 8px 18px rgba(0, 112, 74, 0.24);
}

.sbux-nav-btn .nav-ico {
	width: 36px;
	height: 36px;
	border-radius: 11px;
	background: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.05rem;
	flex-shrink: 0;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.sbux-nav-btn.active .nav-ico {
	background: rgba(255, 255, 255, 0.18);
}

.sbux-nav-btn .nav-txt {
	flex: 1;
	min-width: 0;
}

.sbux-nav-btn .nav-txt strong {
	display: block;
	font-size: 0.86rem;
	font-weight: 800;
	color: var(--sbux-house);
}

.sbux-nav-btn.active .nav-txt strong {
	color: #FFFFFF;
}

.sbux-nav-btn .nav-txt small {
	display: block;
	font-size: 0.72rem;
	color: var(--sbux-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sbux-nav-btn.active .nav-txt small {
	color: rgba(255, 255, 255, 0.85);
}

.sbux-nav-btn .nav-arrow {
	font-weight: 800;
	font-size: 0.9rem;
	color: var(--sbux-green);
}

.sbux-nav-btn.active .nav-arrow {
	color: #FFFFFF;
}

/* QR Simulator Box inside Left Rail */
.sbux-qr-sim-card {
	background: var(--sbux-cream);
	border: 1px dashed rgba(0, 112, 74, 0.3);
	border-radius: 16px;
	padding: 12px;
}

.sbux-qr-sim-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.sbux-qr-sim-head span {
	font-size: 0.74rem;
	font-weight: 800;
	color: var(--sbux-house);
}

.sbux-link-xs {
	background: #FFFFFF;
	border: 1px solid var(--sbux-border);
	border-radius: 99px;
	padding: 3px 9px;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--sbux-green);
	cursor: pointer;
}

.amdkonos-qr-sim-pills {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.amdkonos-sim-pill {
	font-size: 0.72rem;
	font-weight: 700;
	padding: 5px 10px;
	border-radius: 999px;
	background: #FFFFFF;
	color: var(--sbux-house);
	border: 1px solid var(--sbux-border);
	cursor: pointer;
	text-decoration: none !important;
	transition: all 0.15s ease;
}

.amdkonos-sim-pill:hover,
.amdkonos-sim-pill.active {
	background: var(--sbux-green);
	color: #FFFFFF;
	border-color: var(--sbux-green);
}

/* ==========================================================================
   RIGHT VIEWPORT & SPA SECTION TRANSITIONS
   ========================================================================== */
.sbux-main-viewport {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sbux-view-section {
	animation: sbuxSectionEnter 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.sbux-view-header {
	background: #FFFFFF;
	border-radius: 22px;
	padding: 20px 24px;
	border: 1px solid var(--sbux-border);
	box-shadow: var(--sbux-shadow-sm);
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.sbux-view-header h2 {
	margin: 0 0 4px;
	font-family: var(--konos-font-display);
	font-size: 1.45rem;
	font-weight: 800;
	color: var(--sbux-house);
}

.sbux-view-header p {
	margin: 0;
	font-size: 0.86rem;
	color: var(--sbux-muted);
}

.sbux-back-pill {
	background: var(--sbux-mint-soft);
	color: var(--sbux-green);
	border: 1px solid rgba(0, 112, 74, 0.2);
	padding: 9px 16px;
	border-radius: 999px;
	font-family: var(--konos-font);
	font-size: 0.82rem;
	font-weight: 800;
	cursor: pointer;
	transition: all 0.15s ease;
	flex-shrink: 0;
}

.sbux-back-pill:hover {
	background: var(--sbux-green);
	color: #FFFFFF;
}

/* ==========================================================================
   SECTION 1: HOME HERO, MODALITY CARDS & CATEGORY BUBBLES
   ========================================================================== */
.sbux-hero-banner {
	background: linear-gradient(125deg, var(--sbux-house) 0%, #0F261F 60%, #004E34 100%);
	border-radius: 28px;
	padding: 32px;
	color: #FFFFFF;
	display: grid;
	grid-template-columns: 1.25fr 0.75fr;
	gap: 24px;
	align-items: center;
	box-shadow: 0 20px 44px rgba(18, 36, 31, 0.22);
	margin-bottom: 26px;
	position: relative;
	overflow: hidden;
}

@media (max-width: 720px) {
	.sbux-hero-banner {
		grid-template-columns: 1fr;
		padding: 24px;
	}
}

.sbux-kicker-gold {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 900;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sbux-gold);
	margin-bottom: 8px;
}

.sbux-hero-content h2 {
	font-family: var(--konos-font-display);
	font-size: clamp(1.65rem, 2.6vw, 2.3rem);
	font-weight: 800;
	line-height: 1.12;
	margin: 0 0 12px;
	color: #FFFFFF;
}

.sbux-hero-content p {
	margin: 0 0 22px;
	font-size: 0.94rem;
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.55;
}

.sbux-hero-btns {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.sbux-btn-green {
	background: var(--sbux-green);
	color: #FFFFFF;
	border: none;
	border-radius: 999px;
	padding: 12px 24px;
	font-family: var(--konos-font);
	font-size: 0.9rem;
	font-weight: 800;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-shadow: 0 8px 20px rgba(0, 112, 74, 0.32);
	transition: all 0.18s ease;
}

.sbux-btn-green:hover {
	background: var(--sbux-green-hover);
	transform: translateY(-1px);
}

.sbux-btn-ghost-light {
	background: rgba(255, 255, 255, 0.12);
	color: #FFFFFF;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	padding: 12px 20px;
	font-family: var(--konos-font);
	font-size: 0.88rem;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.18s ease;
}

.sbux-btn-ghost-light:hover {
	background: rgba(255, 255, 255, 0.22);
}

.sbux-hero-visual {
	display: flex;
	justify-content: center;
}

.sbux-hero-visual img {
	width: 220px;
	height: 220px;
	border-radius: 50%;
	object-fit: cover;
	border: 4px solid var(--sbux-gold);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}

.sbux-sec-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 24px 0 12px;
	gap: 10px;
}

.sbux-sec-head h3 {
	margin: 0;
	font-family: var(--konos-font-display);
	font-size: 1.22rem;
	font-weight: 800;
	color: var(--sbux-house);
}

.sbux-sec-sub {
	font-size: 0.8rem;
	color: var(--sbux-muted);
}

.sbux-text-link {
	background: none;
	border: none;
	color: var(--sbux-green);
	font-family: var(--konos-font);
	font-size: 0.84rem;
	font-weight: 800;
	cursor: pointer;
}

/* Modality Grid */
.sbux-modality-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
	gap: 12px;
}

.sbux-modality-card {
	background: #FFFFFF;
	border: 1.5px solid var(--sbux-border);
	border-radius: 18px;
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	text-align: left;
	cursor: pointer;
	font-family: var(--konos-font);
	transition: all 0.18s ease;
	box-shadow: var(--sbux-shadow-sm);
}

.sbux-modality-card:hover {
	border-color: var(--sbux-green);
	transform: translateY(-2px);
}

.sbux-modality-card.active {
	background: var(--sbux-mint-soft);
	border-color: var(--sbux-green);
	box-shadow: 0 8px 20px rgba(0, 112, 74, 0.14);
}

.sbux-modality-card .mod-ico {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--sbux-cream);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	flex-shrink: 0;
}

.sbux-modality-card.active .mod-ico {
	background: var(--sbux-green);
	color: #FFFFFF;
}

.sbux-modality-card strong {
	display: block;
	font-size: 0.88rem;
	color: var(--sbux-house);
}

.sbux-modality-card small {
	display: block;
	font-size: 0.74rem;
	color: var(--sbux-muted);
}

/* Circular Starbucks Category Bubbles */
.sbux-cat-bubbles {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

@media (max-width: 640px) {
	.sbux-cat-bubbles {
		grid-template-columns: repeat(2, 1fr);
	}
}

.sbux-cat-bubble {
	background: #FFFFFF;
	border: 1px solid var(--sbux-border);
	border-radius: 22px;
	padding: 18px 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-family: var(--konos-font);
	box-shadow: var(--sbux-shadow-sm);
	transition: all 0.2s ease;
}

.sbux-cat-bubble:hover {
	transform: translateY(-4px);
	border-color: var(--sbux-green);
	box-shadow: var(--sbux-shadow-md);
}

.sbux-cat-bubble .bubble-ring {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	padding: 4px;
	background: linear-gradient(135deg, var(--sbux-green), var(--sbux-house));
}

.sbux-cat-bubble .bubble-ring img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid #FFFFFF;
}

.sbux-cat-bubble strong {
	font-size: 0.88rem;
	font-weight: 800;
	color: var(--sbux-house);
}

/* Barista Favorites Grid on Home */
.sbux-popular-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 14px;
}

.brew-pop-card {
	background: #FFFFFF;
	border-radius: 20px;
	padding: 14px;
	border: 1px solid var(--sbux-border);
	box-shadow: var(--sbux-shadow-sm);
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	flex-direction: column;
}

.brew-pop-card:hover {
	transform: translateY(-4px);
	border-color: var(--sbux-green);
	box-shadow: var(--sbux-shadow-md);
}

.brew-pop-img-wrap {
	position: relative;
	height: 135px;
	border-radius: 14px;
	overflow: hidden;
	margin-bottom: 10px;
	background: var(--sbux-cream);
}

.brew-pop-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.brew-pop-heart {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--sbux-green);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85rem;
	font-weight: 800;
}

.brew-pop-card h4 {
	margin: 0 0 6px;
	font-size: 0.92rem;
	font-weight: 800;
	color: var(--sbux-house);
}

.brew-pop-card span {
	font-size: 0.9rem;
	font-weight: 800;
	color: var(--sbux-green);
	margin-top: auto;
}

/* Quick Banner Cards */
.sbux-quick-banners {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 24px;
}

@media (max-width: 720px) {
	.sbux-quick-banners {
		grid-template-columns: 1fr;
	}
}

.sbux-qcard {
	border-radius: 22px;
	padding: 22px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 14px;
	transition: transform 0.2s ease;
}

.sbux-qcard:hover {
	transform: translateY(-3px);
}

.sbux-qcard.qcard-green {
	background: var(--sbux-mint);
	color: var(--sbux-house);
	border: 1px solid rgba(0, 112, 74, 0.2);
}

.sbux-qcard.qcard-gold {
	background: var(--sbux-gold-light);
	color: var(--sbux-house);
	border: 1px solid rgba(203, 162, 88, 0.35);
}

.qcard-tag {
	font-size: 0.68rem;
	font-weight: 900;
	letter-spacing: 0.12em;
	color: var(--sbux-green);
}

.sbux-qcard h4 {
	margin: 4px 0 6px;
	font-family: var(--konos-font-display);
	font-size: 1.15rem;
	font-weight: 800;
}

.sbux-qcard p {
	margin: 0;
	font-size: 0.83rem;
	color: var(--sbux-muted);
}

.qcard-cta {
	font-size: 0.84rem;
	font-weight: 800;
	color: var(--sbux-green);
}

/* ==========================================================================
   SECTION 2: MENU TOOLBAR & STARBUCKS CATALOG CARDS
   ========================================================================== */
.sbux-menu-toolbar {
	background: #FFFFFF;
	border-radius: 20px;
	padding: 16px;
	border: 1px solid var(--sbux-border);
	margin-bottom: 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sbux-search-input-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--sbux-cream);
	border-radius: 14px;
	padding: 10px 16px;
	border: 1px solid var(--sbux-border);
}

.sbux-search-input-wrap input {
	border: none !important;
	background: transparent !important;
	width: 100%;
	font-family: var(--konos-font);
	font-size: 0.92rem;
	color: var(--sbux-ink);
	outline: none !important;
}

.amdkonos-category-pills {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 2px;
}

.amdkonos-cat-pill {
	background: var(--sbux-cream);
	color: var(--sbux-house);
	border: 1px solid var(--sbux-border);
	padding: 8px 18px;
	border-radius: 999px;
	font-family: var(--konos-font);
	font-size: 0.82rem;
	font-weight: 800;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.15s ease;
}

.amdkonos-cat-pill.active {
	background: var(--sbux-house);
	color: #FFFFFF;
	border-color: var(--sbux-house);
}

.sbux-products-catalog {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 16px;
}

.brew-menu-item-card {
	background: #FFFFFF;
	border-radius: 22px;
	padding: 16px;
	border: 1px solid var(--sbux-border);
	box-shadow: var(--sbux-shadow-sm);
	display: flex;
	align-items: center;
	gap: 16px;
	transition: all 0.2s ease;
}

.brew-menu-item-card:hover {
	transform: translateY(-2px);
	border-color: var(--sbux-green);
	box-shadow: var(--sbux-shadow-md);
}

.brew-menu-thumb {
	width: 92px;
	height: 92px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	background: var(--sbux-house);
	border: 3px solid var(--sbux-mint);
	position: relative;
}

.brew-menu-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.brew-soldout-pill {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(214, 43, 31, 0.92);
	color: #FFFFFF;
	font-size: 0.62rem;
	font-weight: 900;
	text-align: center;
	padding: 3px 2px;
}

.brew-menu-info {
	flex: 1;
	min-width: 0;
}

.brew-menu-top-line {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 4px;
}

.brew-menu-title {
	margin: 0;
	font-family: var(--konos-font-display);
	font-size: 1rem;
	font-weight: 800;
	color: var(--sbux-house);
}

.brew-menu-price {
	font-family: var(--konos-font-display);
	font-size: 1rem;
	font-weight: 900;
	color: var(--sbux-green);
	flex-shrink: 0;
}

.brew-menu-desc {
	margin: 0 0 8px;
	font-size: 0.78rem;
	color: var(--sbux-muted);
	line-height: 1.4;
}

.brew-add-square-btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--sbux-green);
	color: #FFFFFF;
	border: none;
	font-size: 1.35rem;
	font-weight: 700;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 6px 14px rgba(0, 112, 74, 0.28);
	transition: transform 0.15s ease;
}

.brew-add-square-btn:hover {
	transform: scale(1.08);
	background: var(--sbux-house);
}

/* Sold-Out Preorder Notice inside Menu Item */
.brew-Menu-Soldout-Box {
	background: #FFF8EB;
	border: 1px dashed #D97706;
	border-radius: 12px;
	padding: 8px 10px;
	margin-top: 6px;
}

.brew-Menu-Soldout-Box p {
	margin: 0 0 6px;
	font-size: 0.74rem;
	font-weight: 700;
	color: #92400E;
}

.brew-btn-preorder-tomorrow {
	width: 100%;
	background: var(--sbux-house);
	color: var(--sbux-gold);
	border: none;
	border-radius: 99px;
	padding: 7px 12px;
	font-family: var(--konos-font);
	font-size: 0.75rem;
	font-weight: 800;
	cursor: pointer;
}

/* ==========================================================================
   SECTION 3: DEDICATED BARISTA CUSTOMIZER (view-customize)
   ========================================================================== */
.sbux-customizer-card {
	background: #FFFFFF;
	border-radius: 26px;
	padding: 26px;
	border: 1px solid var(--sbux-border);
	box-shadow: var(--sbux-shadow-md);
}

.sbux-cust-hero {
	background: linear-gradient(130deg, var(--sbux-house) 0%, #12241F 100%);
	color: #FFFFFF;
	border-radius: 22px;
	padding: 24px;
	display: flex;
	align-items: center;
	gap: 24px;
	margin-bottom: 24px;
	flex-wrap: wrap;
}

.sbux-cust-img-circle {
	width: 130px;
	height: 130px;
	border-radius: 50%;
	overflow: hidden;
	border: 4px solid var(--sbux-gold);
	flex-shrink: 0;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.sbux-cust-img-circle img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sbux-cust-hero-info {
	flex: 1;
	min-width: 220px;
}

.sbux-cust-hero-info h3 {
	margin: 4px 0 6px;
	font-family: var(--konos-font-display);
	font-size: 1.6rem;
	font-weight: 800;
	color: #FFFFFF;
}

.sbux-cust-hero-info p {
	margin: 0 0 10px;
	font-size: 0.88rem;
	color: rgba(255, 255, 255, 0.82);
}

.sbux-cust-hero-price {
	display: inline-block;
	background: var(--sbux-gold);
	color: #1E2623;
	padding: 5px 14px;
	border-radius: 999px;
	font-family: var(--konos-font-display);
	font-size: 1.05rem;
	font-weight: 900;
}

.sbux-cust-options-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

@media (max-width: 760px) {
	.sbux-cust-options-grid {
		grid-template-columns: 1fr;
	}
}

.sbux-cust-block {
	background: var(--sbux-cream);
	border-radius: 18px;
	padding: 16px;
	border: 1px solid var(--sbux-border);
}

.sbux-cust-block h4 {
	margin: 0 0 12px;
	font-size: 0.88rem;
	font-weight: 800;
	color: var(--sbux-house);
}

/* Starbucks Cup Size Selector */
.sbux-size-selector {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}

.sbux-size-btn {
	background: #FFFFFF;
	border: 1.5px solid var(--sbux-border);
	border-radius: 16px;
	padding: 10px 6px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	cursor: pointer;
	font-family: var(--konos-font);
	transition: all 0.15s ease;
}

.sbux-size-btn.active {
	background: var(--sbux-mint-soft);
	border-color: var(--sbux-green);
	box-shadow: 0 4px 12px rgba(0, 112, 74, 0.18);
}

.sbux-size-btn strong {
	font-size: 0.78rem;
	color: var(--sbux-house);
}

.sbux-size-btn small {
	font-size: 0.66rem;
	color: var(--sbux-muted);
}

.cup-sm { font-size: 0.95rem; }
.cup-md { font-size: 1.15rem; }
.cup-lg { font-size: 1.35rem; }
.cup-xl { font-size: 1.55rem; }

.brew-pill-group {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.brew-opt-pill {
	background: #FFFFFF;
	color: var(--sbux-house);
	border: 1.5px solid var(--sbux-border);
	padding: 8px 14px;
	border-radius: 999px;
	font-family: var(--konos-font);
	font-size: 0.8rem;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.15s ease;
}

.brew-opt-pill.active {
	background: var(--sbux-green);
	color: #FFFFFF;
	border-color: var(--sbux-green);
}

.brew-extra-check {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 9px 12px;
	background: #FFFFFF;
	border-radius: 12px;
	margin-bottom: 8px;
	font-size: 0.82rem;
	cursor: pointer;
	border: 1px solid var(--sbux-border);
}

.brew-extra-check strong {
	color: var(--sbux-green);
}

.sbux-cust-action-bar {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 20px;
}

.brew-qty-pill {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	background: var(--sbux-cream);
	border: 1px solid var(--sbux-border);
	padding: 8px 14px;
	border-radius: 999px;
}

.qty-btn {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background: #FFFFFF;
	color: var(--sbux-house);
	font-size: 1.1rem;
	font-weight: 800;
	cursor: pointer;
}

.sbux-btn-add-order {
	flex: 1;
	justify-content: space-between;
	padding: 15px 24px;
	font-size: 0.96rem;
}

/* ==========================================================================
   SECTION 4: LIVE ORDER TRACKING & SPLIT CARDS
   ========================================================================== */
.brew-tracking-card {
	background: #FFFFFF;
	border-radius: 24px;
	padding: 24px;
	border: 1px solid var(--sbux-border);
	box-shadow: var(--sbux-shadow-md);
}

.brew-tracking-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.brew-tracking-order-id {
	display: inline-block;
	background: var(--sbux-mint);
	color: var(--sbux-house);
	font-size: 0.74rem;
	font-weight: 800;
	padding: 4px 11px;
	border-radius: 999px;
	margin-bottom: 6px;
}

.brew-tracking-header h4 {
	margin: 0 0 4px;
	font-size: 1.1rem;
	color: var(--sbux-house);
}

.brew-tracking-header p {
	margin: 0;
	font-size: 0.85rem;
	color: var(--sbux-green);
	font-weight: 800;
}

.brew-scooter-badge {
	width: 54px;
	height: 54px;
	border-radius: 18px;
	background: var(--sbux-mint-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
}

.brew-steptracker {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 20px 0 24px;
}

.brew-step-node {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	z-index: 2;
}

.brew-step-node .node-circle {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--sbux-cream);
	border: 2px solid var(--sbux-border);
	color: var(--sbux-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.82rem;
	font-weight: 900;
}

.brew-step-node.active .node-circle {
	background: var(--sbux-green);
	border-color: var(--sbux-green);
	color: #FFFFFF;
	box-shadow: 0 4px 12px rgba(0, 112, 74, 0.3);
}

.brew-step-node span {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--sbux-muted);
}

.brew-step-node.active span {
	color: var(--sbux-house);
	font-weight: 800;
}

.brew-step-connector {
	flex: 1;
	height: 3px;
	background: var(--sbux-cream-alt);
	margin: 0 6px 18px;
}

.brew-tracking-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

@media (max-width: 580px) {
	.brew-tracking-actions {
		grid-template-columns: 1fr;
	}
}

.sbux-split-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

@media (max-width: 820px) {
	.sbux-split-cards {
		grid-template-columns: 1fr;
	}
}

.sbux-panel-card {
	background: #FFFFFF;
	border-radius: 22px;
	padding: 22px;
	border: 1px solid var(--sbux-border);
	box-shadow: var(--sbux-shadow-sm);
}

.sbux-panel-card h3 {
	margin: 4px 0 12px;
	font-family: var(--konos-font-display);
	font-size: 1.15rem;
	color: var(--sbux-house);
}

/* ==========================================================================
   SECTION 6: REWARDS HERO & PERKS GRID
   ========================================================================== */
.sbux-rewards-hero-card {
	background: linear-gradient(130deg, var(--sbux-house) 0%, #0E1F1A 100%);
	color: #FFFFFF;
	border-radius: 24px;
	padding: 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.sbux-rewards-hero-card h3 {
	margin: 4px 0 6px;
	font-family: var(--konos-font-display);
	font-size: 2rem;
	font-weight: 900;
}

.sbux-rewards-hero-card p {
	margin: 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.88rem;
}

.sbux-rewards-perks-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}

.sbux-perk-card {
	background: #FFFFFF;
	border-radius: 20px;
	padding: 20px;
	border: 1px solid var(--sbux-border);
	box-shadow: var(--sbux-shadow-sm);
}

.perk-stars {
	display: inline-block;
	background: var(--sbux-gold-light);
	color: #855B12;
	font-weight: 900;
	font-size: 0.8rem;
	padding: 4px 12px;
	border-radius: 999px;
	margin-bottom: 10px;
}

.sbux-perk-card h4 {
	margin: 0 0 6px;
	color: var(--sbux-house);
}

.sbux-perk-card p {
	margin: 0 0 14px;
	font-size: 0.82rem;
	color: var(--sbux-muted);
}

/* ==========================================================================
   FLOATING STARBUCKS HOUSE-GREEN CART BAR + BOTTOM MOBILE TAB BAR
   ========================================================================== */
.sbux-floating-order-bar {
	background: var(--sbux-house);
	color: #FFFFFF;
	border-radius: 20px;
	padding: 12px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	box-shadow: 0 16px 36px rgba(18, 36, 31, 0.28);
	margin-top: 8px;
}

.sbux-float-store .float-label {
	display: block;
	font-size: 0.7rem;
	color: var(--sbux-mint);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.sbux-float-store strong {
	font-size: 0.86rem;
	color: #FFFFFF;
}

.sbux-float-bag-btn {
	background: var(--sbux-green);
	color: #FFFFFF;
	border: none;
	border-radius: 14px;
	padding: 10px 18px;
	font-family: var(--konos-font);
	font-size: 0.86rem;
	font-weight: 800;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	box-shadow: 0 6px 16px rgba(0, 112, 74, 0.35);
}

.bag-total {
	background: rgba(0, 0, 0, 0.22);
	padding: 3px 9px;
	border-radius: 99px;
}

.brew-bottom-tabbar {
	display: flex;
	align-items: center;
	justify-content: space-around;
	background: #FFFFFF;
	border: 1px solid var(--sbux-border);
	border-radius: 20px;
	padding: 8px 10px;
	box-shadow: var(--sbux-shadow-md);
}

@media (max-width: 1040px) {
	.brew-bottom-tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		border-radius: 20px 20px 0 0;
		z-index: 940;
		padding: 8px 6px 12px;
	}
}

.brew-tab-item {
	background: none;
	border: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 6px 12px;
	border-radius: 12px;
	font-family: var(--konos-font);
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--sbux-muted);
	cursor: pointer;
	transition: all 0.15s ease;
}

.brew-tab-item .tab-ico {
	font-size: 1.1rem;
}

.brew-tab-item.active {
	color: var(--sbux-green);
	background: var(--sbux-mint-soft);
	font-weight: 800;
}

/* ==========================================================================
   COMMON BUTTONS, FORMS, MODALS & LOCK SCREEN
   ========================================================================== */
.amdkonos-btn {
	font-family: var(--konos-font);
	font-size: 0.86rem;
	font-weight: 800;
	padding: 10px 18px;
	border-radius: 999px;
	border: 1px solid transparent;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: all 0.18s ease;
}

.amdkonos-btn-primary {
	background: var(--sbux-green);
	color: #FFFFFF;
}

.amdkonos-btn-primary:hover {
	background: var(--sbux-green-hover);
}

.amdkonos-btn-outline {
	background: #FFFFFF;
	color: var(--sbux-house);
	border-color: var(--sbux-border);
}

.amdkonos-btn-outline:hover {
	border-color: var(--sbux-green);
	color: var(--sbux-green);
}

.amdkonos-btn-danger {
	background: #FEE2E2;
	color: #B91C1C;
}

.amdkonos-btn-clip {
	background: #FF5A1F;
	color: #FFFFFF;
}

.amdkonos-btn-sm {
	padding: 6px 12px;
	font-size: 0.76rem;
}

.amdkonos-btn-lg {
	padding: 13px 22px;
	font-size: 0.94rem;
}

.amdkonos-btn-block {
	width: 100%;
}

.amdkonos-field {
	margin-bottom: 12px;
}

.amdkonos-field label {
	display: block;
	font-size: 0.78rem;
	font-weight: 800;
	color: var(--sbux-house);
	margin-bottom: 5px;
}

.amdkonos-field input,
.amdkonos-field select,
.amdkonos-field textarea,
.amdkonos-inline-input {
	width: 100%;
	padding: 10px 13px;
	border-radius: 12px;
	border: 1px solid var(--sbux-border);
	background: var(--sbux-cream);
	color: var(--sbux-ink);
	font-family: var(--konos-font);
	font-size: 0.88rem;
}

.amdkonos-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.amdkonos-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

@media (max-width: 640px) {
	.amdkonos-grid-2,
	.amdkonos-grid-3 {
		grid-template-columns: 1fr;
	}
}

/* Lock Screen */
.amdkonos-lock-screen {
	padding: 20px 0;
}

.amdkonos-lock-card {
	background: #FFFFFF;
	border-radius: 26px;
	padding: 32px;
	border: 2px solid var(--sbux-gold);
	box-shadow: var(--sbux-shadow-lg);
	text-align: center;
	max-width: 640px;
	margin: 0 auto;
}

.amdkonos-lock-icon {
	font-size: 2.8rem;
	margin-bottom: 8px;
}

.amdkonos-pin-row {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin: 10px 0;
}

.amdkonos-pin-row input {
	max-width: 180px;
	text-align: center;
	font-family: var(--konos-mono);
	font-size: 1.3rem;
	font-weight: 800;
	letter-spacing: 0.2em;
}

.amdkonos-lock-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 18px;
}

/* Modals */
.amdkonos-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(18, 36, 31, 0.62);
	backdrop-filter: blur(6px);
	z-index: 1200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
}

.amdkonos-modal-card {
	background: #FFFFFF;
	color: var(--sbux-ink);
	border-radius: 24px;
	width: 100%;
	max-width: 520px;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: var(--sbux-shadow-lg);
	border: 1px solid var(--sbux-border);
}

.amdkonos-modal-lg {
	max-width: 640px;
}

.amdkonos-modal-header {
	padding: 18px 22px;
	border-bottom: 1px solid var(--sbux-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.amdkonos-modal-header h3 {
	margin: 0;
	font-family: var(--konos-font-display);
	font-size: 1.15rem;
	color: var(--sbux-house);
}

.amdkonos-modal-close {
	background: var(--sbux-cream);
	border: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	font-size: 1.2rem;
	cursor: pointer;
}

.amdkonos-modal-body {
	padding: 20px 22px;
}

.amdkonos-auth-tabs {
	display: flex;
	gap: 6px;
	margin-bottom: 14px;
}

.amdkonos-auth-tab {
	flex: 1;
	padding: 8px;
	border-radius: 99px;
	border: 1px solid var(--sbux-border);
	background: var(--sbux-cream);
	font-weight: 700;
	font-size: 0.78rem;
	cursor: pointer;
}

.amdkonos-auth-tab.active {
	background: var(--sbux-green);
	color: #FFFFFF;
	border-color: var(--sbux-green);
}

.amdkonos-demo-roles-grid {
	display: grid;
	gap: 8px;
}

.amdkonos-demo-role-btn {
	background: var(--sbux-cream);
	border: 1px solid var(--sbux-border);
	border-radius: 14px;
	padding: 10px 14px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	font-family: var(--konos-font);
}

.amdkonos-demo-role-btn:hover {
	border-color: var(--sbux-green);
	background: var(--sbux-mint-soft);
}

/* Cart & Bill Summary */
.amdkonos-cart-item-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid var(--sbux-border);
	gap: 10px;
}

.amdkonos-cart-summary,
.amdkonos-bill-totals {
	background: var(--sbux-cream);
	border-radius: 16px;
	padding: 14px 16px;
	margin-top: 14px;
}

.summary-row,
.bill-row {
	display: flex;
	justify-content: space-between;
	padding: 4px 0;
	font-size: 0.9rem;
}

.bill-total-final {
	border-top: 1px solid var(--sbux-border);
	margin-top: 6px;
	padding-top: 8px;
	font-size: 1.1rem;
	color: var(--sbux-green);
}

.amdkonos-tip-pills {
	display: flex;
	gap: 8px;
	margin-top: 8px;
	flex-wrap: wrap;
}

.tip-pill {
	flex: 1;
	padding: 8px 12px;
	border-radius: 99px;
	border: 1px solid var(--sbux-border);
	background: var(--sbux-cream);
	font-weight: 800;
	cursor: pointer;
}

.tip-pill.active {
	background: var(--sbux-green);
	color: #FFFFFF;
	border-color: var(--sbux-green);
}

.amdkonos-bill-pay-buttons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 16px;
}

.amdkonos-reserva-item-card,
.amdkonos-waiter-card {
	background: var(--sbux-cream);
	border-radius: 16px;
	padding: 14px;
	border: 1px solid var(--sbux-border);
	margin-bottom: 10px;
}

.res-card-top {
	display: flex;
	justify-content: space-between;
	margin-bottom: 6px;
}

.res-status-pill {
	background: var(--sbux-mint);
	color: var(--sbux-house);
	padding: 2px 9px;
	border-radius: 99px;
	font-size: 0.72rem;
	font-weight: 800;
}

/* ==========================================================================
   OMNIFLASH 4S SPLASH OVERLAY
   ========================================================================== */
.amdkonos-splash-overlay {
	position: fixed;
	inset: 0;
	background: radial-gradient(circle at center, #1E3932 0%, #091411 100%);
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	text-align: center;
	padding: 24px;
}

.sbux-splash-emblem {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: var(--sbux-green);
	border: 3px solid var(--sbux-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.4rem;
	color: #FFFFFF;
	margin: 0 auto 16px;
	box-shadow: 0 0 40px rgba(0, 112, 74, 0.6);
}

.sbux-splash-kicker {
	color: var(--sbux-gold);
	font-size: 0.78rem;
	font-weight: 900;
	letter-spacing: 0.2em;
	margin: 0 0 6px;
}

.amdkonos-splash-title {
	font-family: var(--konos-font-display);
	font-size: 2rem;
	margin: 0 0 8px;
}

.amdkonos-splash-progress {
	width: 240px;
	height: 6px;
	background: rgba(255, 255, 255, 0.16);
	border-radius: 99px;
	margin: 18px auto;
	overflow: hidden;
}

.amdkonos-splash-bar {
	height: 100%;
	background: var(--sbux-gold);
	animation: sbuxSplashBar 3.8s linear forwards;
}

@keyframes sbuxSplashBar {
	from { width: 0%; }
	to { width: 100%; }
}

.amdkonos-splash-skip {
	background: rgba(255, 255, 255, 0.14);
	color: #FFFFFF;
	border: 1px solid rgba(255, 255, 255, 0.3);
	padding: 9px 20px;
	border-radius: 99px;
	font-weight: 700;
	cursor: pointer;
}

/* ==========================================================================
   GERENTE & TOP ADMIN DASHBOARDS (Starbucks Reserve Theme)
   ========================================================================== */
.amdkonos-dash-header {
	max-width: 1320px;
	margin: 24px auto 18px;
	padding: 24px 28px;
	background: linear-gradient(125deg, var(--sbux-house) 0%, #10231E 100%);
	color: #FFFFFF;
	border-radius: 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.amdkonos-badge-role {
	display: inline-block;
	color: var(--sbux-gold);
	font-size: 0.72rem;
	font-weight: 900;
	letter-spacing: 0.14em;
	margin-bottom: 6px;
}

.amdkonos-dash-header h1 {
	margin: 0 0 6px;
	font-family: var(--konos-font-display);
	font-size: 1.65rem;
}

.amdkonos-dash-header p {
	margin: 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.88rem;
}

.amdkonos-kpi-grid,
.amdkonos-dash-tabs,
.amdkonos-dash-pane,
.amdkonos-admin-grid {
	max-width: 1320px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

.amdkonos-kpi-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
	margin-bottom: 22px;
}

.amdkonos-kpi-card {
	background: #FFFFFF;
	border-radius: 20px;
	padding: 20px;
	border: 1px solid var(--sbux-border);
	box-shadow: var(--sbux-shadow-sm);
}

.amdkonos-kpi-card span {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--sbux-muted);
}

.amdkonos-kpi-card strong {
	display: block;
	font-family: var(--konos-font-display);
	font-size: 1.8rem;
	font-weight: 900;
	color: var(--sbux-house);
	margin: 6px 0 4px;
}

.amdkonos-dash-tabs {
	display: flex;
	gap: 10px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}

.dash-tab {
	background: #FFFFFF;
	color: var(--sbux-house);
	border: 1px solid var(--sbux-border);
	padding: 10px 20px;
	border-radius: 999px;
	font-family: var(--konos-font);
	font-weight: 800;
	cursor: pointer;
}

.dash-tab.active {
	background: var(--sbux-green);
	color: #FFFFFF;
	border-color: var(--sbux-green);
}

.amdkonos-table-card,
.amdkonos-admin-card {
	background: #FFFFFF;
	border-radius: 22px;
	padding: 22px;
	border: 1px solid var(--sbux-border);
	box-shadow: var(--sbux-shadow-sm);
	overflow-x: auto;
}

.amdkonos-table {
	width: 100%;
	border-collapse: collapse;
}

.amdkonos-table th,
.amdkonos-table td {
	padding: 12px;
	text-align: left;
	border-bottom: 1px solid var(--sbux-border);
	font-size: 0.86rem;
}

.amdkonos-table th {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--sbux-muted);
}

.amdkonos-mesas-live-grid,
.amdkonos-admin-qr-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
}

.amdkonos-mesa-live-card,
.amdkonos-qr-card {
	background: #FFFFFF;
	border-radius: 20px;
	padding: 18px;
	border: 1px solid var(--sbux-border);
	box-shadow: var(--sbux-shadow-sm);
}

.amdkonos-admin-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
}

@media (max-width: 980px) {
	.amdkonos-admin-grid {
		grid-template-columns: 1fr;
	}
}

.amdkonos-add-mesa-bar,
.amdkonos-copy-row {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.amdkonos-add-mesa-bar input {
	flex: 1;
	min-width: 140px;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid var(--sbux-border);
}

/* ==========================================================================
   KDS COCINA DARK MODE (/kds-cocina/)
   ========================================================================== */
.amdkonos-theme-kds {
	background: #090D16;
	color: #F8FAFC;
	min-height: 100vh;
}

.amdkonos-kds-header {
	padding: 16px 24px;
	background: #111827;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.amdkonos-kds-title-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.kds-station-info {
	display: flex;
	align-items: center;
	gap: 12px;
}

.kds-pulse-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #10B981;
	box-shadow: 0 0 12px #10B981;
}

.kds-station-info h1 {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 900;
	color: #F8FAFC;
}

.kds-clock {
	font-family: var(--konos-mono);
	background: #1E293B;
	color: #34D399;
	padding: 4px 10px;
	border-radius: 8px;
	font-size: 0.9rem;
}

.kds-nav-tabs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.kds-tab-btn,
.kds-audio-btn {
	background: #1E293B;
	color: #E2E8F0;
	border: 1px solid rgba(255, 255, 255, 0.1);
	padding: 9px 15px;
	border-radius: 12px;
	font-weight: 800;
	cursor: pointer;
}

.kds-tab-btn.active {
	background: #00704A;
	color: #FFFFFF;
	border-color: #34D399;
}

.amdkonos-kds-pane {
	padding: 20px 24px;
}

.kds-legend-row {
	display: flex;
	gap: 12px;
	margin-bottom: 16px;
	flex-wrap: wrap;
	font-size: 0.8rem;
}

.amdkonos-kds-comandas-grid,
.amdkonos-kds-stock-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
	gap: 16px;
}

.kds-comanda-card,
.kds-stock-card {
	background: #111827;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 18px;
	padding: 16px;
	color: #F8FAFC;
}

.amdkonos-kds-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

/* Toasts */
.amdkonos-toast-container {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 3000;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.amdkonos-toast {
	background: var(--sbux-house);
	color: #FFFFFF;
	padding: 12px 18px;
	border-radius: 14px;
	font-size: 0.86rem;
	font-weight: 700;
	box-shadow: var(--sbux-shadow-lg);
	border-left: 4px solid var(--sbux-gold);
}