/* =========================================================
   PATPONNO GLOBAL DESIGN SYSTEM
   Change colors ONLY from :root
   ========================================================= */

:root {

    /* =====================================================
       BRAND COLORS
       Change these values to change the whole website theme
       ===================================================== */

    --pp-primary: #25a267;
    --pp-primary-dark: #168653;
    --pp-primary-deep: #0f6840;

    --pp-primary-light: #34b878;
    --pp-primary-soft: #ecfdf5;
    --pp-primary-soft-2: #f0fdf4;
    --pp-primary-mint: #dff7eb;

    --pp-primary-border: #bbf7d0;

    /* =====================================================
       TEXT
       ===================================================== */

    --pp-text: #111827;
    --pp-text-secondary: #374151;
    --pp-text-muted: #6b7280;
    --pp-text-light: #9ca3af;

    /* =====================================================
       BACKGROUND
       ===================================================== */

    --pp-bg: #ffffff;
    --pp-bg-soft: #f8fafc;
    --pp-bg-muted: #f1f5f9;

    /* =====================================================
       BORDER
       ===================================================== */

    --pp-border: #e5e7eb;
    --pp-border-light: #f1f5f9;

    /* =====================================================
       DARK SECTION
       ===================================================== */

    --pp-dark: #07130d;
    --pp-dark-2: #0b1f15;

    /* =====================================================
       STATUS COLORS
       ===================================================== */

    --pp-success: #16a34a;
    --pp-warning: #f59e0b;
    --pp-danger: #dc2626;
    --pp-info: #2563eb;

    /* =====================================================
       RADIUS
       ===================================================== */

    --pp-radius-sm: 10px;
    --pp-radius-md: 16px;
    --pp-radius-lg: 24px;
    --pp-radius-xl: 32px;
    --pp-radius-2xl: 40px;

    /* =====================================================
       SHADOW
       ===================================================== */

    --pp-shadow-sm: 0 5px 20px rgba(15, 23, 42, .06);

    --pp-shadow-md:
        0 15px 40px rgba(15, 23, 42, .08);

    --pp-shadow-lg:
        0 25px 70px rgba(15, 23, 42, .12);

    --pp-shadow-primary:
        0 20px 50px rgba(37, 162, 103, .20);

    /* =====================================================
       TRANSITION
       ===================================================== */

    --pp-transition: all .3s ease;
}


/* =========================================================
   GLOBAL
   ========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    color: var(--pp-text);
    background: var(--pp-bg);
}


/* =========================================================
   PRIMARY TEXT
   ========================================================= */

.pp-primary {
    color: var(--pp-primary) !important;
}

.pp-primary-dark {
    color: var(--pp-primary-dark) !important;
}

.pp-primary-deep {
    color: var(--pp-primary-deep) !important;
}


/* =========================================================
   PRIMARY BACKGROUND
   ========================================================= */

.pp-bg-primary {
    background-color: var(--pp-primary) !important;
}

.pp-bg-primary-dark {
    background-color: var(--pp-primary-dark) !important;
}

.pp-bg-soft {
    background-color: var(--pp-primary-soft) !important;
}

.pp-bg-soft-2 {
    background-color: var(--pp-primary-soft-2) !important;
}

.pp-bg-mint {
    background-color: var(--pp-primary-mint) !important;
}


/* =========================================================
   PRIMARY BORDER
   ========================================================= */

.pp-border-primary {
    border-color: var(--pp-primary) !important;
}

.pp-border-soft {
    border-color: var(--pp-primary-border) !important;
}


/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

.pp-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;

    background: var(--pp-primary);
    color: #fff;

    padding: .9rem 1.5rem;

    border-radius: var(--pp-radius-md);

    font-weight: 800;

    border: 1px solid transparent;

    box-shadow: var(--pp-shadow-primary);

    transition: var(--pp-transition);
}

.pp-btn-primary:hover {
    background: var(--pp-primary-dark);
    color: #fff;

    transform: translateY(-2px);

    box-shadow:
        0 25px 60px rgba(37, 162, 103, .28);
}


