/* =====================================
   GLOBAL UI SYSTEM
   ===================================== */

:root {
    --primary: #3cb371;
    --secondary: #2e8b57;
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.15);
    --header-full-height: 180px;
    --header-shrink-height: 70px;
}

/* =====================================
   NOTIFICATION
   ===================================== */

.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 24px;
    color: #fff;
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    z-index: 3000;
    font-weight: 500;
    animation: slideIn .3s ease;
}

.notification-info {
    background: var(--primary);
}

.notification-error {
    background: #ef4444;
}

.notification-success {
    background: #10b981;
}

/* animation */

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* =====================================
   LOADING STATE
   ===================================== */

.loading {
    position: relative;
    pointer-events: none;
    opacity: .7;
}

    .loading::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 22px;
        height: 22px;
        margin: -11px 0 0 -11px;
        border: 2px solid rgba(255,255,255,0.3);
        border-top: 2px solid var(--secondary);
        border-radius: 50%;
        animation: spin .8s linear infinite;
    }

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

/* =====================================
   BODY LAYOUT
   ===================================== */

body {
    margin: 0;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    /* prevents layout shift */
    padding-top: var(--header-full-height);
    transition: padding-top .3s ease;
}

    /* header shrink */

    body.header-shrink {
        padding-top: var(--header-shrink-height);
    }

/* =====================================
   SMOOTH SCROLL
   ===================================== */

html {
    scroll-behavior: smooth;
    /* ensures anchor links not hidden under header */
    scroll-padding-top: 90px;
}

/* =====================================
   TOUCH IMPROVEMENTS
   ===================================== */

* {
    -webkit-tap-highlight-color: transparent;
}

/* smoother mobile scrolling */

.mobile-menu-body {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
}

/* =====================================
   PREVENT HORIZONTAL SCROLL BUG
   ===================================== */

html, body {
    max-width: 100%;
    overflow-x: hidden;
}