/* ═══════════════════════════════════════════════════════════════
   ✦ Hanae.Art — Kawaii-Minimal Commission Website ✦
   Designed with love, soft pastels & sparkles ♡
   ═══════════════════════════════════════════════════════════════ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Sarabun:wght@300;400;500;600;700&display=swap');

/* --- CSS Variables (Color Palette) --- */
:root {
    --pink-light: #fce4ec;
    --pink-medium: #f8bbd0;
    --pink-accent: #f48fb1;
    --pink-deep: #ec407a;
    --lavender: #e8d5f5;
    --lavender-deep: #ce93d8;
    --mint: #e0f2f1;
    --mint-deep: #80cbc4;
    --cream: #fff8e7;
    --white: #ffffff;
    --bg-primary: #fef8fa;
    --bg-secondary: #fff5f8;
    --text-primary: #1a1a1a;
    --handcrafted-outline: #9c7b8e;
    --text-secondary: #333333;
    --text-light: #555555;
    --shadow-pink: rgba(244, 143, 177, 0.15);
    --shadow-lavender: rgba(206, 147, 216, 0.12);
    --radius-sm: 14px;
    --radius-md: 20px;
    --radius-lg: 28px;
    --radius-xl: 36px;
    --transition-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --font-heading: 'Quicksand', sans-serif;
    --font-body: 'Sarabun', sans-serif;
}

/* --- Reset & Global --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.7;
    padding-bottom: 30px;
    overflow-x: hidden;
    overflow-y: scroll; /* Forces scrollbar to prevent layout shifts between pages */
    min-height: 100vh;
    position: relative;
}

/* Subtle background noise/grain texture */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(ellipse at 20% 50%, rgba(232, 213, 245, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(252, 228, 236, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(224, 242, 241, 0.3) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* --- Cute Scrollbar --- */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--pink-light);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--pink-medium), var(--lavender));
    border-radius: 20px;
    border: 2px solid var(--pink-light);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--pink-accent), var(--lavender-deep));
}

/* --- Page Entrance Animation --- */
@keyframes fadeUpIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes gentleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes sparkle {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(3deg); }
    75% { transform: rotate(-3deg); }
}

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

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(244, 143, 177, 0.2); }
    50% { box-shadow: 0 0 40px rgba(244, 143, 177, 0.4); }
}

@keyframes typewriter-cursor {
    0%, 100% { border-color: var(--pink-accent); }
    50% { border-color: transparent; }
}

@keyframes floatParticle1 {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    10% { opacity: 0.7; }
    90% { opacity: 0.7; }
    100% { transform: translate(100px, -300px) rotate(360deg); opacity: 0; }
}

@keyframes floatParticle2 {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    10% { opacity: 0.5; }
    90% { opacity: 0.5; }
    100% { transform: translate(-80px, -350px) rotate(-360deg); opacity: 0; }
}

@keyframes floatParticle3 {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    10% { opacity: 0.6; }
    90% { opacity: 0.6; }
    100% { transform: translate(60px, -280px) rotate(180deg); opacity: 0; }
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text-primary);
    letter-spacing: 0.3px;
}

h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: max-content;
    margin: 10px auto 35px;
    padding: 12px 36px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: var(--radius-xl);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    box-shadow: 
        0 8px 24px rgba(244, 143, 177, 0.12),
        0 2px 6px rgba(206, 147, 216, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    position: relative;
    animation: fadeUpIn 0.8s var(--transition-smooth) both;
    transition: all 0.4s var(--transition-bounce);
}

h2:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 
        0 14px 35px rgba(244, 143, 177, 0.22),
        0 4px 12px rgba(206, 147, 216, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    border-color: var(--pink-medium);
}

h2::before {
    content: '✦';
    font-size: 1.25rem;
    color: var(--pink-accent);
    animation: sparkle 2.5s ease-in-out infinite;
    display: inline-block;
}

h2::after {
    content: '✦' !important;
    font-size: 1.25rem;
    color: var(--pink-accent);
    animation: sparkle 2.5s ease-in-out infinite;
    animation-delay: 1.25s;
    display: inline-block !important;
    margin-top: 0 !important;
    letter-spacing: normal !important;
}

h2 i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--pink-light), rgba(255, 255, 255, 0.9));
    border-radius: 50%;
    color: var(--pink-deep) !important;
    font-size: 1.3rem !important;
    margin-right: 0 !important;
    border: 1px solid rgba(244, 143, 177, 0.25);
    box-shadow: 0 4px 10px rgba(244, 143, 177, 0.15);
    transition: all 0.4s var(--transition-bounce);
    vertical-align: middle;
    line-height: 1 !important;
}

h2 i::before {
    display: block !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

h2:hover i {
    transform: scale(1.15) rotate(15deg);
    background: linear-gradient(135deg, var(--pink-medium), var(--pink-light));
    color: var(--white) !important;
    box-shadow: 0 6px 15px rgba(244, 143, 177, 0.3);
}

h2 .section-icon {
    display: inline-block;
    margin-right: 0;
    font-size: 1.8rem;
    animation: wiggle 3s ease-in-out infinite;
}

/* --- Container --- */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0 10px;
    min-height: auto;
    position: relative;
    z-index: 1;
    animation: fadeUpIn 0.8s var(--transition-smooth) both;
}

/* ═══════════════════════════════════════════════════
   ✦ Navigation — Kawaii macOS Dock
   ═══════════════════════════════════════════════════ */
header {
    position: fixed;
    bottom: 25px;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    padding: 10px 14px;
    border-radius: var(--radius-xl);
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    box-shadow: 
        0 10px 40px var(--shadow-pink),
        0 4px 15px var(--shadow-lavender),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    /* no entrance animation — stays visible during page transitions */
}

@keyframes dockAppear {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(60px) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

.nav-container {
    display: flex;
    align-items: center;
    gap: 6px;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 4px;
    align-items: center;
}

nav a {
    text-decoration: none;
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 8px 16px 12px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: var(--radius-md);
    transition: all 0.4s var(--transition-bounce);
    position: relative;
    background: rgba(255, 255, 255, 0.3);
    white-space: nowrap;
}

nav a i {
    font-size: 1.25rem;
    color: var(--pink-accent);
    transition: all 0.3s ease;
}

nav a:hover i {
    transform: scale(1.15) rotate(-5deg);
    color: var(--pink-deep);
}

/* Dock Hover — static, no lift */
nav a:hover {
    background: linear-gradient(135deg, rgba(252, 228, 236, 0.8), rgba(232, 213, 245, 0.6));
    color: var(--pink-deep);
    box-shadow: 0 10px 25px var(--shadow-pink);
}

/* Active page */
nav a.active {
    color: var(--pink-deep);
    background: linear-gradient(135deg, rgba(252, 228, 236, 0.9), rgba(255, 255, 255, 0.9));
    box-shadow: 0 6px 20px var(--shadow-pink);
}

/* Active indicator dot */
nav a.active::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: linear-gradient(135deg, var(--pink-accent), var(--lavender-deep));
    border-radius: 50%;
    animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
    50% { transform: translateX(-50%) scale(1.5); opacity: 0.7; }
}

/* Divider between nav and admin */
.nav-container::after {
    content: '';
    display: block;
    width: 1.5px;
    height: 24px;
    background: linear-gradient(180deg, transparent, var(--pink-medium), transparent);
    order: 1;
    margin: 0 6px;
    opacity: 0.5;
}

/* Admin button */
.admin-btn {
    order: 2;
    background: var(--text-primary);
    color: var(--white);
    border: none;
    padding: 8px 16px 12px;
    border-radius: var(--radius-md);
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.4s var(--transition-bounce);
    box-shadow: 0 4px 12px rgba(74, 51, 71, 0.15);
    white-space: nowrap;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.admin-btn i {
    font-size: 1.25rem;
    margin: 0;
}

.admin-btn:hover {
    background: var(--text-secondary);
    box-shadow: 0 10px 25px rgba(74, 51, 71, 0.25);
}

.admin-btn.logged-in {
    background: linear-gradient(135deg, #81c784, #66bb6a);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 187, 106, 0.35);
}

.admin-btn.logged-in:hover {
    box-shadow: 0 10px 25px rgba(102, 187, 106, 0.4);
}

/* ═══════════════════════════════════════════════════
   ✦ Admin Mode — Add / Delete Buttons
   ═══════════════════════════════════════════════════ */

/* ปุ่มเพิ่มรายการ (แสดงเฉพาะ admin mode) */
.admin-add-btn {
    display: none;
    margin: 25px auto;
    padding: 14px 30px;
    background: linear-gradient(135deg, var(--pink-accent), var(--lavender-deep));
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s var(--transition-bounce);
    box-shadow: 0 6px 20px var(--shadow-pink);
    align-items: center;
    gap: 10px;
    letter-spacing: 0.3px;
}

body.admin-mode .admin-add-btn {
    display: inline-flex;
}

.admin-add-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 30px rgba(244, 143, 177, 0.4);
}

.admin-add-btn i {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.admin-add-btn:hover i {
    transform: rotate(90deg) scale(1.1);
}

/* ปุ่มลบรายการ (แสดงเฉพาะ admin mode) */
.admin-delete-btn {
    display: none;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(239, 83, 80, 0.9);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.5);
    cursor: pointer;
    z-index: 10;
    font-size: 0.8rem;
    transition: all 0.3s var(--transition-bounce);
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
}

body.admin-mode .admin-delete-btn {
    display: inline-flex;
}

.admin-delete-btn:hover {
    background: rgba(239, 83, 80, 1);
    transform: scale(1.15) rotate(8deg);
    box-shadow: 0 4px 15px rgba(239, 83, 80, 0.4);
}

/* ปุ่มแก้ไขรายการ (แสดงเฉพาะ admin mode) */
.admin-edit-btn {
    display: none;
    position: absolute;
    top: 12px;
    right: 55px; /* Offset from delete button */
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 167, 38, 0.9); /* Orange color */
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.5);
    cursor: pointer;
    z-index: 10;
    font-size: 0.8rem;
    transition: all 0.3s var(--transition-bounce);
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
}

body.admin-mode .admin-edit-btn {
    display: inline-flex;
}

.admin-edit-btn:hover {
    background: rgba(255, 167, 38, 1);
    transform: scale(1.15) rotate(-8deg);
    box-shadow: 0 4px 15px rgba(255, 167, 38, 0.4);
}



/* ═══════════════════════════════════════════════════
   ✦ Page 1: Home — Hero Section
   ═══════════════════════════════════════════════════ */
#home {
    text-align: center;
    padding: 100px 20px 80px;
    min-height: 85vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* Floating decorative particles on home */
#home::before {
    content: '✦';
    position: absolute;
    top: 15%;
    left: 10%;
    font-size: 1.4rem;
    color: var(--pink-medium);
    animation: floatParticle1 8s ease-in-out infinite;
    pointer-events: none;
}

#home::after {
    content: '♡';
    position: absolute;
    top: 20%;
    right: 12%;
    font-size: 1.6rem;
    color: var(--lavender);
    animation: floatParticle2 10s ease-in-out infinite 1s;
    pointer-events: none;
}

/* Avatar / Mascot area - Polaroid Art Frame Redesign */
.mascot-area {
    margin: 0 auto 35px;
    position: relative;
    width: 380px;  /* Much bigger: 380px wide */
    height: 420px; /* Taller: 420px high */
    background: var(--white);
    padding: 16px;
    border-radius: 36px; /* Elegant ultra rounded squircle shape */
    box-shadow: 
        0 25px 65px rgba(244, 143, 177, 0.22),
        0 10px 25px rgba(206, 147, 216, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    border: 3.5px solid rgba(255, 255, 255, 0.85); /* Gallery frame border */
    transform: rotate(-1.5deg);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    overflow: visible;
}

/* Cozy inner canvas backdrop */
.mascot-area::before {
    content: '';
    position: absolute;
    inset: 12px;
    border-radius: 26px;
    background: linear-gradient(135deg, #fff5f8, #fce4ec, #e8d5f5);
    z-index: 0;
    opacity: 0.85;
    transition: opacity 0.5s ease;
}

/* Subtle gold/pink inner bezel */
.mascot-area::after {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 30px;
    border: 2px solid rgba(244, 143, 177, 0.25);
    pointer-events: none;
    z-index: 2;
    transition: all 0.5s ease;
}

.mascot-area:hover {
    transform: scale(1.05) rotate(1deg) translateY(-10px);
    box-shadow: 
        0 40px 85px rgba(244, 143, 177, 0.35),
        0 15px 35px rgba(206, 147, 216, 0.2),
        0 0 0 6px rgba(248, 187, 208, 0.4);
    border-color: rgba(255, 255, 255, 0.95);
}

.mascot-area:hover::after {
    border-color: var(--pink-accent);
    transform: scale(1.02);
}

/* Lace-trimmed Glitter Washi Tape */
.washi-tape {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%) rotate(-3deg);
    width: 140px;
    height: 32px;
    background: linear-gradient(90deg, rgba(248, 187, 208, 0.45), rgba(232, 213, 245, 0.55), rgba(248, 187, 208, 0.45));
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(244, 143, 177, 0.15);
    border: 1px dashed rgba(255, 255, 255, 0.8);
    z-index: 10;
    pointer-events: none;
    transition: all 0.5s var(--transition-bounce);
}

.washi-tape::before {
    content: '✦  🌸  ✦';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 0.78rem;
    text-shadow: 0 1px 3px rgba(74, 51, 71, 0.15);
    letter-spacing: 4px;
    font-family: var(--font-heading);
}

.mascot-area:hover .washi-tape {
    transform: translateX(-50%) rotate(-1deg) scale(1.08);
    background: linear-gradient(90deg, rgba(248, 187, 208, 0.65), rgba(232, 213, 245, 0.75), rgba(248, 187, 208, 0.65));
}

/* Mascot Image Fit */
.mascot-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
    background-color: var(--white);
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 25px rgba(74, 51, 71, 0.08);
    z-index: 1;
    position: relative;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mascot-area:hover .mascot-avatar {
    transform: scale(1.02);
}

/* Mascot floating sparkles/decorations orbiting the Polaroid */
.mascot-decorations {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 3;
}

.mascot-deco-item {
    position: absolute;
    animation: gentleFloat 3.5s ease-in-out infinite;
    opacity: 0.6;
    transition: all 0.4s var(--transition-bounce);
    text-shadow: 0 2px 10px rgba(244, 143, 177, 0.25);
}

.mascot-area:hover .mascot-deco-item {
    opacity: 1;
    transform: scale(1.3);
}

.mascot-deco-item.star-1 {
    top: -25px;
    left: -25px;
    color: var(--pink-accent);
    font-size: 1.8rem;
    animation-delay: 0s;
}

.mascot-deco-item.heart-1 {
    bottom: -20px;
    right: -25px;
    color: var(--lavender-deep);
    font-size: 1.8rem;
    animation-delay: 0.7s;
}

.mascot-deco-item.star-2 {
    top: 60px;
    right: -30px;
    color: var(--mint-deep);
    font-size: 1.6rem;
    animation-delay: 1.4s;
}

.mascot-emoji {
    font-size: 5rem;
    display: block;
    animation: gentleFloat 4s ease-in-out infinite;
    filter: drop-shadow(0 8px 20px var(--shadow-pink));
}

/* Status badge */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--mint), var(--mint-deep));
    color: white;
    padding: 10px 24px;
    border-radius: var(--radius-lg);
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 600;
    margin-bottom: 28px;
    box-shadow: 0 6px 20px rgba(128, 203, 196, 0.3);
    animation: fadeUpIn 0.8s var(--transition-smooth) both 0.4s;
    position: relative;
}

.status-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    animation: dotGlow 1.8s ease-in-out infinite;
}

@keyframes dotGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 12px 3px rgba(255, 255, 255, 0.4);
        transform: scale(1.15);
    }
}

/* Home title */
#home h1, .hero-title {
    font-family: var(--font-heading);
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--text-dark) !important;
    margin-bottom: 18px;
    line-height: 1.3;
    animation: fadeUpIn 0.8s var(--transition-smooth) both 0.6s;
    text-shadow: 0 0 15px rgba(255, 255, 255, 1), 0 0 25px rgba(255, 255, 255, 0.8), 2px 2px 4px rgba(255, 255, 255, 0.9) !important;
}

/* Typewriter cursor effect on greeting */
.greeting-text {
    display: inline-block;
    border-right: 3px solid var(--pink-accent);
    padding-right: 8px;
    animation: typewriter-cursor 1s step-end infinite;
    transition: all 0.3s ease;
}

.greeting-text:hover {
    color: var(--pink-deep);
    text-shadow: 0 0 12px rgba(236, 64, 122, 0.2);
    transform: scale(1.03) rotate(0.5deg);
}

#home p, .hero-desc {
    font-size: 1.15rem;
    color: var(--text-dark) !important;
    max-width: 550px;
    margin: 0 auto 30px;
    line-height: 1.8;
    font-weight: 600;
    animation: fadeUpIn 0.8s var(--transition-smooth) both 0.8s;
    text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 15px rgba(255, 255, 255, 0.9), 1px 1px 2px rgba(255, 255, 255, 1) !important;
}

