/*
 * Utility Classes
 */

/* ── Layout ────────────────────────────────────── */
.wishly-container {
    max-width: var(--w-container-max);
    margin: 0 auto;
    padding: 0 var(--w-container-padding);
}

.wishly-section {
    padding: var(--w-space-24) 0;
}

.wishly-section--sm {
    padding: var(--w-space-16) 0;
}

/* ── Flexbox ───────────────────────────────────── */
.wishly-flex { display: flex; }
.wishly-flex-col { display: flex; flex-direction: column; }
.wishly-flex-center { display: flex; align-items: center; justify-content: center; }
.wishly-flex-between { display: flex; align-items: center; justify-content: space-between; }
.wishly-items-center { align-items: center; }
.wishly-items-start { align-items: flex-start; }
.wishly-justify-center { justify-content: center; }
.wishly-flex-wrap { flex-wrap: wrap; }
.wishly-flex-1 { flex: 1; }

/* ── Grid ──────────────────────────────────────── */
.wishly-grid {
    display: grid;
    gap: var(--w-space-6);
}

.wishly-grid--2 { grid-template-columns: repeat(2, 1fr); }
.wishly-grid--3 { grid-template-columns: repeat(3, 1fr); }
.wishly-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
    .wishly-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .wishly-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

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

/* ── Gap ───────────────────────────────────────── */
.wishly-gap-1 { gap: var(--w-space-1); }
.wishly-gap-2 { gap: var(--w-space-2); }
.wishly-gap-3 { gap: var(--w-space-3); }
.wishly-gap-4 { gap: var(--w-space-4); }
.wishly-gap-6 { gap: var(--w-space-6); }
.wishly-gap-8 { gap: var(--w-space-8); }

/* ── Text alignment ────────────────────────────── */
.wishly-text-center { text-align: center; }
.wishly-text-left { text-align: left; }
.wishly-text-right { text-align: right; }

/* ── Margin/Padding helpers ────────────────────── */
.wishly-mx-auto { margin-left: auto; margin-right: auto; }
.wishly-mt-4 { margin-top: var(--w-space-4); }
.wishly-mt-6 { margin-top: var(--w-space-6); }
.wishly-mt-8 { margin-top: var(--w-space-8); }
.wishly-mb-4 { margin-bottom: var(--w-space-4); }
.wishly-mb-6 { margin-bottom: var(--w-space-6); }
.wishly-mb-8 { margin-bottom: var(--w-space-8); }

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

.wishly-hidden { display: none !important; }

@media (max-width: 768px) {
    .wishly-hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
    .wishly-hide-desktop { display: none !important; }
}

/* ── Relative positioning ──────────────────────── */
.wishly-relative { position: relative; }
.wishly-overflow-hidden { overflow: hidden; }

/* ── Animate on scroll ─────────────────────────── */
.wishly-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--w-duration-slow) var(--w-ease-out),
                transform var(--w-duration-slow) var(--w-ease-out);
}

.wishly-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.wishly-reveal--delay-1 { transition-delay: 100ms; }
.wishly-reveal--delay-2 { transition-delay: 200ms; }
.wishly-reveal--delay-3 { transition-delay: 300ms; }
.wishly-reveal--delay-4 { transition-delay: 400ms; }

/* ── Safe area support for notched devices ────── */
.wishly-container {
    padding-left: max(var(--w-container-padding), env(safe-area-inset-left));
    padding-right: max(var(--w-container-padding), env(safe-area-inset-right));
}

.wishly-footer {
    padding-bottom: max(var(--w-space-8), env(safe-area-inset-bottom));
}

/* ── Container Size Variants ─────────────────── */
.wishly-container--narrow { max-width: 640px; }
.wishly-container--sm { max-width: 700px; }
.wishly-container--md { max-width: 800px; }
.wishly-container--wide { max-width: 900px; }

/* ── WhatsApp Button ─────────────────────────── */
.wishly-btn--whatsapp {
    background: #25D366;
    color: #fff;
    border: none;
}

/* ── Success State (shared) ──────────────────── */
.wishly-success-emoji {
    font-size: 4rem;
    margin-bottom: var(--w-space-6);
}

.wishly-success-title {
    font-size: var(--w-text-3xl);
    font-weight: 800;
    margin-bottom: var(--w-space-2);
}

.wishly-success-text {
    color: var(--w-text-secondary);
    margin-bottom: var(--w-space-4);
}

.wishly-success-text--lg {
    margin-bottom: var(--w-space-6);
}

.wishly-success-text--xl {
    margin-bottom: var(--w-space-8);
}

/* ── Empty State (shared) ────────────────────── */
.wishly-empty-emoji {
    font-size: 3rem;
    margin-bottom: var(--w-space-4);
}

.wishly-empty-text {
    color: var(--w-text-secondary);
}

/* ── Quick Link Emoji ────────────────────────── */
.wishly-quick-link-emoji {
    font-size: 1.25rem;
}

/* ── Panel Spacing ───────────────────────────── */
.wishly-panel--spaced {
    margin-bottom: var(--w-space-6);
}