/* =========================================================
   OUTLINE BUTTON
   ========================================================= */

.pp-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;

    background: rgba(255,255,255,.8);

    color: var(--pp-primary);

    padding: .9rem 1.5rem;

    border: 1px solid var(--pp-primary-border);

    border-radius: var(--pp-radius-md);

    font-weight: 800;

    transition: var(--pp-transition);

    backdrop-filter: blur(15px);
}

.pp-btn-outline:hover {
    background: var(--pp-primary);
    color: #fff;
    border-color: var(--pp-primary);
    transform: translateY(-2px);
}


/* =========================================================
   PRIMARY BADGE
   ========================================================= */

.pp-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;

    padding: .5rem .9rem;

    border-radius: 999px;

    background: var(--pp-primary-soft);

    color: var(--pp-primary-dark);

    border: 1px solid var(--pp-primary-border);

    font-size: .75rem;

    font-weight: 800;
}


/* =========================================================
   ICON BOX
   ========================================================= */

.pp-icon {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: var(--pp-primary-soft);

    color: var(--pp-primary);

    transition: var(--pp-transition);
}

.pp-icon:hover {
    background: var(--pp-primary);
    color: #fff;

    transform: translateY(-3px) scale(1.05);
}


/* =========================================================
   LINK
   ========================================================= */

.pp-link {
    color: var(--pp-primary);
    font-weight: 700;
    transition: var(--pp-transition);
}

.pp-link:hover {
    color: var(--pp-primary-dark);
}


/* =========================================================
   FORM FOCUS
   ========================================================= */

.pp-input {
    transition: var(--pp-transition);
}

.pp-input:focus {
    border-color: var(--pp-primary) !important;

    box-shadow:
        0 0 0 4px rgba(37, 162, 103, .10) !important;

    outline: none;
}


/* =========================================================
   CHECKBOX
   ========================================================= */

.pp-checkbox {
    accent-color: var(--pp-primary);
}


/* =========================================================
   GLASS CARD
   ========================================================= */

.pp-glass {

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.78),
            rgba(255,255,255,.40)
        );

    backdrop-filter: blur(22px) saturate(145%);
    -webkit-backdrop-filter: blur(22px) saturate(145%);

    border: 1px solid rgba(255,255,255,.8);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 25px 70px rgba(15,23,42,.10);
}


/* =========================================================
   DARK GLASS
   ========================================================= */

.pp-glass-dark {

    background:
        linear-gradient(
            135deg,
            rgba(7,19,13,.85),
            rgba(11,31,21,.65)
        );

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(255,255,255,.10);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 25px 70px rgba(0,0,0,.18);
}


/* =========================================================
   CARD
   ========================================================= */