/* Floating decorations container */
.floating-deco {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.floating-deco span {
    position: absolute;
    font-size: 1.2rem;
    opacity: 0.4;
    animation: gentleFloat 5s ease-in-out infinite;
}

.floating-deco span:nth-child(1) { top: 10%; left: 5%; animation-delay: 0s; color: var(--pink-medium); }
.floating-deco span:nth-child(2) { top: 30%; right: 8%; animation-delay: 1s; color: var(--lavender); }
.floating-deco span:nth-child(3) { bottom: 20%; left: 15%; animation-delay: 2s; color: var(--mint-deep); }
.floating-deco span:nth-child(4) { top: 50%; right: 15%; animation-delay: 0.5s; color: var(--pink-accent); }
.floating-deco span:nth-child(5) { bottom: 35%; right: 5%; animation-delay: 1.5s; color: var(--lavender-deep); }
.floating-deco span:nth-child(6) { top: 60%; left: 8%; animation-delay: 2.5s; color: var(--pink-medium); }

/* Cute divider */
.cute-divider {
    text-align: center;
    margin: 40px 0;
    font-size: 1rem;
    color: var(--pink-medium);
    letter-spacing: 12px;
    opacity: 0.6;
}

/* ═══════════════════════════════════════════════════
   ✦ Page 2: Gallery
   ═══════════════════════════════════════════════════ */

/* Category filter pills */
.filter-pills {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 35px;
    flex-wrap: wrap;
    animation: fadeUpIn 0.6s var(--transition-smooth) both 0.2s;
}

.filter-pill {
    padding: 10px 24px;
    border-radius: var(--radius-lg);
    border: 2px solid var(--pink-light);
    background: var(--white);
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.3s var(--transition-bounce);
    box-shadow: 0 2px 10px rgba(244, 143, 177, 0.08);
}

.filter-pill:hover,
.filter-pill.active {
    background: linear-gradient(135deg, var(--pink-light), var(--lavender));
    border-color: var(--pink-medium);
    color: var(--text-primary);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px var(--shadow-pink);
}

/* Gallery grid — masonry-like (Pinterest Style) */
.gallery-grid {
    column-count: 3;
    column-gap: 22px;
    padding: 10px 0;
}

@media (max-width: 900px) {
    .gallery-grid {
        column-count: 2;
    }
}

@media (max-width: 600px) {
    .gallery-grid {
        column-count: 1;
    }
}

.gallery-item {
    break-inside: avoid;
    margin-bottom: 22px;
    display: block;
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 8px 28px var(--shadow-pink);
    transition: all 0.5s var(--transition-bounce);
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.9);
    position: relative;
    animation: fadeUpIn 0.6s var(--transition-smooth) both;
}

.gallery-item:nth-child(3n+1) { animation-delay: 0.1s; }
.gallery-item:nth-child(3n+2) { animation-delay: 0.2s; }
.gallery-item:nth-child(3n) { animation-delay: 0.3s; }

.gallery-item:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 50px rgba(244, 143, 177, 0.25);
}

.gallery-item img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    transition: transform 0.6s var(--transition-smooth);
    display: block;
}

.gallery-item:hover img {
    transform: scale(1.08);
}

/* Title overlay on hover */
.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(transparent, rgba(74, 51, 71, 0.7));
    color: white;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    transform: translateY(100%);
    transition: transform 0.4s var(--transition-smooth);
}

.gallery-item:hover .gallery-overlay {
    transform: translateY(0);
}

.gallery-overlay span {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Lightbox modal */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(74, 51, 71, 0.85);
    backdrop-filter: blur(15px);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    animation: fadeIn 0.3s ease;
}

.lightbox-overlay.active {
    display: flex;
}

.lightbox-overlay img {
    max-width: 90%;
    max-height: 85vh;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    animation: fadeUpIn 0.4s var(--transition-bounce);
}

.lightbox-close {
    position: absolute;
    top: 30px;
    right: 35px;
    font-size: 2rem;
    color: white;
    cursor: pointer;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
    border: none;
    font-family: var(--font-heading);
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

/* ═══════════════════════════════════════════════════
   ✦ Page 3: Prices — Glassmorphism Cards
   ═══════════════════════════════════════════════════ */
.price-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 28px;
    padding: 20px 0;
}

.price-card {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 40px 30px 35px;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 35px var(--shadow-pink);
    text-align: center;
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    transition: all 0.5s var(--transition-bounce);
    position: relative;
    overflow: hidden;
    animation: fadeUpIn 0.6s var(--transition-smooth) both;
}

.price-card:nth-child(1) { animation-delay: 0.1s; }
.price-card:nth-child(2) { animation-delay: 0.25s; }
.price-card:nth-child(3) { animation-delay: 0.4s; }

/* Soft gradient overlay */
.price-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(232, 213, 245, 0.15), transparent 60%);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 0;
}

.price-card:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 20px 50px rgba(244, 143, 177, 0.2);
    border-color: var(--pink-light);
}

.price-card:hover::before {
    opacity: 1;
}

/* Popular / recommended ribbon */
.price-card.popular {
    border-color: var(--pink-medium);
    box-shadow: 0 10px 35px var(--shadow-pink), 0 0 0 3px var(--pink-light);
}

.popular-badge {
    position: absolute;
    top: 18px;
    right: -32px;
    background: linear-gradient(135deg, var(--pink-accent), var(--lavender-deep));
    color: white;
    padding: 6px 40px;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    transform: rotate(45deg);
    box-shadow: 0 4px 12px rgba(244, 143, 177, 0.3);
    z-index: 2;
    letter-spacing: 0.5px;
}

/* Card emoji icon */
.price-icon {
    font-size: 3rem;
    margin-bottom: 18px;
    display: block;
    position: relative;
    z-index: 1;
    animation: gentleFloat 3s ease-in-out infinite;
}

.price-card:nth-child(1) .price-icon { animation-delay: 0s; }
.price-card:nth-child(2) .price-icon { animation-delay: 0.5s; }
.price-card:nth-child(3) .price-icon { animation-delay: 1s; }

.price-card h3 {
    margin-bottom: 12px;
    color: var(--text-primary);
    font-size: 1.3rem;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.price-card p {
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.6;
    position: relative;
    z-index: 1;
    margin-bottom: 8px;
}

.price-card .price {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--pink-deep);
    margin: 18px 0;
    position: relative;
    z-index: 1;
    transition: transform 0.3s var(--transition-bounce);
}

.price-card:hover .price {
    transform: scale(1.08);
}

/* Feature list with cute checkmarks */
.feature-list {
    list-style: none;
    text-align: left;
    margin: 15px 0;
    position: relative;
    z-index: 1;
}

.feature-list li {
    padding: 6px 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.feature-list li::before {
    content: '✓';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, var(--mint), var(--mint-deep));
    color: white;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}

.commercial-note {
    font-size: 0.82rem;
    color: var(--text-light);
    position: relative;
    z-index: 1;
    font-style: italic;
}

/* Card inline showcase image */
.card-showcase {
    margin-top: 20px;
    position: relative;
    z-index: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 6px 20px var(--shadow-pink);
    border: 2px solid rgba(255, 255, 255, 0.8);
}

.card-showcase-img {
    width: 100%;
    display: block;
    transition: transform 0.5s var(--transition-smooth);
    border-radius: var(--radius-md);
}

.card-showcase-img:hover {
    transform: scale(1.05);
}

/* Decorative separator */
.section-deco {
    text-align: center;
    margin: 50px 0 30px;
    font-size: 1.1rem;
    color: var(--pink-medium);
    letter-spacing: 10px;
    opacity: 0.5;
}

/* ═══════════════════════════════════════════════════
   ✦ Showcase Section (Prices page)
   ═══════════════════════════════════════════════════ */
.showcase-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 25px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(15px);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 35px var(--shadow-pink);
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    margin: 30px 0;
    animation: fadeUpIn 0.6s var(--transition-smooth) both 0.5s;
}

.showcase-image {
    max-width: 100%;
    max-height: 500px;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 25px var(--shadow-pink);
    transition: all 0.5s var(--transition-bounce);
}

.showcase-image:hover {
    transform: scale(1.04) rotate(0.5deg);
    box-shadow: 0 15px 40px rgba(244, 143, 177, 0.25);
}

/* ═══════════════════════════════════════════════════
   ✦ Page 4: Queue — Dashboard Layout
   ═══════════════════════════════════════════════════ */

/* Queue Hero Banner */
/* Queue Hero Banner */
.queue-hero, .page-hero {
    background: url('bg-header.png') top center/cover no-repeat !important;
    border: none !important; /* Remove the dark ink border for a clean, premium borderless look */
    border-radius: 28px !important; /* Clean rounded edges */
    box-shadow: 0 10px 30px rgba(244, 143, 177, 0.12) !important; /* Soft, delicate warm shadow instead of solid 3D */
    padding: 40px 30px;
    text-align: center;
    margin: 35px auto 40px;
    max-width: 1000px;
    position: relative;
    overflow: visible !important; /* Allow washi tape to overflow outside the banner card */
    animation: fadeUpIn 0.6s var(--transition-smooth) both;
}

.queue-hero::before, .page-hero::before {
    display: none !important;
}

.queue-hero-icon, .page-hero-icon {
    display: none !important; /* Removed top tag icon for cleaner look */
}

.queue-hero-title, .page-hero-title {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 800;
    color: #111111 !important;
    margin-bottom: 10px;
    text-shadow: 0 0 15px rgba(255, 255, 255, 1), 0 0 25px rgba(255, 255, 255, 0.8), 2px 2px 4px rgba(255, 255, 255, 0.9) !important;
}

.queue-hero-desc, .page-hero-desc {
    color: #111111 !important;
    font-size: 1rem;
    margin-bottom: 30px;
    line-height: 1.6;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 15px rgba(255, 255, 255, 0.9), 1px 1px 2px rgba(255, 255, 255, 1) !important;
}

/* Stats Capsule */
.queue-stats {
    display: inline-flex;
    align-items: center;
    background: var(--white);
    padding: 12px 30px;
    border-radius: 50px;
    box-shadow: 0 8px 25px rgba(244, 143, 177, 0.15);
    border: 1px solid rgba(244, 143, 177, 0.2);
    gap: 25px;
}

.queue-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.queue-stat-item .stat-number {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.1;
}

.queue-stat-item.working .stat-number { color: #f39c12; }
.queue-stat-item.done .stat-number { color: #2ecc71; }

.queue-stat-item .stat-label {
    font-size: 0.75rem;
    color: var(--text-light);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.queue-stat-divider {
    width: 2px;
    height: 30px;
    background: rgba(244, 143, 177, 0.2);
}

/* Main Container width for Queue */
.queue-container {
    max-width: 1000px !important;
}
/* Queue Search */
.queue-search {
    position: relative;
    width: 100%;
    max-width: 400px;
}
.queue-search input {
    width: 100%;
    padding: 12px 20px 12px 45px;
    border-radius: 25px;
    border: 2px solid rgba(244, 143, 177, 0.3);
    background: rgba(255, 255, 255, 0.8);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-primary);
    outline: none;
    transition: all 0.3s ease;
}
.queue-search input:focus {
    border-color: var(--pink-medium);
    box-shadow: 0 5px 15px rgba(244, 143, 177, 0.2);
}
.queue-search i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pink-medium);
    font-size: 1.1rem;
}

/* Admin Only Visibility */
.admin-only {
    display: none !important;
}
body.admin-mode .admin-only {
    display: inline-block !important;
}

/* New Queue Grid */
.queue-grid-new {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 50px;
}

/* Elegant Queue Ticket */
.queue-ticket {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(15px);
    border-radius: var(--radius-lg);
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 10px 30px var(--shadow-pink);
    position: relative;
    overflow: hidden;
    transition: all 0.4s var(--transition-bounce);
    animation: fadeUpIn 0.5s var(--transition-smooth) both;
    display: flex;
    flex-direction: column;
}

.queue-ticket:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 45px rgba(244, 143, 177, 0.25);
}

/* Top Status Bar */
.ticket-status-bar {
    height: 6px;
    width: 100%;
}
.ticket-status-bar.working { background: linear-gradient(90deg, #f1c40f, #f39c12); }
.ticket-status-bar.done { background: linear-gradient(90deg, #2ecc71, #27ae60); }
.ticket-status-bar.pending { background: linear-gradient(90deg, var(--pink-accent), var(--lavender-deep)); }

.ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 15px 20px 5px;
}

.ticket-number {
    display: flex;
    flex-direction: column;
}

.ticket-number .lbl {
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--text-light);
    letter-spacing: 1px;
}

.ticket-number .num {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--pink-deep);
    line-height: 1;
}

.ticket-status {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ticket-status.working {
    background: #fff3cd;
    color: #856404;
}
.ticket-status.working i { animation: spin 2s linear infinite; }

.ticket-status.done {
    background: #d4edda;
    color: #155724;
}

.ticket-body {
    padding: 5px 20px 10px;
    flex-grow: 1;
}

.ticket-customer {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ticket-customer i {
    color: var(--pink-medium);
    font-size: 1.2rem;
}

.ticket-type {
    font-size: 0.8rem;
    color: var(--text-secondary);
    background: rgba(244, 143, 177, 0.1);
    padding: 4px 10px;
    border-radius: 12px;
    display: inline-block;
}

/* Enhanced Progress Bar */
.ticket-progress {
    padding: 10px 20px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px dashed rgba(244, 143, 177, 0.2);
}

.progress-bar-container {
    flex-grow: 1;
    height: 10px;
    background: rgba(244, 143, 177, 0.15);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.03);
}

.progress-bar {
    height: 100%;
    border-radius: 20px;
    transition: width 1s var(--transition-smooth);
    background: linear-gradient(90deg, var(--pink-accent), var(--lavender-deep));
}

.progress-bar.complete {
    background: linear-gradient(90deg, #2ecc71, #27ae60);
}

/* Shimmer Effect for Working status */
.working-shimmer {
    background: linear-gradient(90deg, #f1c40f 25%, #f39c12 50%, #f1c40f 75%);
    background-size: 200% 100%;
    animation: shimmer 2s infinite linear;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.progress-pct {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1rem;
    color: var(--pink-deep);
    min-width: 45px;
    text-align: right;
}

/* ═══════════════════════════════════════════════════
   ✦ Calendar Strip (7-Day View)
   ═══════════════════════════════════════════════════ */
.calendar-container {
    margin-bottom: 25px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(15px);
    border-radius: var(--radius-lg);
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    padding: 15px;
    box-shadow: 0 10px 30px var(--shadow-pink);
    overflow-x: auto; /* Horizontal scroll for mobile */
    -webkit-overflow-scrolling: touch;
    animation: fadeUpIn 0.6s var(--transition-smooth) both;
}

.calendar-container::-webkit-scrollbar {
    height: 6px;
}

.calendar-container::-webkit-scrollbar-thumb {
    background: var(--pink-medium);
    border-radius: 10px;
}

.calendar-strip {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    min-width: max-content; /* Ensure items don't squeeze too much on mobile */
}

.calendar-day {
    flex: 1;
    min-width: 85px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 12px 8px;
    border: 1.5px solid rgba(244, 143, 177, 0.15);
    box-shadow: 0 4px 15px rgba(244, 143, 177, 0.05);
    transition: all 0.3s var(--transition-bounce);
    cursor: default;
    user-select: none;
}

/* Admin can click */
.admin-mode .calendar-day {
    cursor: pointer;
}
.admin-mode .calendar-day:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(244, 143, 177, 0.15);
}

.calendar-day-name {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 700;
    margin-bottom: 2px;
}

.calendar-date {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 6px;
    line-height: 1;
}

.calendar-status {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
}

/* Status: Open (ว่าง) */
.calendar-day.status-open {
    border-color: rgba(102, 187, 106, 0.3);
}
.calendar-day.status-open .calendar-status {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    color: #2e7d32;
}

/* Status: Full (เต็ม) */
.calendar-day.status-full {
    border-color: rgba(239, 83, 80, 0.3);
}
.calendar-day.status-full .calendar-status {
    background: linear-gradient(135deg, #ffebee, #ffcdd2);
    color: #c62828;
}

/* Status: Off (พัก) */
.calendar-day.status-off {
    border-color: rgba(158, 158, 158, 0.3);
    opacity: 0.8;
}
.calendar-day.status-off .calendar-status {
    background: linear-gradient(135deg, #f5f5f5, #e0e0e0);
    color: #616161;
}

/* Today highlight */
.calendar-day.today {
    background: linear-gradient(135deg, var(--white), #fff0f5);
    border-color: var(--pink-accent);
    box-shadow: 0 4px 20px var(--shadow-pink);
    transform: scale(1.02);
}
.calendar-day.today::before {
    content: 'วันนี้';
    position: absolute;
    top: -10px;
    background: var(--pink-deep);
    color: white;
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 700;
}

/* Keep table styles as fallback */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fffdf8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M16 0v16H0V0h16zm-1 1H1v14h14V1z' fill='%23f5ede6' fill-opacity='0.55'/%3E%3C/svg%3E") !important;
    border: 2.5px solid var(--handcrafted-outline) !important;
    border-radius: 24px !important;
    overflow: hidden;
    box-shadow: 6px 6px 0px var(--handcrafted-outline) !important;
}

th, td {
    padding: 18px 20px;
    text-align: left;
    border-bottom: 2px solid var(--handcrafted-outline) !important;
    font-size: 0.92rem;
    color: #4a3347 !important;
}

th {
    background: #ffebee !important;
    color: #ec407a !important;
    font-family: var(--font-heading);
    font-weight: 800 !important;
    letter-spacing: 0.5px;
    font-size: 0.88rem;
}

tr:last-child td {
    border-bottom: none;
}

tr:hover {
    background-color: rgba(252, 228, 236, 0.15);
    transition: background-color 0.3s ease;
}

/* ═══════════════════════════════════════════════════
   ✦ Page 5: Contact — Social Cards
   ═══════════════════════════════════════════════════ */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    padding: 10px 0;
}

.contact-card {
    padding: 40px 30px;
    border-radius: var(--radius-lg);
    text-align: center;
    transition: all 0.5s var(--transition-bounce);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    display: block;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    animation: fadeUpIn 0.6s var(--transition-smooth) both;
}

.contact-card:nth-child(1) { animation-delay: 0.1s; }
.contact-card:nth-child(2) { animation-delay: 0.25s; }
.contact-card:nth-child(3) { animation-delay: 0.4s; }

/* Line */
.contact-card.line {
    background: linear-gradient(135deg, rgba(6, 199, 85, 0.1), rgba(6, 199, 85, 0.05));
}

.contact-card.line .contact-icon {
    color: #06C755;
    background: rgba(6, 199, 85, 0.12);
}

.contact-card.line:hover {
    background: linear-gradient(135deg, rgba(6, 199, 85, 0.2), rgba(6, 199, 85, 0.08));
    box-shadow: 0 20px 50px rgba(6, 199, 85, 0.2);
}

/* Facebook */
.contact-card.facebook {
    background: linear-gradient(135deg, rgba(24, 119, 242, 0.1), rgba(24, 119, 242, 0.05));
}

.contact-card.facebook .contact-icon {
    color: #1877f2;
    background: rgba(24, 119, 242, 0.12);
}

.contact-card.facebook:hover {
    background: linear-gradient(135deg, rgba(24, 119, 242, 0.2), rgba(24, 119, 242, 0.08));
    box-shadow: 0 20px 50px rgba(24, 119, 242, 0.2);
}

/* Instagram */
.contact-card.instagram {
    background: linear-gradient(135deg, rgba(225, 48, 108, 0.1), rgba(131, 58, 180, 0.05));
}

.contact-card.instagram .contact-icon {
    color: #e1306c;
    background: linear-gradient(135deg, rgba(225, 48, 108, 0.12), rgba(131, 58, 180, 0.12));
}

.contact-card.instagram:hover {
    background: linear-gradient(135deg, rgba(225, 48, 108, 0.2), rgba(131, 58, 180, 0.1));
    box-shadow: 0 20px 50px rgba(225, 48, 108, 0.2);
}

.contact-card:hover {
    transform: translateY(-10px) scale(1.02);
}

.contact-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 18px;
    transition: all 0.4s var(--transition-bounce);
}

.contact-card:hover .contact-icon {
    transform: scale(1.15) rotate(5deg);
}

.contact-card-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.contact-card-desc {
    font-size: 0.88rem;
    color: var(--text-secondary);
}

/* Keep legacy contact-links for fallback */
.contact-links {
    display: flex;
    justify-content: center;
    gap: 50px;
    font-size: 1.3rem;
    flex-wrap: wrap;
}

.contact-links a {
    color: var(--pink-accent);
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s var(--transition-bounce);
    position: relative;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.contact-links a i {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.contact-links a:hover {
    color: var(--pink-deep);
    transform: translateY(-3px);
}

.contact-links a:hover i {
    transform: scale(1.15) rotate(5deg);
}

/* Contact message section */
.contact-message {
    text-align: center;
    margin-top: 50px;
    padding: 40px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2)), url('1.jpg');
    background-size: cover;
    background-position: center;
    backdrop-filter: blur(3px);
    border-radius: var(--radius-lg);
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 25px var(--shadow-pink);
    animation: fadeUpIn 0.6s var(--transition-smooth) both 0.5s;
}

.contact-message h3 {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--text-primary);
    margin-bottom: 12px;
    text-shadow: 0 2px 8px rgba(255, 255, 255, 0.9), 0 0 15px rgba(255, 255, 255, 0.6);
}

.contact-message p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.9), 0 0 10px rgba(255, 255, 255, 0.8);
}

/* ═══════════════════════════════════════════════════
   ✦ Footer — Wave Separator
   ═══════════════════════════════════════════════════ */
.footer-wave {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    margin-bottom: -1px;
}

.footer-wave svg {
    position: relative;
    display: block;
    width: 100%;
    height: 60px;
}

footer {
    text-align: center;
    padding: 30px 25px 35px;
    background: linear-gradient(135deg, var(--text-primary), #3a2438);
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 0.88rem;
    letter-spacing: 0.3px;
    position: relative;
}

footer::before {
    content: '♡ Made with love ♡';
    display: block;
    margin-bottom: 8px;
    font-size: 0.78rem;
    color: var(--pink-medium);
    letter-spacing: 2px;
}

/* ═══════════════════════════════════════════════════
   ✦ Responsive Design
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
    header {
        bottom: 12px;
        padding: 8px 10px;
        border-radius: var(--radius-lg);
        max-width: 95vw;
    }

    nav a {
        font-size: 0.78rem;
        padding: 8px 11px;
    }

    .admin-btn {
        font-size: 0.75rem;
        padding: 8px 12px;
    }

    h2 {
        font-size: 1.7rem;
    }

    #home h1, .hero-title {
        font-size: 2rem;
    }

    #home {
        padding: 80px 15px 60px;
        min-height: 70vh;
    }

    .container {
        width: 92%;
        padding: 40px 0;
    }

    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 14px;
    }

    .gallery-item.wide {
        grid-column: span 1;
    }

    .gallery-item img {
        height: 180px;
    }

    .price-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .queue-grid {
        grid-template-columns: 1fr;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .queue-summary {
        gap: 12px;
    }

    .summary-card {
        min-width: 100px;
        padding: 15px 20px;
    }

    .filter-pills {
        gap: 8px;
    }

    .filter-pill {
        padding: 8px 18px;
        font-size: 0.82rem;
    }

    .mascot-emoji {
        font-size: 3.5rem;
    }

    .mascot-area {
        width: 290px;
        max-width: 85vw; /* Safe scaling on tiny mobile screens */
        height: 320px;
        padding: 12px;
        border-radius: 28px;
        margin: 0 auto 20px;
        transform: rotate(-1deg);
    }

    .mascot-area::before {
        inset: 8px;
        border-radius: 20px;
    }

    .mascot-area::after {
        inset: 6px;
        border-radius: 22px;
    }

    .washi-tape {
        width: 110px;
        height: 26px;
        top: -14px;
    }

    .washi-tape::before {
        font-size: 0.7rem;
        letter-spacing: 2px;
    }

    .mascot-avatar {
        width: 100%;
        height: 100%;
        border-radius: 18px;
    }

    .mascot-deco-item {
        font-size: 1.2rem;
    }

    .mascot-deco-item.star-1 {
        top: -15px;
        left: -15px;
    }

    .mascot-deco-item.heart-1 {
        bottom: -15px;
        right: -15px;
    }

    .mascot-deco-item.star-2 {
        top: 45px;
        right: -15px;
    }

    .contact-message {
        padding: 25px 18px;
    }
}

