/* ==========================================================
   KIDZO — Playful Kids Store Design System
   Shared visual language for every storefront page.
   Only presentation lives here — no page relies on these
   class names for behaviour, so it is always safe to retheme.
   ========================================================== */

:root {
    /* --- Brand palette: candy-bright, kid-friendly --- */
    --k-primary: #3A3AA0;       /* playful indigo (was navy) */
    --k-primary-dark: #262471;
    --k-primary-light: #6C63FF;
    --k-accent: #FFC93C;        /* sunshine yellow */
    --k-accent-dark: #F2A900;
    --k-coral: #FF6B6B;         /* candy red — sale/hot */
    --k-turquoise: #16C7A5;     /* mint — success/secondary */
    --k-sky: #3FA9F5;           /* sky blue — decorative */
    --k-grape: #A66CFF;         /* soft purple — decorative */
    --k-pink: #FF8FC7;          /* bubblegum pink — decorative */

    --k-bg: #FFF7EC;            /* warm cream page background */
    --k-bg-alt: #FFFFFF;
    --k-surface: #FFFFFF;
    --k-text: #2B2255;
    --k-text-soft: #6E6796;
    --k-border: #F0E4D3;

    --k-danger: #FF5A5F;
    --k-success: #16C7A5;
    --k-warning: #FFA502;

    --k-radius-sm: 12px;
    --k-radius-md: 20px;
    --k-radius-lg: 32px;
    --k-radius-pill: 999px;

    --k-shadow-soft: 0 10px 30px rgba(58, 58, 160, 0.10);
    --k-shadow-pop: 0 14px 34px rgba(58, 58, 160, 0.18);
    --k-shadow-accent: 0 10px 24px rgba(255, 201, 60, 0.35);

    --k-font-display: 'Baloo Bhaijaan 2', 'Cairo', sans-serif;
    --k-font-body: 'Cairo', 'Tajawal', sans-serif;

    --k-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
    --k-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* kept for any legacy rule still referencing the old names */
    --primary: var(--k-primary);
    --accent: var(--k-accent);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--k-font-body);
    background: var(--k-bg);
    color: var(--k-text);
}

h1, h2, h3, h4, .k-display {
    font-family: var(--k-font-display);
}

::selection { background: var(--k-accent); color: var(--k-primary-dark); }

a { color: inherit; }

.container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 20px;
}

.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* --- Playful sticker-style badge, used for discount/hot/new tags --- */
.k-sticker {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--k-font-display);
    font-weight: 700;
    transform: rotate(-4deg);
    box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

/* --- Soft decorative blobs, absolutely positioned by callers --- */
.k-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(0px);
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

/* --- Wavy section divider (use as a full-width element) --- */
.k-wave {
    display: block;
    width: 100%;
    line-height: 0;
}

/* --- Shared keyframes --- */
@keyframes k-floaty {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-14px) rotate(3deg); }
    100% { transform: translateY(0) rotate(0deg); }
}
@keyframes k-wiggle {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}
@keyframes k-pop-in {
    0% { opacity: 0; transform: scale(0.85) translateY(10px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes k-pulse-soft {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}
@keyframes k-bounce-x {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-6px); }
}

.k-animate-in { animation: k-pop-in 0.5s var(--k-ease) both; }

/* --- Generic playful button atom (page CSS can extend/override) --- */
.k-btn {
    font-family: var(--k-font-body);
    font-weight: 800;
    border: none;
    cursor: pointer;
    border-radius: var(--k-radius-pill);
    transition: var(--k-transition);
}
.k-btn:active { transform: scale(0.96); }

/* --- Custom <select> used by the shop sort control and similar filters --- */
.k-select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.k-select-wrap select {
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--k-font-body);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--k-primary);
    background: var(--k-surface);
    border: 2px solid var(--k-border);
    border-radius: var(--k-radius-pill);
    padding: 11px 40px 11px 18px;
    cursor: pointer;
    box-shadow: var(--k-shadow-soft);
    transition: var(--k-transition);
    outline: none;
}
.k-select-wrap select:hover,
.k-select-wrap select:focus { border-color: var(--k-accent); }
.k-select-wrap::after {
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 16px;
    color: var(--k-primary);
    pointer-events: none;
    font-size: 0.8rem;
}
.k-select-wrap .k-select-icon {
    position: absolute;
    right: 14px;
    color: var(--k-accent-dark);
    pointer-events: none;
    font-size: 0.95rem;
}

/* --- Playful scrollbar for horizontal chip/category strips (webkit) --- */
.k-scroll-x { scrollbar-width: thin; scrollbar-color: var(--k-accent) transparent; }
.k-scroll-x::-webkit-scrollbar { height: 6px; }
.k-scroll-x::-webkit-scrollbar-thumb { background: var(--k-accent); border-radius: 10px; }

@media (max-width: 768px) {
    .container { padding: 16px; }
}