/* ── XP Bar Card ─────────────────────────────── */
.wishly-xp-card {
    margin-bottom: var(--w-space-6);
    padding: var(--w-space-5) var(--w-space-6);
}

.wishly-xp-card__header {
    margin-bottom: var(--w-space-3);
}

/* ── XP Detail Text ──────────────────────────── */
.wishly-xp-detail {
    font-size: var(--w-text-xs);
    color: var(--w-text-tertiary);
    margin-top: var(--w-space-2);
}

/* ── Stat Card Icon Variants ─────────────────── */
.wishly-stat-card__icon--success {
    background: var(--w-success-light);
    color: var(--w-success);
}

.wishly-stat-card__icon--warning {
    background: var(--w-warning-light);
    color: var(--w-warning);
}

.wishly-stat-card__icon--info {
    background: var(--w-info-light);
    color: var(--w-info);
}

/* ── Section Spacing ─────────────────────────── */
.wishly-section-title--mb {
    margin-bottom: var(--w-space-4);
}

/* ── Settings Row ────────────────────────────── */
.wishly-setting-row {
    display: flex;
    gap: var(--w-space-3);
    margin-top: var(--w-space-2);
}

.wishly-setting-row__input {
    flex: 1;
}

.wishly-setting-group {
    margin-top: var(--w-space-5);
}

.wishly-setting-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wishly-setting-desc {
    font-size: var(--w-text-xs);
    color: var(--w-text-tertiary);
    margin-top: var(--w-space-1);
}

.wishly-setting-divider {
    border-top: 1px solid var(--w-border-primary);
    padding-top: var(--w-space-4);
    margin-top: var(--w-space-4);
}

/* ── Sign Out ────────────────────────────────── */
.wishly-signout {
    text-align: center;
    margin: var(--w-space-8) 0;
}

/* ── Flex Actions ────────────────────────────── */
.wishly-actions-row {
    display: flex;
    gap: var(--w-space-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Wish Code Display ───────────────────────── */
.wishly-wish-code-row {
    margin-bottom: var(--w-space-8);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--w-space-3);
}

.wishly-wish-code {
    font-size: var(--w-text-lg);
    color: var(--w-accent);
}

.wishly-wish-code-copy {
    font-size: var(--w-text-xs);
}

/* ── 404 Page ────────────────────────────────── */
.wishly-404 {
    min-height: calc(100vh - var(--w-header-height) - 200px);
    display: flex;
    align-items: center;
}

.wishly-404__emoji {
    font-size: 6rem;
    margin-bottom: var(--w-space-6);
}

.wishly-404__title {
    font-size: var(--w-text-5xl);
    font-weight: 900;
    margin-bottom: var(--w-space-4);
}

.wishly-404__subtitle {
    margin-bottom: var(--w-space-8);
}

/* ── Skeleton Variants ───────────────────────── */
.wishly-skeleton--step {
    height: 60px;
    border-radius: var(--w-radius-2xl);
    margin-bottom: var(--w-space-3);
}

.wishly-skeleton--step:last-child {
    margin-bottom: 0;
}

.wishly-skeleton--history {
    height: 120px;
    border-radius: var(--w-radius-2xl);
}

.wishly-skeleton--leaderboard {
    height: 40px;
    border-radius: var(--w-radius-lg);
    margin-bottom: var(--w-space-2);
}

.wishly-skeleton--leaderboard:last-child {
    margin-bottom: 0;
}

.wishly-skeleton--feed {
    height: 90px;
    border-radius: var(--w-radius-xl);
    margin-bottom: var(--w-space-3);
}

.wishly-skeleton--suggestion {
    height: 120px;
    border-radius: var(--w-radius-xl);
    margin-bottom: var(--w-space-4);
}

.wishly-skeleton--dream {
    height: 80px;
    border-radius: var(--w-radius-xl);
    margin-bottom: var(--w-space-3);
}

.wishly-skeleton--panel {
    height: 60px;
    border-radius: var(--w-radius-xl);
    margin-bottom: 0.5rem;
}

.wishly-skeleton--panel:last-child {
    margin-bottom: 0;
}

.wishly-skeleton--panel-lg {
    height: 80px;
    border-radius: var(--w-radius-2xl);
}

.wishly-skeleton--avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 0 auto var(--w-space-3);
}

/* ── Loading Spinner ─────────────────────────── */
.wishly-loading-spinner {
    display: flex;
    justify-content: center;
    padding: var(--w-space-6) 0;
}

.wishly-spinner-icon {
    animation: spin 1s linear infinite;
}

/* ── Small phone breakpoint (480px) ──────────── */
@media (max-width: 480px) {
    .wishly-container {
        padding-left: var(--w-space-4);
        padding-right: var(--w-space-4);
    }

    .wishly-section {
        padding: var(--w-space-12) 0;
    }

    .wishly-section--sm {
        padding: var(--w-space-8) 0;
    }

    .wishly-footer__grid {
        grid-template-columns: 1fr;
        gap: var(--w-space-6);
    }
}