@media (max-width: 480px) {
    nav ul {
        gap: 2px;
    }

    nav a {
        font-size: 0.72rem;
        padding: 7px 9px;
        border-radius: var(--radius-sm);
    }

    header {
        padding: 7px 8px;
    }

    .admin-btn {
        font-size: 0.7rem;
        padding: 7px 10px;
        border-radius: var(--radius-sm);
    }

    #home h1, .hero-title {
        font-size: 1.6rem;
    }

    #home p, .hero-desc {
        font-size: 1rem;
    }

    h2 {
        font-size: 1.4rem;
    }

    .price-card .price {
        font-size: 1.8rem;
    }
}

/* ═══════════════════════════════════════════════════
   ✦ Scroll-triggered fade-in (JS adds .visible)
   ═══════════════════════════════════════════════════ */
.fade-in-section {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.7s var(--transition-smooth), transform 0.7s var(--transition-smooth);
}

.fade-in-section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ═══════════════════════════════════════════════════
   ✦ Sparkle cursor trail
   ═══════════════════════════════════════════════════ */
.sparkle {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    font-size: 12px;
    animation: sparkle-trail 0.8s ease-out forwards;
}

@keyframes sparkle-trail {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(0) translateY(-20px);
    }
}

/* ═══════════════════════════════════════════════════
   ✦ Screen-Fitting & Layout Helper Overrides
   ═══════════════════════════════════════════════════ */

/* Split layout helper */
.split-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
    justify-content: center;
    max-width: 1100px;
    margin: 0 auto;
}

.split-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.split-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Home Section tweaks */
#home.split-hero {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
    align-items: center;
    justify-content: center;
    padding: 30px 20px 20px;
    min-height: calc(100vh - 120px);
    text-align: left;
}

#home.split-hero .hero-left-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#home.split-hero .hero-right-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

#home.split-hero h1 {
    font-size: 2.3rem;
    margin-bottom: 12px;
}

#home.split-hero p {
    font-size: 1.05rem;
    margin: 0 0 20px 0;
    max-width: 100%;
}

#home.split-hero .mascot-area {
    margin-bottom: 15px;
}

#home.split-hero .mascot-emoji {
    font-size: 4.5rem;
}

#home.split-hero .status-badge {
    margin-bottom: 15px;
    padding: 8px 20px;
    font-size: 0.88rem;
}

#home.split-hero .cute-divider {
    margin: 20px 0;
    font-size: 0.85rem;
}

/* Horizontal Card tweaks for Prices page */
.price-grid.horizontal {
    grid-template-columns: 1fr !important;
    max-width: 950px;
    margin: 0 auto;
    gap: 20px;
}

.price-card.horizontal-card {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 24px;
    padding: 20px 28px;
    text-align: left;
    align-items: center;
}

.price-card.horizontal-card .card-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.price-card.horizontal-card .price-icon {
    display: inline-block;
    font-size: 2.2rem;
    margin-bottom: 8px;
}

.price-card.horizontal-card h3 {
    font-size: 1.3rem;
    margin-bottom: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.price-card.horizontal-card p {
    font-size: 0.88rem;
    margin-bottom: 10px;
}

.price-card.horizontal-card .feature-list {
    margin: 8px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.price-card.horizontal-card .feature-list li {
    padding: 3px 0;
    font-size: 0.85rem;
}

.price-card.horizontal-card .price {
    font-size: 1.8rem;
    margin: 10px 0 5px;
}

.price-card.horizontal-card .card-showcase {
    margin-top: 0;
    height: 100%;
    max-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.price-card.horizontal-card .card-showcase-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* Queue split layout */
.queue-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 30px;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
}

.queue-layout-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.queue-layout-left .queue-summary {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 0;
}

.queue-layout-left .summary-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    text-align: left;
    width: 100%;
}

.queue-layout-left .summary-card .summary-number {
    font-size: 1.8rem;
}

.queue-layout-right {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Contact split layout */
.contact-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 30px;
    align-items: stretch;
    max-width: 1050px;
    margin: 0 auto;
}

.contact-layout-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-layout-left .contact-card {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    text-align: left;
    gap: 20px;
}

.contact-layout-left .contact-icon {
    width: 50px;
    height: 50px;
    font-size: 1.3rem;
    margin-bottom: 0;
    flex-shrink: 0;
}

.contact-layout-left .contact-card-title {
    margin-bottom: 2px;
    font-size: 1.1rem;
}

.contact-layout-left .contact-card-desc {
    font-size: 0.82rem;
}

.contact-layout-right {
    display: flex;
    flex-direction: column;
}

.contact-layout-right .contact-message {
    height: 100%;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
}



/* Responsive Split Layouts */
@media (max-width: 768px) {
    #home.split-hero {
        grid-template-columns: 1fr;
        padding: 50px 10px 20px;
        min-height: auto;
        text-align: center;
    }
    
    #home.split-hero .hero-right-content {
        align-items: center;
        text-align: center;
    }
    
    .price-card.horizontal-card {
        grid-template-columns: 1fr;
        padding: 20px;
        text-align: center;
    }
    
    .price-card.horizontal-card .price-icon {
        margin-bottom: 12px;
    }
    
    .price-card.horizontal-card .feature-list {
        grid-template-columns: 1fr;
    }
    
    .price-card.horizontal-card .card-showcase {
        margin-top: 15px;
        max-height: 180px;
    }

    .queue-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .queue-layout-left .queue-summary {
        flex-direction: row;
        justify-content: center;
    }
    .queue-layout-left .summary-card {
        flex-direction: column;
        text-align: center;
        width: auto;
        padding: 15px;
    }

    .contact-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .contact-layout-left .contact-card {
        flex-direction: column;
        text-align: center;
        padding: 25px;
    }
    .contact-layout-left .contact-icon {
        margin-bottom: 12px;
    }
}

/* ═══════════════════════════════════════════════════
   ✦ Terms of Service Section
   ═══════════════════════════════════════════════════ */
.tos-section {
    margin-top: 40px;
    padding: 30px 25px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: var(--radius-lg);
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 10px 30px var(--shadow-pink);
    animation: fadeUpIn 0.8s var(--transition-smooth) both;
}

.tos-section h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: max-content;
    margin: 0 auto 25px;
    padding: 10px 28px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: var(--radius-xl);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    box-shadow: 
        0 6px 18px rgba(244, 143, 177, 0.08),
        0 2px 4px rgba(206, 147, 216, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    position: relative;
    transition: all 0.4s var(--transition-bounce);
}

.tos-section h3:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 
        0 10px 24px rgba(244, 143, 177, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    border-color: var(--pink-medium);
}

.tos-section h3::before {
    content: '✧';
    font-size: 1.1rem;
    color: var(--pink-accent);
    animation: sparkle 2.5s ease-in-out infinite;
    display: inline-block;
}

.tos-section h3::after {
    content: '✧' !important;
    font-size: 1.1rem;
    color: var(--pink-accent);
    animation: sparkle 2.5s ease-in-out infinite;
    animation-delay: 1.25s;
    display: inline-block !important;
    margin-top: 0 !important;
    letter-spacing: normal !important;
}

.tos-section h3 i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--pink-light), rgba(255, 255, 255, 0.9));
    border-radius: 50%;
    color: var(--pink-deep) !important;
    font-size: 1.05rem !important;
    margin-right: 0 !important;
    border: 1px solid rgba(244, 143, 177, 0.2);
    box-shadow: 0 3px 8px rgba(244, 143, 177, 0.1);
    transition: all 0.4s var(--transition-bounce);
    vertical-align: middle;
    line-height: 1 !important;
}

.tos-section h3 i::before {
    display: block !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tos-section h3:hover i {
    transform: scale(1.12) rotate(10deg);
    background: linear-gradient(135deg, var(--pink-medium), var(--pink-light));
    color: var(--white) !important;
}

.tos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.tos-card {
    background: rgba(255, 255, 255, 0.75);
    border-radius: var(--radius-md);
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 6px 15px rgba(244, 143, 177, 0.04);
    transition: all 0.3s ease;
}

.tos-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(244, 143, 177, 0.1);
    border-color: var(--pink-light);
}

.tos-card h4 {
    font-family: var(--font-heading);
    color: var(--pink-deep);
    font-size: 1.05rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tos-card p {
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .tos-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* Show editable URL text lines in admin mode */
body.admin-mode .contact-url {
    display: inline-block !important;
}

/* ═══════════════════════════════════════════════════
   ✦ Glassmorphic Admin Login Modal
   ═══════════════════════════════════════════════════ */
.login-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(60, 47, 60, 0.65) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 2500;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.login-modal-overlay::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    pointer-events: none;
    z-index: -1;
}

.login-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.login-modal-card {
    background: #fffdf8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M16 0v16H0V0h16zm-1 1H1v14h14V1z' fill='%23f5ede6' fill-opacity='0.65'/%3E%3C/svg%3E") !important; /* Japanese grid notebook paper */
    border: 3.5px solid var(--handcrafted-outline) !important; /* Thick handcrafted illustrator outline */
    border-radius: 35px 22px 38px 25px / 25px 38px 22px 35px !important; /* Cute organic hand-cut paper corners */
    width: 90%;
    max-width: 420px;
    padding: 45px 32px !important;
    box-shadow: 12px 12px 0px var(--handcrafted-outline) !important; /* Flat solid 3D paper shadow - NO generic AI gradient glow */
    position: relative;
    transform: translateY(40px) rotate(-1.5deg) scale(0.95);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-align: center;
}

/* Washi Tape Deco */
.washi-tape {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%) rotate(-1.5deg);
    width: 130px;
    height: 34px;
    background-color: #ffd1d8;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.4) 10px, rgba(255,255,255,0.4) 20px);
    border-left: 2.5px dashed rgba(74, 51, 71, 0.25);
    border-right: 2.5px dashed rgba(74, 51, 71, 0.25);
    box-shadow: 0 4px 8px rgba(0,0,0,0.03);
    opacity: 0.95;
    z-index: 10;
    pointer-events: none;
}

/* Floating Kawaii Stickers */
.sticker {
    position: absolute;
    font-family: "Quicksand", sans-serif;
    color: #4a3347;
    font-weight: bold;
    z-index: 5;
    user-select: none;
    pointer-events: none;
    filter: drop-shadow(2px 2px 0px rgba(74, 51, 71, 0.15));
}
.sticker-star-1 {
    top: 25px;
    left: -12px;
    font-size: 1.6rem;
    color: #ffe082;
    transform: rotate(-15deg);
}
.sticker-star-2 {
    bottom: 30px;
    right: -15px;
    font-size: 1.5rem;
    color: #ff8a80;
    transform: rotate(20deg);
}
.sticker-flower {
    top: -10px;
    right: 40px;
    font-size: 1.4rem;
    color: #b2dfdb;
    transform: rotate(10deg);
}
.sticker-sparkle {
    bottom: 120px;
    left: -15px;
    font-size: 1.3rem;
    color: #ffb74d;
    transform: rotate(-10deg);
}

/* Custom Scrollbar for Modal Content */
.login-modal-scroll {
    max-height: 55vh;
    overflow-y: auto;
    padding-right: 15px;
    margin-right: -10px;
}
.login-modal-scroll::-webkit-scrollbar {
    width: 6px;
}
.login-modal-scroll::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.02);
    border-radius: 10px;
}
.login-modal-scroll::-webkit-scrollbar-thumb {
    background: rgba(244, 143, 177, 0.3);
    border-radius: 10px;
}
.login-modal-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(244, 143, 177, 0.5);
}

.login-modal-overlay.active .login-modal-card {
    transform: translateY(0) rotate(0deg) scale(1);
}

.login-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #ffffff !important;
    border: 2.5px solid var(--handcrafted-outline) !important;
    color: #4a3347 !important;
    font-size: 1.3rem;
    width: 36px;
    height: 36px;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 3px 3px 0px var(--handcrafted-outline) !important;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    z-index: 15;
}

.login-modal-close:hover {
    background: #ffd1d8 !important;
    color: #4a3347 !important;
    transform: translate(-2px, -2px) rotate(90deg) !important;
    box-shadow: 5px 5px 0px var(--handcrafted-outline) !important;
}

.login-modal-header {
    margin-bottom: 25px;
}