.pp-card {
    background: #fff;

    border: 1px solid var(--pp-border);

    border-radius: var(--pp-radius-lg);

    box-shadow: var(--pp-shadow-sm);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.pp-card:hover {
    transform: translateY(-6px);

    border-color: var(--pp-primary-border);

    box-shadow: var(--pp-shadow-lg);
}


/* =========================================================
   PRIMARY CARD
   ========================================================= */

.pp-primary-card {

    background:
        linear-gradient(
            135deg,
            var(--pp-primary-soft),
            #ffffff
        );

    border: 1px solid var(--pp-primary-border);

    border-radius: var(--pp-radius-lg);

    box-shadow: var(--pp-shadow-sm);

    transition: var(--pp-transition);
}

.pp-primary-card:hover {
    transform: translateY(-5px);

    box-shadow: var(--pp-shadow-primary);
}


/* =========================================================
   PRIMARY GRADIENT
   ========================================================= */

.pp-gradient {

    background:
        linear-gradient(
            135deg,
            var(--pp-primary),
            var(--pp-primary-dark)
        );
}

.pp-gradient-soft {

    background:
        linear-gradient(
            135deg,
            var(--pp-primary-soft),
            var(--pp-primary-mint),
            #ffffff
        );
}


/* =========================================================
   HERO BACKGROUND
   ========================================================= */

.pp-hero-bg {

    background:
        radial-gradient(
            circle at 5% 15%,
            rgba(37,162,103,.14),
            transparent 30%
        ),

        radial-gradient(
            circle at 92% 12%,
            rgba(52,184,120,.13),
            transparent 28%
        ),

        linear-gradient(
            135deg,
            #f5fff9 0%,
            #ffffff 52%,
            #effcf5 100%
        );
}


/* =========================================================
   GRID BACKGROUND
   ========================================================= */

.pp-grid-bg {

    background-image:
        linear-gradient(
            rgba(37,162,103,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(37,162,103,.035) 1px,
            transparent 1px
        );

    background-size: 70px 70px;
}


/* =========================================================
   PRIMARY GLOW
   ========================================================= */

.pp-glow {
    box-shadow:
        0 0 80px rgba(37,162,103,.16);
}


/* =========================================================
   PRIMARY SHADOW
   ========================================================= */

.pp-shadow {
    box-shadow: var(--pp-shadow-primary);
}


/* =========================================================
   HOVER
   ========================================================= */

.pp-hover {
    transition: var(--pp-transition);
}

.pp-hover:hover {
    color: var(--pp-primary);
    transform: translateY(-3px);
}


/* =========================================================
   MARQUEE
   ========================================================= */

.pp-marquee {
    overflow: hidden;
    white-space: nowrap;
}

.pp-marquee-track {
    display: inline-flex;
    min-width: max-content;

    animation:
        ppMarquee 28s linear infinite;
}

@keyframes ppMarquee {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}


/* =========================================================
   FLOAT
   ========================================================= */

.pp-float {
    animation:
        ppFloat 4.5s ease-in-out infinite;
}

@keyframes ppFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}


/* =========================================================
   ROTATE
   ========================================================= */

.pp-rotate {
    animation:
        ppRotate 25s linear infinite;
}

@keyframes ppRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   REVEAL
   ========================================================= */

.pp-reveal {
    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity .8s ease,
        transform .8s ease;
}

.pp-reveal.pp-visible {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   REVEAL LEFT
   ========================================================= */

.pp-reveal-left {
    opacity: 0;

    transform:
        translateX(-45px);

    transition:
        opacity .9s ease,
        transform .9s ease;
}

.pp-reveal-left.pp-visible {
    opacity: 1;

    transform:
        translateX(0);
}


/* =========================================================
   REVEAL RIGHT
   ========================================================= */

.pp-reveal-right {
    opacity: 0;

    transform:
        translateX(45px);

    transition:
        opacity .9s ease,
        transform .9s ease;
}

.pp-reveal-right.pp-visible {
    opacity: 1;

    transform:
        translateX(0);
}


/* =========================================================
   PRODUCT SALE BADGE
   ========================================================= */

.pp-sale {
    background: var(--pp-primary);
    color: #fff;

    padding: .4rem .7rem;

    border-radius: 999px;

    font-size: .7rem;

    font-weight: 900;
}


/* =========================================================
   RATING
   ========================================================= */

.pp-rating {
    color: var(--pp-warning);
}


/* =========================================================
   PAGINATION
   ========================================================= */

.pp-pagination .active,
.pp-pagination .active span {

    background: var(--pp-primary) !important;

    color: #fff !important;

    border-color: var(--pp-primary) !important;
}

.pp-pagination a:hover {

    color: var(--pp-primary) !important;

    border-color: var(--pp-primary-border) !important;
}


/* =========================================================
   SELECTION
   ========================================================= */

::selection {
    background: var(--pp-primary);
    color: #fff;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
    width: 9px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: var(--pp-primary);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--pp-primary-dark);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 767px) {

    .pp-btn-primary,
    .pp-btn-outline {
        width: 100%;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .pp-float,
    .pp-rotate,
    .pp-marquee-track {
        animation: none;
    }

    .pp-reveal,
    .pp-reveal-left,
    .pp-reveal-right {

        opacity: 1;

        transform: none;
    }

}