.login-modal-logo {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: #ec407a !important;
    background: #ffebee !important;
    padding: 6px 16px;
    border: 2.5px solid var(--handcrafted-outline) !important; /* Solid thick outline */
    border-radius: 12px 8px 14px 10px / 10px 14px 8px 12px !important; /* Sketchy corners */
    margin-bottom: 15px;
    transform: rotate(-1.5deg);
    box-shadow: 3.5px 3.5px 0px var(--handcrafted-outline) !important;
}

.connection-badge {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.78rem !important;
    font-weight: 700;
    padding: 4px 12px !important;
    border: 2px solid var(--handcrafted-outline) !important;
    border-radius: 10px 14px 8px 12px / 12px 8px 14px 10px !important;
    transform: rotate(1deg);
    margin-bottom: 15px;
    box-shadow: 2px 2px 0px var(--handcrafted-outline) !important;
    letter-spacing: 0.2px;
}

.connection-badge.firebase-active {
    background: #e8f5e9 !important;
    color: #2e7d32 !important;
}

.connection-badge.sandbox-active {
    background: #fff3e0 !important;
    color: #e65100 !important;
}

.login-modal-header h3 {
    font-family: var(--font-heading);
    font-size: 1.6rem !important;
    color: #4a3347 !important;
    font-weight: 800 !important;
    margin-bottom: 8px;
}

.login-modal-header p {
    font-size: 0.86rem !important;
    color: #6a5267;
    line-height: 1.5 !important;
    padding: 0 5px;
}

.login-input-group {
    text-align: left;
    margin-bottom: 18px;
}

.login-input-group label {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.9rem !important;
    font-weight: 700;
    color: #4a3347 !important;
    margin-bottom: 6px;
    padding-left: 4px;
}

.login-input-group label i {
    color: #ec407a !important;
    margin-right: 4px;
}

.login-input-group input {
    width: 100%;
    padding: 13px 16px;
    border-radius: 16px 14px 18px 15px / 15px 18px 14px 16px !important;
    border: 2.5px solid var(--handcrafted-outline) !important; /* Thick dark outline */
    background: #ffffff !important;
    color: #4a3347 !important;
    font-size: 0.92rem;
    box-shadow: 4px 4px 0px var(--handcrafted-outline) !important; /* Hard flat retro shadow */
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    box-sizing: border-box !important;
}

.login-input-group input:focus {
    outline: none;
    border-color: #ec407a !important;
    background: #ffffff !important;
    box-shadow: 4px 4px 0px #ec407a !important; /* Sticker focus shadow */
    transform: translate(-1px, -1px);
}

.login-submit-btn {
    width: 100%;
    padding: 14px;
    border-radius: 15px 18px 14px 16px / 16px 14px 18px 15px !important;
    border: 3px solid var(--handcrafted-outline) !important; /* Handcrafted thick border */
    background: #ec407a !important; /* Solid vibrant pink base */
    color: #ffffff !important;
    font-family: var(--font-heading);
    font-weight: 800 !important;
    font-size: 1.05rem !important;
    cursor: pointer;
    box-shadow: 0px 6px 0px var(--handcrafted-outline) !important; /* 3D Game push shadow */
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    margin-top: 12px;
    box-sizing: border-box !important;
}

.login-submit-btn:hover {
    background: #ff5c8d !important;
    transform: translateY(-2px) !important;
    box-shadow: 0px 8px 0px var(--handcrafted-outline) !important;
}

.login-submit-btn:active {
    transform: translateY(4px) !important; /* Push down effect */
    box-shadow: 0px 2px 0px var(--handcrafted-outline) !important;
}

/* ═══════════════════════════════════════════════════
   ✦ Premium Cute Mockup Custom styles
   ═══════════════════════════════════════════════════ */

/* Dreamy Puff Clouds */
.cloud-bg {
    position: fixed;
    bottom: -60px;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(244, 143, 177, 0.28) 0%, rgba(255, 255, 255, 0) 70%);
    filter: blur(60px);
    z-index: -1;
    pointer-events: none;
}
.cloud-left {
    left: -80px;
}
.cloud-right {
    right: -80px;
}

/* Polaroid Photo Frame */
.polaroid-frame {
    background: #ffffff;
    border-radius: 28px;
    padding: 22px 22px 35px 22px;
    box-shadow: 
        0 15px 45px rgba(244, 143, 177, 0.14),
        0 4px 12px rgba(206, 147, 216, 0.08);
    position: relative;
    transform: rotate(-1deg);
    transition: all 0.5s var(--transition-bounce);
    border: 1px solid rgba(244, 143, 177, 0.1);
    z-index: 10;
}

.polaroid-frame:hover {
    transform: scale(1.03) rotate(1deg) translateY(-8px);
    box-shadow: 
        0 25px 60px rgba(244, 143, 177, 0.22),
        0 8px 20px rgba(206, 147, 216, 0.12);
}

.polaroid-frame .mascot-avatar {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 20px;
    display: block;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.05);
}

/* Polaroid Lace Ribbon (SVG encoded) */
.polaroid-ribbon {
    position: absolute;
    bottom: -18px;
    left: -18px;
    width: 90px;
    height: 90px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 40 C32 15, 12 18, 12 36 C12 54, 40 48, 50 43 C60 48, 88 54, 88 36 C88 18, 68 15, 50 40 Z" fill="%23f48fb1" stroke="%23ec407a" stroke-width="2.5"/><path d="M42 36 C34 26, 22 26, 22 34 C22 42, 38 38, 42 37 Z" fill="%23ffb6c1"/><path d="M58 36 C66 26, 78 26, 78 34 C78 42, 62 38, 58 37 Z" fill="%23ffb6c1"/><path d="M50 43 C42 58, 30 78, 22 84 C18 87, 28 88, 32 82 L50 52 L68 82 C72 88, 82 87, 78 84 C70 78, 58 58, 50 43 Z" fill="%23f48fb1" stroke="%23ec407a" stroke-width="2.5"/><circle cx="50" cy="43" r="8" fill="%23ffffff" stroke="%23ec407a" stroke-width="2.5"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 12;
    animation: ribbonFloat 4s ease-in-out infinite;
}

@keyframes ribbonFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-4px) rotate(3deg); }
}

/* Washi Tape tag at top */
.polaroid-frame .washi-tape {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffc0cb;
    color: #4a3347;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.8rem;
    padding: 6px 20px;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(244, 143, 177, 0.2);
    border: 1.5px solid #fff0f5;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

/* Bunny Ears (SVG twitching animation) */
.title-bunny-ears {
    display: block;
    width: 90px;
    height: 48px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 60"><path d="M35 50 C20 40, 10 10, 25 5 C40 0, 45 35, 45 48 Z" fill="%23ffc0cb" stroke="%23f48fb1" stroke-width="2.5"/><path d="M35 50 C25 42, 18 20, 27 17 C35 15, 39 35, 41 48 Z" fill="%23fff0f5"/><path d="M85 50 C100 40, 110 10, 95 5 C80 0, 75 35, 75 48 Z" fill="%23ffc0cb" stroke="%23f48fb1" stroke-width="2.5"/><path d="M85 50 C95 42, 102 20, 93 17 C85 15, 81 35, 79 48 Z" fill="%23fff0f5"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0 auto 5px 25px;
    transform-origin: bottom center;
    animation: earsTwitch 6s ease-in-out infinite;
}

@keyframes earsTwitch {
    0%, 90%, 100% { transform: rotate(0deg) scaleY(1); }
    93% { transform: rotate(-6deg) scaleY(0.95); }
    96% { transform: rotate(6deg) scaleY(0.95); }
}

/* Heading Text bubble font matching mockup */
.split-hero h1 {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.4;
    color: #4a3347;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

.split-hero h1 .greeting-text {
    color: #ff6f91;
    display: inline-block;
    position: relative;
}

.split-hero h1 .heart-suffix {
    color: #ff6f91;
    font-size: 1.6rem;
    vertical-align: middle;
    margin-left: 6px;
    display: inline-block;
    animation: pulse 1.8s infinite;
}

/* Description Capsule */
.desc-capsule {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    border-radius: 26px;
    padding: 15px 28px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 8px 24px rgba(244, 143, 177, 0.05);
    max-width: 520px;
    margin-bottom: 25px;
    transition: all 0.3s ease;
}

.desc-capsule:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(244, 143, 177, 0.09);
    border-color: rgba(244, 143, 177, 0.2);
}

.desc-capsule .pink-heart {
    font-size: 1.7rem;
    color: #ff8da1;
    animation: heartbeat 2.5s infinite;
    flex-shrink: 0;
}

.desc-capsule p {
    margin: 0 !important;
    font-size: 0.92rem;
    color: #5c4558;
    line-height: 1.6;
    font-weight: 500;
}

/* Glowing Pink Status Badge Button */
.status-capsule-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: linear-gradient(135deg, #ff8da1, #ff5c77);
    color: #ffffff !important;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 12px 30px;
    border-radius: 35px;
    box-shadow: 0 8px 22px rgba(255, 92, 119, 0.35);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: all 0.4s var(--transition-bounce);
    width: max-content;
}

.status-capsule-button:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 15px 30px rgba(255, 92, 119, 0.5);
    background: linear-gradient(135deg, #ff9eaf, #ff6c85);
}

.status-capsule-button .status-left-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-capsule-button .status-left-wrap i {
    font-size: 1rem;
    animation: heartbeat 1.5s infinite;
}

.status-capsule-button .status-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    font-size: 0.75rem;
    transition: transform 0.4s ease;
}

.status-capsule-button:hover .status-arrow {
    transform: translateX(4px);
    background: rgba(255, 255, 255, 0.35);
}

header {
    position: fixed !important;
    left: 24px !important;
    top: 24px !important;
    bottom: 24px !important;
    width: 240px !important;
    height: calc(100vh - 48px) !important;
    z-index: 1000 !important;
    top: auto; /* Revert mobile defaults */
    right: auto !important;
    transform: none !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

body {
    padding-left: 285px !important; /* Shifts the content to make room for the left sidebar! */
    padding-right: 24px !important; /* Matches the left visual gap for perfect symmetry */
    padding-bottom: 40px !important;
}

.nav-container {
    background: #fffdf8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M16 0v16H0V0h16zm-1 1H1v14h14V1z' fill='%23f5ede6' fill-opacity='0.5'/%3E%3C/svg%3E") !important; /* Grid paper background */
    border: 2.5px solid var(--handcrafted-outline) !important; /* Thick ink outline */
    box-shadow: 6px 6px 0px var(--handcrafted-outline) !important; /* Flat 3D solid shadow */
    border-radius: 30px !important;
    padding: 24px 16px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 20px !important;
}

/* Nav Brand in Sidebar */
.nav-brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    text-align: center !important;
    padding-bottom: 16px !important;
    border-bottom: 2px dashed var(--handcrafted-outline) !important;
    width: 100% !important;
}

.nav-brand-img {
    width: 70px !important;
    height: 70px !important;
    border-radius: 50% !important;
    border: 2.5px solid var(--handcrafted-outline) !important;
}

.nav-brand span {
    font-family: var(--font-heading) !important;
    font-weight: 800 !important;
    font-size: 1.15rem !important;
    color: var(--text-primary) !important;
}

.nav-container nav {
    flex: 1 !important;
    display: flex !important;
    align-items: flex-start !important;
    width: 100% !important;
}

.nav-container nav ul {
    display: flex !important;
    flex-direction: column !important; /* Stack vertically */
    gap: 8px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.nav-container nav ul li {
    list-style: none !important;
    width: 100% !important;
}

.nav-container nav ul li a {
    font-size: 0.9rem !important;
    padding: 10px 16px !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: row !important; /* Align icons and text inline side-by-side! */
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; /* Smooth organic bounce transition */
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    border: 1.5px solid transparent !important;
    background: transparent !important;
    width: 100% !important;
}

.nav-container nav ul li a i {
    font-size: 1.05rem !important;
    color: var(--text-secondary) !important;
    width: 20px !important;
    text-align: center !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.nav-container nav ul li a:hover {
    background: #ffebee !important;
    color: #ec407a !important;
    border-color: var(--handcrafted-outline) !important;
    transform: translateX(4px) !important; /* Slide right a bit on hover! */
}

.nav-container nav ul li a:hover i {
    transform: scale(1.1) rotate(-5deg) !important;
    color: #ec407a !important;
}

.nav-container nav ul li a.active {
    background: #ffd1d8 !important;
    color: #ec407a !important;
    border: 1.5px solid var(--handcrafted-outline) !important;
    box-shadow: 0px 3px 0px var(--handcrafted-outline) !important;
    font-weight: 800 !important;
}

.nav-container nav ul li a.active i {
    color: #ec407a !important;
}

/* Hide general active indicator dot */
.nav-container nav ul li a.active::after {
    display: none !important;
}

/* Stylize divider between links and Admin button */
.nav-container::after {
    content: '' !important;
    display: block !important;
    width: 100% !important; /* Horizontal divider for vertical sidebar */
    height: 2px !important;
    background: var(--handcrafted-outline) !important;
    order: 1 !important;
    margin: 10px 0 !important;
    opacity: 0.75 !important;
    border-radius: 2px !important;
}

/* Nav Actions & Admin Button */
.nav-actions {
    width: 100% !important;
    order: 2 !important;
}

.nav-container .admin-btn {
    background: #ec407a !important;
    color: #ffffff !important;
    border: 2px solid var(--handcrafted-outline) !important;
    border-radius: 16px !important;
    padding: 10px 16px !important;
    font-weight: 800 !important;
    font-size: 0.9rem !important;
    box-shadow: 0px 4px 0px var(--handcrafted-outline) !important;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
}

.nav-container .admin-btn i {
    font-size: 0.95rem;
}

.nav-container .admin-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0px 6px 0px var(--handcrafted-outline) !important;
    background: #ff5c8d !important;
}

.nav-container .admin-btn:active {
    transform: translateY(2px) !important; /* Push-down tactile click */
    box-shadow: 0px 1px 0px var(--handcrafted-outline) !important;
}

/* 100% Mockup Image Background Mode for Home Page */
body.homepage-mockup-mode {
    background: #fff5f7 url('homepage_mockup.png') center center / cover no-repeat fixed !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding-bottom: 25px !important;
}

/* Disable moving floating sparkles for a clean minimalist mockup style */
.floating-deco {
    display: none !important;
}

/* ═══════════════════════════════════════════════════
   ✦ Split Layout Hero — Reference Design
   ═══════════════════════════════════════════════════ */

/* Full-screen split container */
.hero-split {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    min-height: 100vh !important;
    overflow: hidden !important;
    background: #fffafb !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ——— Left Side: Content ——— */
.hero-content {
    flex: 0 0 48% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding: 80px 55px 120px !important;
    z-index: 2 !important;
    background: #fffafb !important;
    position: relative !important;
    text-align: left !important;
}

/* ——— Right Side: Image with organic mask ——— */
.hero-image {
    flex: 1 !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: stretch !important;
    padding: 25px 25px 25px 0 !important;
    background: #fffafb !important;
}

.hero-image-mask {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    background: url('bg-header.png') top center/cover no-repeat !important;
    border-radius: 60px 0 0 60px !important;
    box-shadow: -15px 0 60px rgba(244, 143, 177, 0.15) !important;
}

/* ——— Left Content: Overrides ——— */
.hero-content .minimal-profile-area {
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 35px !important;
}

.hero-content .minimal-avatar-wrapper {
    width: 100px !important;
    height: 100px !important;
}

.hero-content .minimal-status-badge {
    font-size: 0.82rem !important;
}

.hero-content .minimal-content-area {
    text-align: left !important;
    margin-bottom: 35px !important;
    width: 100% !important;
}

.hero-content .minimal-content-area h1 {
    font-size: 3rem !important;
    line-height: 1.15 !important;
    margin-bottom: 20px !important;
    text-align: left !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: block !important;
}

.hero-content .minimal-content-area p {
    margin: 0 !important;
    max-width: 100% !important;
    font-size: 1rem !important;
    text-align: left !important;
    line-height: 1.8 !important;
}

/* Override bento grid for split layout — 2x2 compact grid */
.hero-content .cta-grid {
    margin-top: 10px !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 420px !important;
}

.hero-content .bento-btn {
    padding: 18px 12px !important;
    border-radius: 20px !important;
}

.hero-content .bento-btn i {
    font-size: 1.6rem !important;
}

.hero-content .bento-btn span {
    font-size: 0.92rem !important;
}

/* Admin save button in split layout */
.hero-content .admin-add-btn {
    margin-top: 25px !important;
}

/* ——— Tablet (max 1100px) ——— */
@media (max-width: 1100px) {
    .hero-content {
        flex: 0 0 50% !important;
        padding: 80px 35px 120px !important;
    }
    .hero-content .minimal-content-area h1 {
        font-size: 2.4rem !important;
    }
}

/* ——— Mobile (max 768px) ——— */
@media (max-width: 768px) {
    .hero-split {
        flex-direction: column !important;
    }
    .hero-content {
        flex: none !important;
        padding: 30px 24px 30px !important;
        align-items: center !important;
        text-align: center !important;
        order: 1 !important;
    }
    .hero-content .minimal-profile-area {
        flex-direction: column !important;
        align-items: center !important;
    }
    .hero-content .minimal-content-area {
        text-align: center !important;
    }
    .hero-content .minimal-content-area h1 {
        font-size: 2rem !important;
        text-align: center !important;
    }
    .hero-content .minimal-content-area p {
        text-align: center !important;
    }
    .hero-content .cta-grid {
        max-width: 100% !important;
    }
    .hero-image {
        order: 0 !important;
        min-height: 45vh !important;
        padding: 15px !important;
    }
    .hero-image-mask {
        border-radius: 30px !important;
    }
}

/* Avatar section */
.minimal-profile-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 30px;
    position: relative;
}

.minimal-avatar-wrapper {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    padding: 6px;
    background: linear-gradient(135deg, var(--pink-light), var(--lavender));
    box-shadow: 0 8px 24px rgba(244, 143, 177, 0.15);
    transition: all 0.5s var(--transition-bounce);
}

.minimal-avatar-wrapper:hover {
    transform: rotate(5deg) scale(1.05);
    background: linear-gradient(135deg, var(--pink-accent), var(--lavender-deep));
}

.minimal-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 4px solid var(--white);
    background: var(--white);
}

/* Status Badge */
.minimal-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.85);
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    border: 1px solid rgba(244, 143, 177, 0.2);
    box-shadow: 0 4px 10px rgba(244, 143, 177, 0.05);
    transition: all 0.3s ease;
}

.minimal-status-badge:hover {
    background: var(--white);
    border-color: var(--pink-accent);
    transform: scale(1.02);
}

.status-pulse-dot {
    width: 8px;
    height: 8px;
    background-color: #66bb6a; /* Pastel green */
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(102, 187, 106, 0.5);
    animation: greenPulse 2s infinite;
}

@keyframes greenPulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(102, 187, 106, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 8px rgba(102, 187, 106, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(102, 187, 106, 0);
    }
}

/* Typography spacing */
.minimal-content-area {
    margin-bottom: 35px;
    width: 100%;
}

.minimal-content-area h1 {
    font-family: var(--font-heading);
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 16px;
    line-height: 1.4;
}

.minimal-content-area h1 .greeting-text {
    color: var(--pink-deep);
}

.minimal-content-area p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.8;
    margin: 0 auto;
    max-width: 540px;
    font-weight: 500;
}

/* Bento Grid Layout for Home Buttons */
.cta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    width: 100%;
    margin-top: 10px;
}

.bento-btn {
    text-decoration: none;
    font-family: var(--font-heading);
    background: rgba(255, 255, 255, 0.75);
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    border-radius: 24px;
    padding: 24px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--text-primary);
    transition: all 0.4s var(--transition-bounce);
    box-shadow: 0 8px 20px rgba(244, 143, 177, 0.05);
    backdrop-filter: blur(10px);
}

.bento-btn:hover {
    transform: translateY(-5px) scale(1.02);
    background: var(--white);
    border-color: var(--pink-accent);
    box-shadow: 0 15px 35px rgba(244, 143, 177, 0.2);
    color: var(--pink-deep);
}

.bento-btn i {
    font-size: 2.2rem;
    color: var(--pink-accent);
    transition: all 0.3s ease;
}

.bento-btn:hover i {
    transform: scale(1.15) rotate(5deg);
    color: var(--pink-deep);
}

.bento-btn span {
    font-size: 1.05rem;
    font-weight: 800;
}

/* Primary highlighted bento button (Gallery) */
.bento-btn.primary-bento {
    background: linear-gradient(135deg, rgba(255, 235, 243, 0.85), rgba(255, 215, 230, 0.85));
    border-color: rgba(255, 255, 255, 0.95);
}

.bento-btn.primary-bento i {
    color: var(--pink-deep);
}

@media (max-width: 480px) {
    .cta-grid {
        grid-template-columns: 1fr;
    }
}

/* Custom Admin Save button wrapper for clean card integration */
.minimal-home-card .admin-add-btn {
    margin-top: 30px;
    width: auto;
    min-width: 160px;
    justify-content: center;
}

/* ═══════════════════════════════════════════════════
   ✦ Unified Cohesive Visual System Overrides (Masterpiece Design Theme)
   ═══════════════════════════════════════════════════ */

/* Global Body Background Sync */
/* Global Body Background Sync */
body {
    background-color: #fdfaf6 !important;
    background-image: 
        radial-gradient(rgba(74, 51, 71, 0.08) 1.5px, transparent 1.5px) !important;
    background-size: 24px 24px !important;
}

/* Standardized Handcrafted Japanese Scrapbook Cards across all pages */
.price-card, 
.tos-card, 
.gallery-item, 
.summary-card, 
.queue-card, 
.contact-card,
.gallery-cta-card,
.minimal-home-card,
.queue-ticket {
    background: #fffdf8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M16 0v16H0V0h16zm-1 1H1v14h14V1z' fill='%23f5ede6' fill-opacity='0.55'/%3E%3C/svg%3E") !important; /* Japanese grid notebook paper */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 2.5px solid var(--handcrafted-outline) !important; /* Ink sketch outline */
    border-radius: 28px 18px 26px 20px / 20px 26px 18px 28px !important; /* Cut out paper look */
    box-shadow: 6px 6px 0px var(--handcrafted-outline) !important; /* Solid flat 3D shadow - NO blurry AI glow */
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Hover scales and 3D flat offsets */
.price-card:hover,
.tos-card:hover,
.gallery-item:hover,
.summary-card:hover,
.queue-card:hover,
.contact-card:hover,
.gallery-cta-card:hover,
.minimal-home-card:hover,
.queue-ticket:hover {
    transform: translateY(-4px) !important;
    box-shadow: 10px 10px 0px var(--handcrafted-outline) !important;
    border-color: #ec407a !important;
}

/* Heading Titles Unification (h2 across Prices, Gallery, Queue, Contact) */
h2 {
    font-family: var(--font-heading) !important;
    font-size: 1.65rem !important;
    font-weight: 800 !important;
    color: #4a3347 !important;
    background: #ffebee !important; /* Highlighter ribbon pink backing */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 2.5px solid var(--handcrafted-outline) !important;
    border-radius: 14px 10px 16px 8px / 8px 16px 10px 14px !important; /* Cozy hand-drawn border radiuses */
    padding: 10px 32px !important;
    box-shadow: 4px 4px 0px var(--handcrafted-outline) !important;
    margin: 20px auto 40px !important;
    gap: 12px !important;
    transform: rotate(-1deg) !important; /* Hand-taped rotation */
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

h2:hover {
    transform: translateY(-2px) rotate(1.5deg) scale(1.02) !important;
    box-shadow: 6px 6px 0px var(--handcrafted-outline) !important;
    background: #ffd1d8 !important;
}

h2 i {
    background: #ffffff !important;
    color: #ec407a !important;
    border: 2px solid var(--handcrafted-outline) !important;
    box-shadow: 2px 2px 0px var(--handcrafted-outline) !important;
    border-radius: 50% !important;
    width: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

h2:hover i {
    background: #ec407a !important;
    color: #ffffff !important;
    box-shadow: 3px 3px 0px var(--handcrafted-outline) !important;
}

/* Premium Handcrafted Flat 3D Push-Down Buttons */
.cta-btn, 
.filter-pill, 
.landing-cta, 
.admin-btn, 
.admin-add-btn,
.status-capsule-button,
.login-submit-btn {
    border: 2.5px solid var(--handcrafted-outline) !important;
    border-radius: 14px 12px 15px 13px / 13px 15px 12px 14px !important;
    background: #ec407a !important;
    color: #ffffff !important;
    box-shadow: 0px 4px 0px var(--handcrafted-outline) !important;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    display: inline-flex; /* Removed !important to prevent admin button leakage before login */
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

/* Safeguard Admin Buttons display to prevent leakage before login */
.admin-add-btn {
    display: none !important;
}
body.admin-mode .admin-add-btn {
    display: inline-flex !important;
}
body.landing-page .admin-add-btn {
    display: none !important;
}
body.landing-page.admin-mode .admin-add-btn {
    display: inline-flex !important;
}

.cta-btn:hover, 
.filter-pill:hover, 
.landing-cta:hover, 
.admin-btn:hover, 
.admin-add-btn:hover,
.status-capsule-button:hover,
.login-submit-btn:hover {
    background: #ff5c8d !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0px 6px 0px var(--handcrafted-outline) !important;
}

.cta-btn:active, 
.filter-pill:active, 
.landing-cta:active, 
.admin-btn:active, 
.admin-add-btn:active,
.status-capsule-button:active,
.login-submit-btn:active {
    transform: translateY(3px) !important;
    box-shadow: 0px 1px 0px var(--handcrafted-outline) !important;
}

/* Custom adjustments for active states of filters */
.filter-pill.active {
    background: #ffebee !important;
    color: #ec407a !important;
    border-color: var(--handcrafted-outline) !important;
    box-shadow: 2px 2px 0px var(--handcrafted-outline) !important;
}

/* Ensure font sizes and colors are extremely neat across other subcomponents */
.price-card h3,
.tos-card h4,
.queue-customer,
.contact-card-title {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
}

/* Smooth mobile-friendly padding and containers */
.container {
    padding: 30px 15px 15px 15px !important;
    animation: fadeUpIn 0.8s var(--transition-smooth) both !important;
}

/* Consistent scrollbar to match the design language */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--pink-medium), var(--lavender)) !important;
}

/* --- Sub-page specific style upgrades --- */

/* 1. Prices Page horizontal cards details */
.price-card.horizontal-card {
    border-radius: var(--radius-lg) !important;
}
.price-card.horizontal-card .price {
    color: var(--pink-deep) !important;
    font-family: var(--font-heading) !important;
    font-size: 2rem !important;
}
.price-card.horizontal-card h3 {
    font-size: 1.4rem !important;
    color: var(--text-primary) !important;
}
.price-card.horizontal-card .card-showcase {
    border-radius: var(--radius-md) !important;
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 8px 24px rgba(244, 143, 177, 0.1) !important;
}

/* 2. Gallery Page overlays and buttons */
.filter-pills {
    margin-bottom: 30px !important;
}
.filter-pill {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 20px !important;
    padding: 8px 20px !important;
    font-family: var(--font-heading) !important;
    color: var(--text-secondary) !important;
    transition: all 0.3s var(--transition-bounce) !important;
    box-shadow: 0 4px 12px rgba(244, 143, 177, 0.04) !important;
}
.filter-pill.active, .filter-pill:hover {
    background: linear-gradient(135deg, var(--pink-medium), var(--lavender)) !important;
    color: var(--white) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 8px 20px rgba(244, 143, 177, 0.2) !important;
    transform: translateY(-2px) !important;
}
.gallery-overlay {
    background: linear-gradient(to top, rgba(74, 51, 71, 0.85), transparent) !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding-bottom: 20px !important;
}
.gallery-overlay span {
    background: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding: 8px 18px !important;
    border-radius: 20px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 6px 15px rgba(0,0,0,0.12) !important;
    color: #ffffff !important;
}

/* 3. Queue Page progress bars and status badges */
.progress-bar-container {
    height: 8px !important;
    background: var(--pink-light) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    margin-top: 12px !important;
    border: 1px solid rgba(244, 143, 177, 0.1) !important;
}
.progress-bar {
    background: linear-gradient(90deg, #ff8da1, #ff5c77) !important;
    box-shadow: 0 0 8px rgba(255, 92, 119, 0.3) !important;
}
.progress-bar.complete {
    background: linear-gradient(90deg, #81c784, #4caf50) !important;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.3) !important;
}
.status.working {
    background: rgba(255, 243, 205, 0.72) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    color: #856404 !important;
    border: 1px solid rgba(255, 238, 186, 0.8) !important;
    border-radius: 15px !important;
    font-size: 0.8rem !important;
}
.status.done {
    background: rgba(212, 237, 218, 0.72) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    color: #155724 !important;
    border: 1px solid rgba(195, 230, 203, 0.8) !important;
    border-radius: 15px !important;
    font-size: 0.8rem !important;
}
.status.pending {
    background: rgba(248, 249, 250, 0.72) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    color: #6c757d !important;
    border: 1px solid rgba(222, 226, 230, 0.8) !important;
    border-radius: 15px !important;
    font-size: 0.8rem !important;
}

/* 4. Contact Page social links styling */
.contact-card.line {
    background: rgba(6, 199, 85, 0.08) !important;
    border: 1.5px solid rgba(6, 199, 85, 0.15) !important;
}
.contact-card.line:hover {
    background: rgba(6, 199, 85, 0.14) !important;
    border-color: rgba(6, 199, 85, 0.4) !important;
    box-shadow: 0 15px 40px rgba(6, 199, 85, 0.15) !important;
}
.contact-card.facebook {
    background: rgba(24, 119, 242, 0.08) !important;
    border: 1.5px solid rgba(24, 119, 242, 0.15) !important;
}
.contact-card.facebook:hover {
    background: rgba(24, 119, 242, 0.14) !important;
    border-color: rgba(24, 119, 242, 0.4) !important;
    box-shadow: 0 15px 40px rgba(24, 119, 242, 0.15) !important;
}
.contact-card.instagram {
    background: rgba(225, 48, 108, 0.08) !important;
    border: 1.5px solid rgba(225, 48, 108, 0.15) !important;
}
.contact-card.instagram:hover {
    background: rgba(225, 48, 108, 0.14) !important;
    border-color: rgba(225, 48, 108, 0.4) !important;
    box-shadow: 0 15px 40px rgba(225, 48, 108, 0.15) !important;
}
.contact-icon {
    border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

/* ═══════════════════════════════════════════════════
   ✦ Gallery Page — Premium Redesign
   ═══════════════════════════════════════════════════ */

/* --- Gallery Hero Banner --- */
.gallery-hero {
    text-align: center;
    padding: 50px 20px 35px;
    position: relative;
    z-index: 1;
    animation: fadeUpIn 0.7s var(--transition-smooth) both;
}

.gallery-hero-content {
    max-width: 650px;
    margin: 0 auto;
}

.gallery-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pink-accent), var(--lavender-deep));
    color: white;
    font-size: 1.6rem;
    margin-bottom: 20px;
    box-shadow: 
        0 10px 30px rgba(244, 143, 177, 0.3),
        0 0 0 8px rgba(244, 143, 177, 0.08);
    animation: galleryIconPulse 3s ease-in-out infinite;
}

@keyframes galleryIconPulse {
    0%, 100% {
        box-shadow: 
            0 10px 30px rgba(244, 143, 177, 0.3),
            0 0 0 8px rgba(244, 143, 177, 0.08);
        transform: scale(1);
    }
    50% {
        box-shadow: 
            0 14px 40px rgba(244, 143, 177, 0.4),
            0 0 0 14px rgba(244, 143, 177, 0.05);
        transform: scale(1.05);
    }
}

.gallery-hero-title {
    font-family: var(--font-heading);
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 14px;
    line-height: 1.3;
    letter-spacing: -0.5px;
}

.gallery-hero-desc {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.8;
    font-weight: 500;
    margin-bottom: 28px;
}

/* Stats bar */
.gallery-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    border-radius: 24px;
    padding: 14px 8px;
    box-shadow: 
        0 10px 30px rgba(244, 143, 177, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    max-width: 520px;
    margin: 0 auto;
    animation: fadeUpIn 0.8s var(--transition-smooth) both 0.3s;
}

.gallery-stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 12px;
}

.gallery-stat-item .stat-number {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--pink-deep);
    line-height: 1.2;
}

.gallery-stat-item .stat-label {
    font-size: 0.72rem;
    color: var(--text-light);
    font-weight: 600;
    letter-spacing: 0.2px;
}

.gallery-stat-divider {
    width: 1.5px;
    height: 28px;
    background: linear-gradient(180deg, transparent, var(--pink-medium), transparent);
    opacity: 0.4;
    flex-shrink: 0;
}

/* --- Gallery Container Override --- */
.gallery-container {
    padding-top: 10px !important;
}

/* --- Filter Pills Upgrade --- */
.filter-pills {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
    flex-wrap: wrap;
    animation: fadeUpIn 0.7s var(--transition-smooth) both 0.15s;
}

.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border-radius: 22px;
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.35s var(--transition-bounce);
    box-shadow: 0 4px 14px rgba(244, 143, 177, 0.04);
    position: relative;
}

.filter-pill i {
    font-size: 0.8rem;
    opacity: 0.7;
}

.filter-pill .pill-emoji {
    font-size: 0.9rem;
}

.filter-pill:hover {
    background: rgba(255, 255, 255, 0.85);
    border-color: var(--pink-medium);
    color: var(--pink-deep);
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(244, 143, 177, 0.12);
}

.filter-pill.active {
    background: linear-gradient(135deg, var(--pink-accent), var(--lavender-deep));
    color: var(--white);
    border-color: transparent;
    box-shadow: 0 8px 24px rgba(244, 143, 177, 0.3);
    transform: translateY(-2px);
}

.filter-pill.active i,
.filter-pill.active .pill-emoji {
    opacity: 1;
}

/* --- Gallery Grid Upgrade --- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding: 5px 0 20px;
}

@keyframes galleryItemIn {
    from {
        opacity: 0;
        transform: translateY(25px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.gallery-item {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 
        0 8px 28px rgba(244, 143, 177, 0.1),
        0 2px 8px rgba(206, 147, 216, 0.05);
    transition: all 0.5s var(--transition-bounce);
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.9);
    position: relative;
    animation: galleryItemIn 0.6s var(--transition-smooth) both;
}

.gallery-item:nth-child(1) { animation-delay: 0s; }
.gallery-item:nth-child(2) { animation-delay: 0.08s; }
.gallery-item:nth-child(3) { animation-delay: 0.16s; }
.gallery-item:nth-child(4) { animation-delay: 0.24s; }
.gallery-item:nth-child(5) { animation-delay: 0.32s; }
.gallery-item:nth-child(6) { animation-delay: 0.40s; }

.gallery-item.wide {
    grid-column: span 2;
}

.gallery-item:hover {
    transform: translateY(-8px) scale(1.015);
    box-shadow: 
        0 22px 55px rgba(244, 143, 177, 0.2),
        0 5px 15px rgba(206, 147, 216, 0.08);
    border-color: rgba(244, 143, 177, 0.2);
}

.gallery-item img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    transition: transform 0.7s var(--transition-smooth);
    display: block;
}

.gallery-item.wide img {
    height: 280px;
}

.gallery-item:hover img {
    transform: scale(1.06);
}

/* Overlay */
.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 50px 20px 18px;
    background: linear-gradient(to top, rgba(74, 51, 71, 0.88) 0%, rgba(74, 51, 71, 0.4) 50%, transparent 100%);
    color: white;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.92rem;
    transform: translateY(100%);
    transition: transform 0.45s var(--transition-smooth);
}

.gallery-item:hover .gallery-overlay {
    transform: translateY(0);
}

.gallery-overlay span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 7px 16px;
    border-radius: 18px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* --- Lightbox Upgrade --- */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(52, 33, 49, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 2000;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.lightbox-overlay.active {
    display: flex;
    animation: fadeIn 0.3s ease;
}

.lightbox-content {
    cursor: default;
    position: relative;
    max-width: 90%;
    max-height: 80vh;
    animation: lightboxZoomIn 0.45s var(--transition-bounce);
}

@keyframes lightboxZoomIn {
    from {
        opacity: 0;
        transform: scale(0.85) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.lightbox-content img {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 20px;
    box-shadow: 
        0 30px 80px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    display: block;
}

.lightbox-close {
    position: absolute;
    top: 24px;
    right: 28px;
    font-size: 1.2rem;
    color: white;
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    transition: all 0.35s var(--transition-bounce);
    z-index: 2010;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(90deg) scale(1.1);
    border-color: rgba(255, 255, 255, 0.4);
}

.lightbox-hint {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    animation: fadeUpIn 0.6s ease both 0.4s;
}

.lightbox-hint span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.lightbox-hint kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    min-width: 28px;
}

/* --- Gallery CTA Section --- */
.gallery-cta-section {
    padding: 15px 20px 30px;
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.gallery-cta-card {
    text-align: center;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    border-radius: var(--radius-lg);
    padding: 40px 30px;
    box-shadow: 
        0 15px 45px rgba(244, 143, 177, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    position: relative;
    overflow: hidden;
    transition: all 0.4s var(--transition-bounce);
    animation: fadeUpIn 0.8s var(--transition-smooth) both;
}

.gallery-cta-card:hover {
    transform: translateY(-4px);
    box-shadow: 
        0 25px 60px rgba(244, 143, 177, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    border-color: rgba(244, 143, 177, 0.2);
}

.gallery-cta-sparkle {
    position: absolute;
    top: 16px;
    right: 22px;
    font-size: 1.4rem;
    color: var(--pink-accent);
    opacity: 0.35;
    animation: sparkle 2.5s ease-in-out infinite;
}

.gallery-cta-card h3 {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.gallery-cta-card p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 22px;
    font-weight: 500;
}

.gallery-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* --- CTA Button Styles --- */
.gallery-cta-buttons .cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 12px 28px;
    border-radius: 30px;
    text-decoration: none !important;
    transition: all 0.4s var(--transition-bounce);
    cursor: pointer;
    border: none;
    line-height: 1;
}

.gallery-cta-buttons .primary-cta {
    background: var(--pink-deep);
    color: var(--white) !important;
    box-shadow: 0 8px 22px rgba(236, 64, 122, 0.25);
    border: 1.5px solid var(--pink-deep);
}

.gallery-cta-buttons .primary-cta:hover {
    transform: translateY(-3px) scale(1.03);
    background: var(--white);
    color: var(--pink-deep) !important;
    box-shadow: 0 12px 28px rgba(236, 64, 122, 0.38);
}

.gallery-cta-buttons .secondary-cta {
    background: var(--white);
    color: var(--text-primary) !important;
    border: 1.5px solid var(--pink-light);
    box-shadow: 0 8px 22px rgba(244, 143, 177, 0.08);
}

.gallery-cta-buttons .secondary-cta:hover {
    transform: translateY(-3px) scale(1.03);
    background: var(--pink-light);
    border-color: var(--pink-accent);
    color: var(--pink-deep) !important;
    box-shadow: 0 12px 28px rgba(244, 143, 177, 0.22);
}

.gallery-cta-buttons .cta-btn i {
    font-size: 1.05rem;
    transition: transform 0.3s ease;
}

.gallery-cta-buttons .cta-btn:hover i {
    transform: scale(1.15);
}

/* --- Responsive Gallery --- */
@media (max-width: 768px) {
    .gallery-hero {
        padding: 35px 15px 25px;
    }

    .gallery-hero-icon {
        width: 60px;
        height: 60px;
        font-size: 1.3rem;
        margin-bottom: 16px;
    }

    .gallery-hero-title {
        font-size: 1.8rem;
    }

    .gallery-hero-desc {
        font-size: 0.88rem;
        margin-bottom: 20px;
    }

    .gallery-stats {
        padding: 10px 4px;
        border-radius: 18px;
    }

    .gallery-stat-item .stat-number {
        font-size: 1.3rem;
    }

    .gallery-stat-item .stat-label {
        font-size: 0.65rem;
    }

    .gallery-stat-item {
        padding: 4px 6px;
    }

    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }

    .gallery-item.wide {
        grid-column: span 1;
    }

    .gallery-item img {
        height: 170px;
    }

    .gallery-item.wide img {
        height: 170px;
    }

    .filter-pill {
        padding: 8px 16px;
        font-size: 0.78rem;
        gap: 4px;
    }

    .lightbox-content {
        max-width: 95%;
    }

    .lightbox-content img {
        border-radius: 14px;
    }

    .gallery-cta-card {
        padding: 30px 20px;
    }

    .gallery-cta-card h3 {
        font-size: 1.15rem;
    }

    .gallery-cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .gallery-cta-buttons .cta-btn {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .gallery-hero-title {
        font-size: 1.5rem;
    }

    .gallery-stats {
        flex-wrap: wrap;
        gap: 4px;
        border-radius: 16px;
    }

    .gallery-stat-divider {
        display: none;
    }

    .gallery-stat-item {
        min-width: 70px;
    }

    .gallery-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .gallery-item img,
    .gallery-item.wide img {
        height: 140px;
    }

    .lightbox-hint {
        bottom: 16px;
    }
}

/* --- Brand & Mobile Menu toggles --- */
.nav-brand {
    display: flex; /* Always show logo */
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.nav-brand-img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--pink-accent);
    object-fit: cover;
}

.nav-actions, .landing-nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-menu-btn {
    display: flex; /* Always show hamburger button */
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 8px;
    transition: all 0.3s ease;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
}

.mobile-menu-btn:hover {
    color: var(--pink-deep);
    background: rgba(244, 143, 177, 0.08);
}

/* Ensure brand logo displays beautifully in vertical sidebar */
header .nav-brand {
    display: flex !important;
}

header .mobile-menu-btn {
    display: none !important;
}

header .nav-container > nav {
    display: flex !important;
}

header .nav-container > .admin-btn,
header .nav-actions > .admin-btn {
    display: inline-flex !important;
}

/* --- Mobile Navigation Drawer (Hamburger Menu) --- */
.mobile-drawer-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(74, 51, 71, 0.5) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    z-index: 99999 !important; /* ดันให้อยู่บนสุดเสมอ */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    transform: none !important; /* ป้องกันการสืบทอด transform ของ header */
}

.mobile-drawer-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.mobile-drawer-content {
    position: fixed !important;
    top: 15px !important;
    right: -340px !important; /* ดึงไปซ่อนด้านขวา */
    bottom: 15px !important;
    width: 300px !important;
    background: rgba(255, 245, 247, 0.96) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
    box-shadow: -10px 15px 45px rgba(74, 51, 71, 0.18) !important;
    border-radius: var(--radius-lg) !important;
    padding: 40px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    transition: right 0.45s var(--transition-bounce) !important;
    z-index: 100000 !important;
    transform: none !important;
}

.mobile-drawer-overlay.active .mobile-drawer-content {
    right: 15px !important;
}

.mobile-drawer-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.8);
    border: 1.5px solid rgba(244, 143, 177, 0.2);
    color: var(--text-primary);
    font-size: 1.1rem;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(244, 143, 177, 0.1);
}

.mobile-drawer-close:hover {
    color: var(--pink-deep);
    background: var(--white);
    transform: rotate(90deg);
    border-color: var(--pink-accent);
}

.mobile-drawer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 45px;
    padding-bottom: 20px;
    border-bottom: 1.5px dashed rgba(244, 143, 177, 0.2);
}

.mobile-drawer-logo img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--pink-accent);
}

.mobile-drawer-logo span {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
}

.mobile-drawer-nav {
    flex: 1;
    width: 100% !important;
}

.mobile-drawer-nav ul {
    list-style: none;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    align-items: stretch !important;
}

.mobile-drawer-nav ul li {
    width: 100% !important;
    display: block !important;
}

.mobile-drawer-nav ul li a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    padding: 14px 24px !important;
    border-radius: 18px !important;
    color: var(--text-primary) !important;
    text-decoration: none !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    background: rgba(255, 255, 255, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 10px rgba(244, 143, 177, 0.03) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.mobile-drawer-nav ul li a i {
    font-size: 1.2rem;
    color: var(--pink-accent);
    transition: transform 0.3s ease;
    width: 20px; /* Force same width for icons to align text perfectly */
    text-align: center;
}

.mobile-drawer-nav ul li a:hover {
    background: var(--white) !important;
    color: var(--pink-deep) !important;
    border-color: var(--pink-accent) !important;
    transform: translateX(5px);
}

.mobile-drawer-nav ul li a:hover i {
    transform: scale(1.15) rotate(-5deg);
}

.mobile-drawer-nav ul li a.active {
    background: linear-gradient(135deg, rgba(255, 235, 243, 0.9), rgba(255, 215, 230, 0.9)) !important;
    color: var(--pink-deep) !important;
    border-color: rgba(244, 143, 177, 0.35) !important;
    box-shadow: 0 6px 15px rgba(244, 143, 177, 0.12) !important;
}

.mobile-drawer-nav ul li a.active i {
    color: var(--pink-deep);
}

.mobile-drawer-footer {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1.5px dashed rgba(244, 143, 177, 0.2);
    width: 100% !important;
}

.admin-btn-drawer {
    width: 100% !important;
    box-sizing: border-box !important;
    background: linear-gradient(135deg, var(--pink-accent), var(--pink-deep));
    color: var(--white);
    border: none;
    border-radius: 18px;
    padding: 14px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 6px 20px rgba(236, 64, 122, 0.25);
    transition: all 0.3s ease;
}

.admin-btn-drawer:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(236, 64, 122, 0.35);
}

/* ——— TABLET & MOBILE (max 768px) ——— */
@media (max-width: 768px) {

    /* === Navigation Dock — Mobile BOTTOM Bar Style === */
    header {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: 15px !important;
        top: auto !important;
        width: calc(100vw - 20px) !important;
        height: 65px !important;
        z-index: 1000 !important;
        transform: none !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    body {
        padding-left: 0px !important;
        padding-right: 0px !important;
        padding-bottom: 100px !important; /* Make room for bottom bar */
    }

    .nav-container {
        display: flex !important;
        flex-direction: row !important; /* Stack horizontally */
        align-items: center !important;
        justify-content: space-between !important; /* Distribute space between left spacer, center nav, right admin */
        gap: 0 !important; /* Remove gap so spacer works perfectly */
        padding: 8px 12px !important;
        height: 100% !important;
        border-radius: 35px !important;
        background: rgba(255, 255, 255, 0.85) !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        border: 2.5px solid var(--handcrafted-outline) !important;
        box-shadow: 0px 5px 15px rgba(244, 143, 177, 0.15), inset 0 2px 5px rgba(255,255,255,0.8) !important;
    }

    header .nav-brand {
        display: block !important;
        width: 44px !important; /* Match admin button width exactly */
        height: 44px !important;
        visibility: hidden !important; /* Invisible spacer */
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }

    header .nav-container > nav {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 !important; /* Take up all space between spacer and admin button */
        padding: 0 4px !important; /* Small buffer */
    }

    header .nav-container nav ul {
        display: flex !important;
        flex-direction: row !important; /* Stack horizontally */
        gap: 4px !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    header .nav-container nav ul li {
        width: auto !important;
    }

    .nav-container nav ul li a {
        font-size: 0px !important; /* Hide text label */
        padding: 0 !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: 1.5px solid transparent !important;
        box-shadow: none !important;
    }

    .nav-container nav ul li a.active {
        background: #ffd1d8 !important;
        color: #ec407a !important;
        border: 1.5px solid var(--handcrafted-outline) !important;
        box-shadow: 0px 3px 0px var(--handcrafted-outline) !important;
        transform: translateY(0) !important; /* Reset floating behavior from desktop */
        
        /* Expansion for text */
        width: auto !important;
        padding: 0 16px !important;
        border-radius: 22px !important; /* Pill shape */
        font-size: 0.85rem !important; /* Show text */
        font-weight: 700 !important;
        gap: 6px !important;
    }

    .nav-container nav ul li a i {
        font-size: 1.25rem !important; /* Crisp icon */
        transform: none !important;
    }

    .nav-container nav ul li a.active i {
        font-size: 1.15rem !important;
        color: #ec407a !important;
        transform: none !important;
    }

    /* Hide divider */
    header .nav-container::after {
        display: none !important;
    }

    /* Admin Button on bottom bar */
    header .nav-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 44px !important; /* Match spacer width exactly */
        height: 44px !important;
        flex-shrink: 0 !important;
    }

    header .nav-container > .admin-btn,
    header .nav-actions > .admin-btn {
        font-size: 0px !important;
        padding: 0 !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #ec407a !important;
        color: #ffffff !important;
        border: 2px solid var(--handcrafted-outline) !important;
        box-shadow: 0px 3px 0px var(--handcrafted-outline) !important;
        margin: 0 !important; /* Removed auto margin since it's absolute now */
    }

    header .nav-container > .admin-btn i,
    header .nav-actions > .admin-btn i {
        font-size: 1.15rem !important;
        margin: 0 !important;
    }

    header .mobile-menu-btn {
        display: none !important;
    }

    /* === Landing Nav Actions & Menu Button on Mobile === */
    .landing-nav-actions {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .landing-nav .admin-btn-landing {
        display: none !important; /* Hide to keep landing nav clean on mobile, available in drawer */
    }

    .mobile-menu-btn {
        display: flex !important; /* Force show hamburger icon on mobile */
    }

    /* === Body & Containers === */
    body {
        padding-bottom: 25px !important;
    }

    .container {
        width: 94% !important;
        padding: 20px 8px 10px !important;
    }

    /* === H2 Capsule Headers — prevent overflow === */
    h2 {
        font-size: 1.3rem !important;
        padding: 10px 22px !important;
        border-radius: 22px !important;
        width: auto !important;
        max-width: 90vw !important;
        margin: 10px auto 25px !important;
        gap: 8px !important;
    }

    h2 i {
        width: 34px !important;
        height: 34px !important;
        font-size: 1rem !important;
    }

    h2::before, h2::after {
        font-size: 0.95rem !important;
    }

    /* === Home Page — Minimal Card === */
    .minimal-home-container {
        min-height: calc(100vh - 90px) !important;
        padding: 25px 12px !important;
    }

    .minimal-home-card {
        padding: 35px 22px !important;
        border-radius: 28px !important;
        max-width: 100% !important;
    }

    .minimal-avatar-wrapper {
        width: 120px !important;
        height: 120px !important;
    }

    .minimal-profile-area {
        gap: 12px !important;
        margin-bottom: 22px !important;
    }

    .minimal-status-badge {
        font-size: 0.78rem !important;
        padding: 6px 14px !important;
    }

    .minimal-content-area h1 {
        font-size: 1.55rem !important;
        margin-bottom: 12px !important;
    }

    .minimal-content-area p {
        font-size: 0.88rem !important;
        line-height: 1.7 !important;
    }

    .cta-group {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .cta-btn {
        width: 100% !important;
        max-width: 300px !important;
        justify-content: center !important;
        padding: 13px 24px !important;
        font-size: 0.88rem !important;
    }

    /* === Prices Page === */
    .price-grid.horizontal {
        max-width: 100% !important;
    }

    .price-card.horizontal-card {
        grid-template-columns: 1fr !important;
        padding: 20px 18px !important;
        text-align: center !important;
    }

    .price-card.horizontal-card .card-content {
        align-items: center !important;
    }

    .price-card.horizontal-card .feature-list {
        grid-template-columns: 1fr !important;
        text-align: left !important;
    }

    .price-card.horizontal-card .card-showcase {
        margin-top: 14px !important;
        max-height: 200px !important;
    }

    .price-card.horizontal-card .price {
        font-size: 1.7rem !important;
    }

    .price-card.horizontal-card h3 {
        font-size: 1.2rem !important;
    }

    /* Popular badge fix */
    .popular-badge {
        top: 14px !important;
        right: -34px !important;
        font-size: 0.65rem !important;
        padding: 5px 36px !important;
    }

    /* TOS Section */
    .tos-section {
        padding: 20px 14px !important;
        margin-top: 25px !important;
    }

    .tos-section h3 {
        font-size: 1.1rem !important;
        padding: 8px 18px !important;
        width: auto !important;
        max-width: 90vw !important;
    }

    .tos-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .tos-card {
        padding: 16px !important;
    }

    .tos-card h4 {
        font-size: 0.95rem !important;
    }

    .tos-card p {
        font-size: 0.82rem !important;
    }

    /* === Queue Page (Dashboard Layout) === */
    .queue-hero, .page-hero {
        padding: 30px 20px !important;
        margin: 20px 10px 30px !important;
    }

    .queue-hero-title, .page-hero-title {
        font-size: 1.8rem !important;
    }

    .queue-hero-desc, .page-hero-desc {
        font-size: 0.9rem !important;
    }

    .queue-stats {
        flex-direction: column !important;
        padding: 20px !important;
        border-radius: 20px !important;
        gap: 15px !important;
        width: 100% !important;
    }

    .queue-stat-divider {
        width: 100% !important;
        height: 2px !important;
    }

    .queue-grid-new {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .ticket-header {
        padding: 16px 20px 8px !important;
    }

    .ticket-number .num {
        font-size: 1.8rem !important;
    }

    .ticket-customer {
        font-size: 1.15rem !important;
    }

    /* === Contact Page === */
    .contact-layout {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .contact-layout-left .contact-card {
        padding: 18px !important;
        gap: 14px !important;
    }

    .contact-layout-left .contact-icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.1rem !important;
    }

    .contact-layout-left .contact-card-title {
        font-size: 1rem !important;
    }

    .contact-layout-left .contact-card-desc {
        font-size: 0.78rem !important;
    }

    .contact-layout-right .contact-message {
        padding: 22px 16px !important;
    }

    .contact-message h3 {
        font-size: 1.15rem !important;
    }

    .contact-message p {
        font-size: 0.88rem !important;
    }

    /* === Footer === */
    footer {
        padding: 22px 18px 28px !important;
        font-size: 0.8rem !important;
    }

    footer::before {
        font-size: 0.7rem !important;
    }

    /* === Admin Buttons === */
    .admin-add-btn {
        padding: 12px 22px !important;
        font-size: 0.85rem !important;
        border-radius: 22px !important;
    }

    /* === Login Modal === */
    .login-modal-card {
        width: 92% !important;
        padding: 30px 20px !important;
        border-radius: 32px 18px 30px 22px / 22px 30px 18px 32px !important;
    }

    .login-modal-header h3 {
        font-size: 1.25rem !important;
    }

    .login-input-group input {
        padding: 12px 14px !important;
        font-size: 0.9rem !important;
    }

    .login-submit-btn {
        padding: 12px !important;
        font-size: 0.92rem !important;
    }
}

/* ——— SMALL PHONE (max 480px) ——— */
@media (max-width: 480px) {




    body {
        padding-bottom: 68px !important;
    }

    /* H2 Capsule — smaller */
    h2 {
        font-size: 1.15rem !important;
        padding: 8px 18px !important;
        border-radius: 18px !important;
        margin: 8px auto 20px !important;
        gap: 6px !important;
    }

    h2 i {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.85rem !important;
    }

    h2::before, h2::after {
        font-size: 0.8rem !important;
    }

    /* Home Card */
    .minimal-home-container {
        padding: 18px 8px !important;
    }

    .minimal-home-card {
        padding: 28px 16px !important;
        border-radius: 24px !important;
    }

    .minimal-avatar-wrapper {
        width: 100px !important;
        height: 100px !important;
    }

    .minimal-profile-area {
        gap: 10px !important;
        margin-bottom: 18px !important;
    }

    .minimal-status-badge {
        font-size: 0.72rem !important;
        padding: 5px 12px !important;
        border-radius: 16px !important;
    }

    .minimal-content-area {
        margin-bottom: 24px !important;
    }

    .minimal-content-area h1 {
        font-size: 1.3rem !important;
        line-height: 1.4 !important;
    }

    .minimal-content-area p {
        font-size: 0.82rem !important;
    }

    .cta-btn {
        padding: 12px 20px !important;
        font-size: 0.82rem !important;
        border-radius: 22px !important;
    }

    /* Prices */
    .price-card.horizontal-card .price {
        font-size: 1.5rem !important;
    }

    .price-card.horizontal-card .card-showcase {
        max-height: 160px !important;
    }

    .feature-list li {
        font-size: 0.8rem !important;
        gap: 6px !important;
    }

    .feature-list li::before {
        width: 18px !important;
        height: 18px !important;
        font-size: 0.6rem !important;
    }

    /* TOS */
    .tos-section h3 {
        font-size: 0.95rem !important;
        padding: 7px 14px !important;
    }

    .tos-section h3 i {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.85rem !important;
    }

    /* Queue */
    .queue-grid-new {
        gap: 15px !important;
    }
    
    .ticket-header {
        padding: 14px 16px 8px !important;
    }
    
    .ticket-body {
        padding: 8px 16px 12px !important;
    }
    
    .ticket-progress {
        padding: 12px 16px 18px !important;
    }

    /* Contact */
    .contact-layout-left .contact-card {
        flex-direction: row !important;
        text-align: left !important;
        padding: 14px !important;
        gap: 12px !important;
    }

    .contact-layout-left .contact-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem !important;
        margin-bottom: 0 !important;
    }

    .contact-layout-left .contact-card-title {
        font-size: 0.92rem !important;
    }

    .contact-layout-right .contact-message {
        padding: 18px 14px !important;
    }

    .contact-message h3 {
        font-size: 1.05rem !important;
    }

    /* Footer */
    footer {
        padding: 18px 14px 24px !important;
        font-size: 0.75rem !important;
    }

    /* Admin */
    .admin-add-btn {
        padding: 10px 18px !important;
        font-size: 0.8rem !important;
    }

    /* Login Modal */
    .login-modal-card {
        width: 95% !important;
        padding: 24px 16px !important;
        border-radius: 28px 16px 26px 20px / 20px 26px 16px 28px !important;
    }

    .login-modal-header h3 {
        font-size: 1.1rem !important;
    }
}

/* ——— VERY SMALL PHONE (max 360px) ——— */
@media (max-width: 360px) {




    .minimal-home-card {
        padding: 22px 14px !important;
    }

    .minimal-avatar-wrapper {
        width: 85px !important;
        height: 85px !important;
    }

    .minimal-content-area h1 {
        font-size: 1.15rem !important;
    }

    .minimal-content-area p {
        font-size: 0.78rem !important;
    }

    h2 {
        font-size: 1.05rem !important;
        padding: 7px 14px !important;
    }

    .tos-section h3 {
        font-size: 0.88rem !important;
    }

    .gallery-hero-title {
        font-size: 1.3rem !important;
    }

    .gallery-cta-card h3 {
        font-size: 1.05rem !important;
    }
}

/* ——— Safe area for notched phones (iPhone X+) ——— */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    body {
        padding-bottom: calc(75px + env(safe-area-inset-bottom));
    }

    @media (max-width: 480px) {
        body {
            padding-bottom: calc(68px + env(safe-area-inset-bottom)) !important;
        }
    }
}

/* ——— Landscape Phone Fix ——— */
@media (max-height: 500px) and (orientation: landscape) {
    .minimal-home-container {
        min-height: auto !important;
        padding: 15px 12px !important;
    }

    .minimal-home-card {
        padding: 20px 18px !important;
    }

    .minimal-avatar-wrapper {
        width: 80px !important;
        height: 80px !important;
    }

    .minimal-profile-area {
        flex-direction: row !important;
        gap: 16px !important;
        margin-bottom: 14px !important;
    }

    .gallery-hero {
        padding: 20px 15px 15px !important;
    }

    .gallery-hero-icon {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.2rem !important;
        margin-bottom: 10px !important;
    }

    .gallery-hero-title {
        font-size: 1.5rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   ✦ LANDING PAGE — Coco Coffee Reference Design
   Scoped to body.landing-page to prevent conflicts
   ═══════════════════════════════════════════════════════════ */

/* ── Reset: Kill ALL other styles on landing page ── */
body.landing-page {
    background: var(--bg-primary) !important;
    margin: 0 !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
}

/* ── Wrapper ── */
.landing-wrapper {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    box-sizing: border-box;
}

/* ── The Big Card ── */
.landing-card {
    width: 100%;
    max-width: 1200px;
    background: #fffdf8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M16 0v16H0V0h16zm-1 1H1v14h14V1z' fill='%23f5ede6' fill-opacity='0.65'/%3E%3C/svg%3E") !important; /* Japanese grid paper */
    border: 4px solid var(--handcrafted-outline) !important; /* Thick ink outline */
    border-radius: 40px 24px 38px 26px / 26px 38px 24px 40px !important; /* Hand-cut organic paper look */
    box-shadow: 14px 14px 0px var(--handcrafted-outline) !important; /* Flat solid 3D shadow - NO blurry AI glow */
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 600px;
    overflow: visible !important; /* Allow tape to hang outside */
}

.landing-card::before {
    display: none !important;
}

/* ── Nav inside card ── */
.landing-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 35px;
    position: relative;
    z-index: 10;
}

.landing-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #4a3443;
    font-family: 'Quicksand', var(--font-heading), sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
}

.landing-logo-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(74, 52, 67, 0.15);
}

.landing-nav-links {
    display: flex;
    list-style: none;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.landing-nav-links a {
    color: rgba(74, 52, 67, 0.7);
    text-decoration: none;
    font-family: 'Quicksand', var(--font-heading), sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 8px 16px;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.landing-nav-links a:hover {
    color: #4a3443;
    background: rgba(74, 52, 67, 0.06);
}

.landing-nav-links a.active {
    color: #4a3443;
}

.landing-nav-links a.nav-accent {
    background: var(--pink-accent, #f48fb1);
    color: #fff;
    padding: 8px 22px;
    border-radius: 20px;
}

.landing-nav-links a.nav-accent:hover {
    background: var(--pink-deep, #e91e63);
    transform: translateY(-1px);
}

.admin-btn-landing {
    background: rgba(74, 52, 67, 0.05);
    color: rgba(74, 52, 67, 0.7);
    border: 1px solid rgba(74, 52, 67, 0.1);
    padding: 8px 18px;
    border-radius: 20px;
    font-family: 'Quicksand', var(--font-heading), sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.admin-btn-landing:hover {
    background: rgba(74, 52, 67, 0.1);
    color: #4a3443;
}

/* ── Main Body (Left + Right) ── */
.landing-body {
    display: flex;
    flex: 1;
    padding: 35px 35px 35px;
    gap: 0;
    position: relative;
}

/* ── Left: Text Area ── */
.landing-text {
    flex: 0 0 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 30px 40px 10px;
    z-index: 5;
}

.landing-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1a1a1a;
    font-family: 'Quicksand', var(--font-heading), sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.landing-status .status-pulse-dot {
    width: 8px;
    height: 8px;
    background: #81c784;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(129, 199, 132, 0.5);
    animation: greenPulse 2s infinite;
}

.landing-title {
    font-family: 'Quicksand', var(--font-heading), sans-serif !important;
    font-size: 4.5rem !important;
    font-weight: 700 !important;
    color: #111111 !important;
    line-height: 1.05 !important;
    margin: 0 0 24px 0 !important;
    letter-spacing: -1px !important;
    /* Kill capsule overrides */
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: block !important;
    text-align: left !important;
}

.landing-desc {
    color: #333333 !important;
    font-family: 'Quicksand', var(--font-heading), sans-serif;
    font-size: 0.95rem;
    line-height: 1.8;
    margin: 0 0 30px 0 !important;
    max-width: 380px;
    font-weight: 500;
}

/* ── CTA Button ── */
.landing-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--pink-accent, #f48fb1);
    color: #fff;
    font-family: 'Quicksand', var(--font-heading), sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 14px 30px;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 8px 25px rgba(244, 143, 177, 0.35);
    margin-bottom: 40px;
    width: fit-content;
}

.landing-cta:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 12px 35px rgba(244, 143, 177, 0.5);
    background: var(--pink-deep, #e91e63);
}

.landing-cta i {
    transition: transform 0.3s ease;
}

.landing-cta:hover i {
    transform: translateX(4px);
}

/* ── Social Icons ── */
.landing-socials {
    display: flex;
    gap: 14px;
    margin-top: auto;
}

.landing-socials a {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(74, 52, 67, 0.05);
    color: rgba(74, 52, 67, 0.6);
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(74, 52, 67, 0.1);
}

.landing-socials a:hover {
    background: rgba(74, 52, 67, 0.1);
    color: #4a3443;
    transform: translateY(-2px);
    border-color: rgba(74, 52, 67, 0.15);
}

/* ── Right: Image with organic blob mask ── */
.landing-image-area {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0 10px 20px;
    position: relative;
}

.landing-image-blob {
    width: 100%;
    height: 100%;
    min-height: 400px;
    background: url('2.jpg') center/cover no-repeat;
    /* Organic blob shape like the reference */
    border-radius: 48% 52% 55% 45% / 50% 45% 55% 50%;
    box-shadow:
        0 15px 45px rgba(0, 0, 0, 0.2),
        inset 0 0 30px rgba(0, 0, 0, 0.05);
    transition: border-radius 6s ease-in-out;
    animation: blobMorph 12s ease-in-out infinite;
}

@keyframes blobMorph {
    0% { border-radius: 48% 52% 55% 45% / 50% 45% 55% 50%; }
    25% { border-radius: 55% 45% 48% 52% / 45% 55% 50% 50%; }
    50% { border-radius: 45% 55% 52% 48% / 52% 48% 45% 55%; }
    75% { border-radius: 52% 48% 45% 55% / 48% 52% 55% 45%; }
    100% { border-radius: 48% 52% 55% 45% / 50% 45% 55% 50%; }
}

/* ── Admin button visibility ── */
body.landing-page .admin-add-btn {
    display: none;
}

body.landing-page.admin-mode .admin-add-btn {
    display: inline-flex;
    margin-top: 20px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* ═══════════════════════════════════════════════════
   ✦ Landing Page — Responsive Design
   ═══════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 1024px) {
    .landing-wrapper {
        padding: 20px;
    }
    .landing-card {
        border-radius: 28px;
    }
    .landing-title {
        font-size: 3.5rem !important;
    }
    .landing-nav-links a {
        font-size: 0.82rem;
        padding: 7px 12px;
    }
    .landing-body {
        flex-direction: column !important;
        padding: 40px !important;
        gap: 40px !important;
    }
    .landing-text {
        flex: none !important;
        width: 100% !important;
        text-align: center !important;
    }
    .landing-image-area {
        flex: none !important;
        width: 100% !important;
        padding: 0 !important;
        justify-content: center !important;
    }
    .home-grid-4 {
        margin: 0 auto;
    }
    .contact-layout {
        flex-direction: column !important;
        gap: 40px !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    body.landing-page {
        padding-bottom: 0 !important;
    }
    .landing-wrapper {
        padding: 12px;
        align-items: flex-start;
    }
    .landing-card {
        border-radius: 24px;
        min-height: auto;
    }
    .landing-nav {
        padding: 16px 20px;
        flex-wrap: wrap;
        gap: 10px;
    }
    .landing-nav-links {
        order: 3;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 4px;
    }
    .landing-nav-links a {
        font-size: 0.78rem;
        padding: 6px 10px;
    }
    .admin-btn-landing {
        font-size: 0.78rem;
        padding: 6px 14px;
    }
    .landing-body {
        flex-direction: column;
        padding: 20px 20px 25px;
    }
    .landing-text {
        flex: none;
        padding: 20px 0;
        align-items: center;
        text-align: center;
    }
    .landing-title {
        font-size: 2.8rem !important;
        text-align: center !important;
    }
    .landing-desc {
        text-align: center;
        max-width: 100%;
    }
    .landing-cta {
        align-self: center;
    }
    .landing-socials {
        justify-content: center;
    }
    .landing-image-area {
        padding: 0;
    }
    .landing-image-blob {
        min-height: 280px;
        border-radius: 30px;
        animation: none;
    }
}

/* Small phone */
@media (max-width: 420px) {
    .landing-wrapper {
        padding: 8px;
    }
    .landing-title {
        font-size: 2.2rem !important;
    }
    .landing-card {
        border-radius: 20px;
    }
    .landing-nav {
        padding: 12px 14px;
    }
    .landing-body {
        padding: 0 14px 20px;
    }
    .landing-image-blob {
        min-height: 220px;
    }
}

/* ═══════════════════════════════════════════════════════════
   ✦ REVIEWS PAGE — Custom Premium Scrapbook Review Designs
   ═══════════════════════════════════════════════════════════ */
.reviews-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 30px;
    margin-top: 20px;
}
@media (max-width: 992px) {
    .reviews-layout {
        grid-template-columns: 1fr;
    }
}
.reviews-card {
    background: #fffdf8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M16 0v16H0V0h16zm-1 1H1v14h14V1z' fill='%23f5ede6' fill-opacity='0.55'/%3E%3C/svg%3E") !important;
    border: 2.5px solid var(--handcrafted-outline) !important;
    box-shadow: 6px 6px 0px var(--handcrafted-outline) !important;
    border-radius: 24px;
    padding: 24px;
    position: relative;
}
/* Lock Card style */
.lock-card {
    text-align: center;
    padding: 35px 24px;
}
.lock-icon {
    width: 60px;
    height: 60px;
    background: #fff2f4;
    border: 2px solid var(--handcrafted-outline);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #ec407a;
    margin-bottom: 20px;
    box-shadow: 0 4px 0 var(--handcrafted-outline);
}
.lock-card h4 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
}
.lock-card p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 24px;
}
.reviews-login-btn {
    background: #ec407a !important;
    color: #ffffff !important;
    border: 2.5px solid var(--handcrafted-outline) !important;
    border-radius: 16px !important;
    padding: 12px 20px !important;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.95rem;
    box-shadow: 0px 4px 0px var(--handcrafted-outline) !important;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.reviews-login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0px 6px 0px var(--handcrafted-outline) !important;
    background: #ff5c8d !important;
}
.reviews-login-btn:active {
    transform: translateY(2px);
    box-shadow: 0px 1px 0px var(--handcrafted-outline) !important;
}
/* Form Card style */
.form-card {
    border-radius: 24px;
}
.form-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
    border-bottom: 2px dashed var(--handcrafted-outline);
    padding-bottom: 16px;
}
.form-header h4 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-primary);
}
.user-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    background: #f0f7f6;
    color: #00796b;
    border: 1.5px solid #00796b;
    padding: 4px 10px;
    border-radius: 20px;
    align-self: flex-start;
    font-weight: 700;
    font-family: var(--font-body);
}
.review-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.review-input-group label {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
}
.review-input-group input[type="text"],
.review-input-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid rgba(156, 123, 142, 0.3);
    border-radius: 14px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.8);
    outline: none;
    transition: all 0.3s ease;
}
.review-input-group input[type="text"]:focus,
.review-input-group textarea:focus {
    border-color: var(--pink-accent);
    background: #ffffff;
    box-shadow: 0 0 10px rgba(244, 143, 177, 0.15);
}
/* Star Selector styling */
.star-selector {
    display: flex;
    gap: 8px;
    font-size: 1.5rem;
    cursor: pointer;
    color: #d1c4e9;
    padding: 4px 0;
}
.star-selector i.active {
    color: #ffb300;
    filter: drop-shadow(0 2px 0 rgba(74, 51, 71, 0.15));
}
.star-selector i:hover {
    transform: scale(1.15);
}
/* Form submit button */
.reviews-submit-btn {
    width: 100%;
    background: #ec407a !important;
    color: #ffffff !important;
    border: 2.5px solid var(--handcrafted-outline) !important;
    border-radius: 16px !important;
    padding: 12px 16px !important;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.95rem;
    box-shadow: 0px 4px 0px var(--handcrafted-outline) !important;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}
.reviews-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0px 6px 0px var(--handcrafted-outline) !important;
    background: #ff5c8d !important;
}
.reviews-submit-btn:active {
    transform: translateY(2px);
    box-shadow: 0px 1px 0px var(--handcrafted-outline) !important;
}
/* Right Section: Reviews Feed */
.reviews-feed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 3px solid var(--handcrafted-outline);
    padding-bottom: 12px;
}
.reviews-feed-header h3 {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-primary);
}
.reviews-count {
    background: #ffd1d8;
    border: 1.5px solid var(--handcrafted-outline);
    border-radius: 12px;
    padding: 4px 12px;
    font-size: 0.8rem;
    font-weight: 800;
    font-family: var(--font-heading);
    color: #ec407a;
    box-shadow: 0 2.5px 0 var(--handcrafted-outline);
}
/* Reviews List */
.reviews-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.reviews-loading {
    text-align: center;
    padding: 50px 0;
    font-family: var(--font-heading);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 1.05rem;
}
/* Review Cards items */
.review-card-item {
    background: #fffdf8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M16 0v16H0V0h16zm-1 1H1v14h14V1z' fill='%23f5ede6' fill-opacity='0.4'/%3E%3C/svg%3E") !important;
    border: 2px solid var(--handcrafted-outline);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 4px 4px 0px var(--handcrafted-outline);
    position: relative;
    transition: all 0.3s ease;
}
.review-card-item:hover {
    transform: translateY(-2px);
    box-shadow: 6px 6px 0px var(--handcrafted-outline);
}
.review-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}
.review-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}
.review-avatar {
    font-size: 2.2rem;
    color: var(--pink-accent);
    display: flex;
    align-items: center;
}
.review-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.review-name {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-primary);
}
.review-verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: #00796b;
    font-weight: 700;
}
.review-date-area {
    display: flex;
    align-items: center;
    gap: 12px;
}
.review-date {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    color: var(--text-light);
    font-weight: 600;
}
.review-delete-btn {
    background: transparent;
    border: none;
    color: var(--text-light);
    font-size: 0.9rem;
    cursor: pointer;
    transition: color 0.2s ease;
    padding: 4px;
}
.review-delete-btn:hover {
    color: #d32f2f;
}
.review-stars-row {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
}
.review-stars-row i {
    font-size: 0.88rem;
}
.review-stars-row i.gold-star {
    color: #ffb300;
}
.review-stars-row i.gray-star {
    color: #e0d8dc;
}
.review-comment {
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--text-primary);
    line-height: 1.6;
    word-break: break-word;
}
/* Blank State styling */
.reviews-blank-state {
    text-align: center;
    padding: 60px 20px;
    border: 2px dashed rgba(156, 123, 142, 0.4);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.3);
}
.blank-icon {
    font-size: 3rem;
    color: var(--pink-accent);
    margin-bottom: 16px;
    opacity: 0.7;
}
.reviews-blank-state h4 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.reviews-blank-state p {
    font-size: 0.88rem;
    color: var(--text-secondary);
}
/* ═══════════════════════════════════════════════════════════════
   ✦ Clean & Minimal Override ✦
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* Muted, cleaner palette */
    --pink-light: #fdf5f7;
    --pink-medium: #fadce6;
    --pink-accent: #f48fb1; /* Kept for subtle highlights */
    --pink-deep: #d97e9f;
    --lavender: #f7f3fa;
    --lavender-deep: #ce93d8;
    --mint: #f4fbfb;
    --mint-deep: #80cbc4;
    --cream: #fdfdfc;
    --white: #ffffff;
    --bg-primary: #FAFAFA; /* Off-white background */
    --bg-secondary: #FFFFFF;
    
    /* Darker, softer text */
    --text-primary: #2C2C2C;
    --text-secondary: #595959;
    --text-light: #888888;
    
    /* Very subtle shadows */
    --shadow-pink: rgba(0, 0, 0, 0.04);
    --shadow-lavender: rgba(0, 0, 0, 0.03);
    
    /* Normal animations */
    --transition-bounce: ease;
    --transition-smooth: ease-in-out;
}

/* 1. Backgrounds & Body */
body {
    background: var(--bg-primary);
    color: var(--text-primary);
}
body::before {
    display: none !important; /* Remove grain */
}

/* 2. Hide noisy decorations */
.washi-tape,
.mascot-decorations,
.mascot-deco-item,
h2::before,
h2::after,
.gallery-cta-sparkle,
.footer-wave,
.status-pulse-dot,
#home::before,
#home::after,
.page-hero-icon {
    display: none !important;
}

/* 3. Simplify Headings */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}
h2 {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none !important;
    padding: 0;
    margin: 20px auto 40px;
    animation: none;
}
h2:hover {
    transform: none;
}
h2 i {
    background: var(--pink-light);
    color: var(--pink-deep) !important;
    border: none;
    box-shadow: none;
}
h2:hover i {
    transform: none;
    background: var(--pink-medium);
    box-shadow: none;
}

/* 4. Simplify Cards & Avatar */
.mascot-area {
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    transform: none;
}
.mascot-area::before,
.mascot-area::after {
    display: none;
}
.mascot-area:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.08);
}
.mascot-avatar {
    border: none;
    border-radius: 12px;
    box-shadow: none;
}
.mascot-area:hover .mascot-avatar {
    transform: none;
}

/* 5. Clean Navigation Dock */
header {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 4px 25px rgba(0,0,0,0.05);
    padding: 8px 12px;
}
nav a {
    background: transparent;
    color: var(--text-light);
    font-weight: 500;
}
nav a:hover,
nav a.active {
    background: var(--pink-light);
    color: var(--pink-deep);
    box-shadow: none;
    transform: none;
}
nav a.active::after {
    display: none; /* Remove active dot */
}
nav a i {
    color: inherit;
}
nav a:hover i {
    transform: none;
}

/* 6. Clean Gallery & Queue Cards */
.gallery-item {
    border: 1px solid rgba(0,0,0,0.04);
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    border-radius: 12px;
}
.gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
}
.queue-ticket,
.price-card,
.contact-card,
.login-modal-card {
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    border-radius: 16px;
}
.queue-ticket:hover,
.price-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
    border-color: rgba(0,0,0,0.08);
}
.ticket-number, .ticket-header {
    background: transparent;
    border: none;
    box-shadow: none;
}
.price-tier {
    background: transparent;
    border: none;
    box-shadow: none;
}
.price-card::before, .price-card::after {
    display: none;
}

/* 7. Buttons */
.cta-btn, .login-submit-btn, .admin-add-btn {
    background: var(--white);
    color: var(--text-primary);
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    font-weight: 500;
}
.cta-btn:hover, .login-submit-btn:hover, .admin-add-btn:hover {
    background: var(--bg-primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.05);
    color: var(--text-primary);
}
.primary-cta {
    background: var(--pink-deep);
    color: var(--white);
    border: none;
}
.primary-cta:hover {
    background: var(--pink-accent);
    color: var(--white);
}

/* 8. Miscellaneous Cleanups & Block Spacing */
.page-hero, .queue-hero {
    background: url('bg-header.png') top center/cover no-repeat !important;
    border: 4px solid var(--handcrafted-outline) !important;
    border-radius: 28px !important;
    box-shadow: 10px 10px 0px var(--handcrafted-outline) !important;
    margin: 40px auto 60px !important;
    width: 90% !important;
    max-width: 1200px !important;
}
/* Enhanced Block Spacing */
.container, .queue-container, .showcase-container {
    padding: 30px 0 60px !important; /* More breathing room */
}
.filter-pills {
    margin-bottom: 40px !important;
}
.tos-section {
    margin-top: 70px !important;
}
.gallery-cta-section {
    margin-top: 50px !important;
    padding-bottom: 60px !important;
}
.prices-grid {
    gap: 40px !important;
}
.contact-layout {
    gap: 60px !important;
}
.gallery-stats {
    background: transparent;
    border: none;
    box-shadow: none;
    margin-bottom: 50px !important;
}
.filter-pill {
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: none;
}
.filter-pill:hover, .filter-pill.active {
    background: var(--pink-light);
    color: var(--pink-deep);
    border-color: var(--pink-medium);
}

/* ═══════════════════════════════════════════════════════════════
   ✦ Home Collage Layout ✦
   ═══════════════════════════════════════════════════════════════ */
.landing-image-area {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100%;
    min-height: 400px;
}

.home-collage {
    position: relative;
    width: 100%;
    max-width: 450px;
    height: 400px;
}

.collage-item {
    position: absolute;
    border-radius: 20px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    border: 4px solid #ffffff;
    /* Transition is handled via JS for dynamic effects */
}

/* Back left */
.collage-item.item-1 {
    width: 220px;
    height: 280px;
    top: 40px;
    left: -20px;
    transform: rotate(-10deg);
    z-index: 1;
}

/* Back right */
.collage-item.item-2 {
    width: 200px;
    height: 260px;
    top: 20px;
    right: 0;
    transform: rotate(12deg);
    z-index: 2;
}

/* Front center */
.collage-item.item-3 {
    width: 260px;
    height: 320px;
    bottom: 0;
    left: 50%;
    margin-left: -130px;
    transform: rotate(-3deg);
    z-index: 3;
}

.collage-item:hover {
    transform: scale(1.08) rotate(0deg) translateY(-15px) !important;
    z-index: 10;
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

/* ═══════════════════════════════════════════════════════════════
   ✦ Home 4-Image Grid ✦
   ═══════════════════════════════════════════════════════════════ */
.home-grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 15px;
    width: 100%;
    max-width: 480px;
    height: 480px;
    position: relative;
    padding: 10px;
}

.grid-item {
    border-radius: 16px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    border: 3px solid #ffffff;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
    background-color: #fce4ec; /* light pink placeholder */
}

/* Add slight rotations to make it look organic like polaroids */
.grid-item.item-1 { transform: rotate(-2deg); }
.grid-item.item-2 { transform: rotate(3deg) translateY(10px); }
.grid-item.item-3 { transform: rotate(1deg) translateX(-5px); }
.grid-item.item-4 { transform: rotate(-3deg) translateY(-8px); }

.grid-item:hover {
    transform: scale(1.08) rotate(0deg) !important;
    z-index: 10;
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}



/* ═══════════════════════════════════════════════════════════════
   ✦ White & Muted Pastel Redesign ✦
   ═══════════════════════════════════════════════════════════════ */
:root {
    /* White & Muted Clean Palette */
    --bg-primary: #FCFCFC;      /* Clean off-white */
    --bg-secondary: #F5F5F7;    /* Soft grey-white */
    
    /* Muted Pastels */
    --pink-light: #F2EBEF;      /* Muted pale grey-pink */
    --pink-medium: #E6D6DF;     /* Soft dusty rose */
    --pink-accent: #D4B5C6;     /* Muted pastel pink-purple */
    --pink-deep: #A68598;       /* Darker muted rose */
    
    /* Outlines & Lines */
    --handcrafted-outline: #A68598; /* Muted rose outline instead of harsh dark */
    
    /* Text Colors */
    --text-primary: #333333;    /* Soft black/dark grey */
    --text-secondary: #666666;  /* Medium grey */
    --text-light: #999999;      /* Light grey */
    
    /* Shadows */
    --shadow-pink: rgba(166, 133, 152, 0.15); /* Softer shadow matching outline */
    --shadow-lavender: rgba(166, 133, 152, 0.10);
    
    /* Keep other vars */
    --lavender: #EBEAFA;
    --lavender-deep: #B5B2DE;
    --mint: #E9F5F2;
    --mint-deep: #8FBCAE;
    --cream: #FAF9F5;
    --white: #ffffff;
}

/* Update Body */
body {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Update The Big Card */
.landing-card {
    /* Change grid paper to be very subtle grey instead of beige */
    background: #FAFAFA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M16 0v16H0V0h16zm-1 1H1v14h14V1z' fill='%23EEEEF0' fill-opacity='0.6'/%3E%3C/svg%3E") !important;
    border: 4px solid var(--handcrafted-outline) !important;
    box-shadow: 14px 14px 0px var(--handcrafted-outline) !important;
}

/* Adjust Sidebar/Nav colors */
header {
    background: var(--white) !important;
    border-right: 4px solid var(--handcrafted-outline) !important;
}

/* Adjust Text Headings */
h1, h2, h3, h4, .landing-title, .admin-editable {
    color: var(--text-primary) !important;
}

/* Muted Buttons */
.cta-btn, .login-submit-btn, .admin-add-btn, .primary-cta {
    background: var(--pink-deep) !important;
    color: var(--white) !important;
    border: none !important;
}

.cta-btn:hover, .login-submit-btn:hover, .admin-add-btn:hover, .primary-cta:hover {
    background: var(--pink-accent) !important;
}

/* Secondary / Admin button */
.admin-btn {
    background: var(--pink-accent) !important;
    color: var(--white) !important;
}

/* Navigation links */
nav ul li a {
    color: var(--text-secondary) !important;
}

nav ul li a:hover {
    background: var(--pink-light) !important;
    color: var(--pink-deep) !important;
}

nav ul li a.active {
    background: var(--pink-medium) !important;
    color: var(--text-primary) !important;
    border: 2px solid var(--pink-deep) !important;
}

/* Profile Image Border */
.nav-brand-img {
    border: 3px solid var(--handcrafted-outline) !important;
}

/* 4-Image Grid Placeholder Adjustment */
.grid-item {
    background-color: var(--pink-light) !important;
    border: 4px solid var(--white) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.04) !important;
}

.grid-item:hover {
    box-shadow: 0 15px 35px rgba(0,0,0,0.08) !important;
}

/* Social icons */
.landing-socials a {
    background: var(--pink-light) !important;
    color: var(--pink-deep) !important;
    border: 1px solid var(--pink-medium) !important;
}

.landing-socials a:hover {
    background: var(--pink-medium) !important;
    color: var(--text-primary) !important;
}



/* ═══════════════════════════════════════════════════════════════
   ✦ Sweet Pastel Palette (User Provided) ✦
   ═══════════════════════════════════════════════════════════════ */
:root {
    /* Map user's colors */
    --bg-primary: #FFF8EF;      /* Light cream background */
    --bg-secondary: #FFF4EB;    /* Warm cream for cards */
    
    --pink-light: #FFF4EB;      /* Cream */
    --pink-medium: #F2D6C9;     /* Soft peach */
    --pink-accent: #FFB6CB;     /* Bright pastel pink */
    --pink-deep: #FFB6CB;       /* Same pink for deep */
    
    --handcrafted-outline: #F2D6C9; /* Peach Outline */
    
    /* Text Colors - adjusted for readability against light backgrounds */
    --text-primary: #5A474A;    
    --text-secondary: #8C7579;  
    --text-light: #B5A1A4;      
}

/* Update Body */
body {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Update The Big Card */
.landing-card {
    background: var(--bg-secondary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M16 0v16H0V0h16zm-1 1H1v14h14V1z' fill='%23F2D6C9' fill-opacity='0.4'/%3E%3C/svg%3E") !important;
    border: 4px solid var(--handcrafted-outline) !important;
    box-shadow: 14px 14px 0px var(--handcrafted-outline) !important;
}

/* Update Footer */
footer {
    background: var(--pink-medium) !important;
    color: var(--text-primary) !important;
    border-top: none !important;
}
.footer-wave svg path {
    fill: var(--pink-medium) !important;
}

/* Sidebar/Nav Container */
header {
    background: transparent !important;
    border: none !important;
}
.nav-container {
    background: var(--bg-secondary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M16 0v16H0V0h16zm-1 1H1v14h14V1z' fill='%23F2D6C9' fill-opacity='0.4'/%3E%3C/svg%3E") !important;
}

/* Buttons */
.cta-btn, .login-submit-btn, .admin-add-btn, .primary-cta, .landing-cta, .filter-pill, .status-capsule-button,
.admin-btn, .nav-container .admin-btn, .admin-btn-drawer {
    background: var(--pink-accent) !important;
    color: #ffffff !important;
}
.cta-btn:hover, .login-submit-btn:hover, .admin-add-btn:hover, .primary-cta:hover, .landing-cta:hover, .filter-pill:hover, .status-capsule-button:hover,
.admin-btn:hover, .nav-container .admin-btn:hover, .admin-btn-drawer:hover {
    background: #FF9FB9 !important; /* Slightly darker pink for hover */
}

/* Active Filter Pill */
.filter-pill.active {
    background: var(--pink-accent) !important;
    color: #ffffff !important;
    transform: translateY(2px) !important;
    box-shadow: 2px 2px 0px var(--handcrafted-outline) !important;
}

/* Hide scrollbars */
::-webkit-scrollbar {
    display: none;
}
* {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}



/* 4-Image Grid Background */
.grid-item {
    background-color: var(--bg-secondary) !important;
    border: 4px solid #ffffff !important;
    box-shadow: 0 8px 20px rgba(242, 214, 201, 0.6) !important;
}

/* Text Overrides */
h1, h2, h3, h4, .landing-title, .admin-editable {
    color: var(--text-primary) !important;
}

nav ul li a {
    color: var(--text-secondary) !important;
}
nav ul li a:hover {
    background: var(--bg-primary) !important;
    color: var(--pink-accent) !important;
}
nav ul li a.active {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border: 2px solid var(--pink-accent) !important;
}

/* Profile Image Border */
.nav-brand-img {
    border: 3px solid var(--handcrafted-outline) !important;
}

/* Social icons */
.landing-socials a {
    background: var(--bg-secondary) !important;
    color: var(--pink-accent) !important;
    border: 2px solid var(--pink-medium) !important;
}

.landing-socials a:hover {
    background: var(--pink-medium) !important;
    color: #ffffff !important;
}