/* --- CSS/EPULSE-REFINED-STYLES.CSS --- */

/* --- 0. Global Settings & Variables --- */
:root {
    --epulse-color-primary: #4A90E2; /* Bright Blue */
    --epulse-color-secondary: #50E3C2; /* Bright Teal/Mint */
    --epulse-color-accent: #F5A623; /* Bright Orange/Yellow */
    --epulse-color-text-primary: #333333;
    --epulse-color-text-secondary: #555555;
    --epulse-color-text-light: #FFFFFF;
    --epulse-color-background-light: #FFFFFF;
    --epulse-color-background-medium: #F7F9FA;
    --epulse-color-background-dark: #E9EFF3; /* For slight contrast */
    --epulse-color-success: #28A745; /* Green */
    --epulse-color-error: #DC3545;   /* Red */
    --epulse-color-warning: #FFC107; /* Yellow */
    --epulse-color-info: #17A2B8;    /* Teal Blue */

    --epulse-font-primary: 'Roboto', sans-serif; /* Clean, modern sans-serif */
    --epulse-font-secondary: 'Montserrat', sans-serif; /* For headings or accents */

    --epulse-border-radius-soft: 20px;
    --epulse-border-radius-pill: 50px; /* For pill buttons */
    --epulse-border-radius-standard: 8px; /* For cards, inputs */
    
    --epulse-shadow-soft: 0 4px 15px rgba(0, 0, 0, 0.08);
    --epulse-shadow-medium: 0 6px 20px rgba(0, 0, 0, 0.1);
    --epulse-shadow-focus: 0 0 0 3px rgba(var(--epulse-color-primary-rgb), 0.3); /* For input focus, needs RGB version of primary */

    --epulse-spacing-xs: 0.5rem;  /* 5px */
    --epulse-spacing-sm: 1rem;    /* 10px */
    --epulse-spacing-md: 1.5rem;  /* 15px */
    --epulse-spacing-lg: 2rem;    /* 20px */
    --epulse-spacing-xl: 3rem;    /* 30px */

    --epulse-header-height: 70px;
}

/* --- 1. Base HTML & Body Styles --- */
html {
    font-size: 60%; /* Base 10px for easy rem calculations */
    box-sizing: border-box;
    scroll-behavior: smooth;
}

*, *::before, *::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--epulse-font-primary);
    font-size: 1.6rem; /* Default 16px */
    line-height: 1.6;
    color: var(--epulse-color-text-primary);
    background-color: var(--epulse-color-background-medium);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* --- 2. Typography --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--epulse-font-secondary);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: var(--epulse-spacing-sm);
    color: var(--epulse-color-primary); /* Primary color for headings */
}

h1 { font-size: 3.2rem; /* 32px */ }
h2 { font-size: 2.6rem; /* 26px */ }
h3 { font-size: 2.0rem; /* 20px */ }

p { margin-bottom: var(--epulse-spacing-md); }
a {
    color: var(--epulse-color-primary);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}
a:hover, a:focus {
    color: var(--epulse-color-accent);
    text-decoration: underline;
}

/* --- 3. Utility Classes --- */
.utility-container {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: var(--epulse-spacing-md) 0;
}
.hidden { display: none !important; }

.section-title {
    margin-bottom: var(--epulse-spacing-lg);
    color: var(--epulse-color-text-primary); /* More subtle for section titles */
}
.section-title--centered { text-align: center; }

.empty-state-message {
    text-align: center;
    padding: var(--epulse-spacing-xl);
    font-size: 1.8rem;
    color: var(--epulse-color-text-secondary);
    background-color: var(--epulse-color-background-light);
    border-radius: var(--epulse-border-radius-standard);
    box-shadow: var(--epulse-shadow-soft);
}
.empty-state-message a.inline-auth-trigger {
    font-weight: bold;
    cursor: pointer;
}

/* --- 4. Page Loader --- */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--epulse-color-background-light);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.page-loader.hidden {
    opacity: 0;
    visibility: hidden;
}
.page-loader__spinner {
    border: 5px solid var(--epulse-color-background-dark);
    border-top: 5px solid var(--epulse-color-primary);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin-bottom: var(--epulse-spacing-md);
}
.page-loader p {
    font-size: 1.6rem;
    color: var(--epulse-color-primary);
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* --- 5. Site Header --- */
.site-header {
    background-color: var(--epulse-color-background-light);
    box-shadow: var(--epulse-shadow-soft);
    height: var(--epulse-header-height);
    position: sticky;
    top: 0;
    z-index: 1000;
    width:100%;
}
.site-header__main-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--epulse-spacing-md);
    height: 100%;
    max-width: 1300px; /* Slightly wider for header content */
    margin: 0 auto;
}
.site-header__logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}
.site-header__logo-image {
    height: 40px; /* Adjust as needed */
    margin-right: var(--epulse-spacing-sm);
}
.site-header__logo-text {
    font-family: var(--epulse-font-secondary);
    font-size: 2.4rem;
    font-weight: bold;
    color: var(--epulse-color-primary);
}

.main-navigation {
    display: flex;
    align-items: center;
}
.main-navigation__link {
    padding: var(--epulse-spacing-sm) var(--epulse-spacing-md);
    margin: 0 var(--epulse-spacing-xs);
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--epulse-color-text-secondary);
    text-decoration: none;
    border-radius: var(--epulse-border-radius-pill);
    transition: background-color 0.2s ease, color 0.2s ease;
    position: relative;
}
.main-navigation__link:hover,
.main-navigation__link:focus,
.main-navigation__link--active {
    color: var(--epulse-color-primary);
    background-color: rgba(var(--epulse-color-primary-rgb), 0.1); /* Needs RGB value for primary */
}
.main-navigation__link--active::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background-color: var(--epulse-color-accent);
    border-radius: 50%;
}
.main-navigation__close-button { display: none; } /* For mobile */

.site-header__user-actions {
    display: flex;
    align-items: center;
}
.user-actions__button {
    background: none;
    border: none;
    color: var(--epulse-color-text-secondary);
    font-size: 2rem; /* Icon size */
    padding: var(--epulse-spacing-sm);
    margin-left: var(--epulse-spacing-sm);
    cursor: pointer;
    position: relative;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.user-actions__button:hover,
.user-actions__button:focus {
    color: var(--epulse-color-primary);
    background-color: rgba(var(--epulse-color-primary-rgb), 0.1);
}
.user-actions__notification-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: var(--epulse-color-accent);
    color: var(--epulse-color-text-light);
    font-size: 1rem;
    font-weight: bold;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.user-actions__button--menu { display: none; } /* For mobile */

.user-profile-dropdown {
    position: absolute;
    top: calc(var(--epulse-header-height) - 10px); /* Below header */
    right: var(--epulse-spacing-md);
    background-color: var(--epulse-color-background-light);
    border-radius: var(--epulse-border-radius-standard);
    box-shadow: var(--epulse-shadow-medium);
    padding: var(--epulse-spacing-md);
    width: 280px;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}
.user-profile-dropdown--active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.user-profile-dropdown__greeting {
    font-size: 1.6rem;
    font-weight: 500;
    margin-bottom: var(--epulse-spacing-sm);
    padding-bottom: var(--epulse-spacing-sm);
    border-bottom: 1px solid var(--epulse-color-background-dark);
}
.user-profile-dropdown__prompt {
    font-size: 1.4rem;
    color: var(--epulse-color-text-secondary);
    margin-bottom: var(--epulse-spacing-md);
    text-align: center;
}
.user-profile-dropdown__link {
    display: block;
    padding: var(--epulse-spacing-sm);
    font-size: 1.5rem;
    color: var(--epulse-color-text-secondary);
    text-decoration: none;
    border-radius: var(--epulse-border-radius-standard);
    transition: background-color 0.2s ease;
    margin-bottom: var(--epulse-spacing-xs);
}
.user-profile-dropdown__link:hover,
.user-profile-dropdown__link:focus {
    background-color: var(--epulse-color-background-medium);
    color: var(--epulse-color-primary);
}
.user-profile-dropdown__link--button {
    text-align: center;
    font-weight: 500;
    background-color: var(--epulse-color-primary);
    color: var(--epulse-color-text-light);
}
.user-profile-dropdown__link--button:hover,
.user-profile-dropdown__link--button:focus {
    background-color: var(--epulse-color-accent); /* Example hover */
     color: var(--epulse-color-text-light);
}
.user-profile-dropdown__link--primary {
    background-color: var(--epulse-color-primary);
    color: var(--epulse-color-text-light) !important; /* Ensure text is light */
}
.user-profile-dropdown__link--primary:hover {
    background-color: #3a7bc8; /* Darker primary */
}

.user-profile-dropdown__link--danger {
    background-color: var(--epulse-color-error);
    color: var(--epulse-color-text-light) !important;
}
.user-profile-dropdown__link--danger:hover,
.user-profile-dropdown__link--danger:focus {
    background-color: #c82333; /* Darker red */
}


/* --- 6. Authentication Modal --- */
.auth-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.auth-modal--active {
    opacity: 1;
    visibility: visible;
}
.auth-modal__dialog {
    background-color: var(--epulse-color-background-light);
    border-radius: var(--epulse-border-radius-soft); /* Softer for modals */
    box-shadow: var(--epulse-shadow-medium);
    padding: var(--epulse-spacing-lg) var(--epulse-spacing-xl);
    width: 90%;
    max-width: 450px;
    position: relative;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}
.auth-modal--active .auth-modal__dialog {
    transform: scale(1);
}
.auth-modal__close-button {
    position: absolute;
    top: var(--epulse-spacing-md);
    right: var(--epulse-spacing-md);
    background: none;
    border: none;
    font-size: 2.8rem;
    color: var(--epulse-color-text-secondary);
    cursor: pointer;
    line-height: 1;
}
.auth-modal__close-button:hover { color: var(--epulse-color-error); }

.auth-modal__header { text-align: center; margin-bottom: var(--epulse-spacing-lg); }
.auth-modal__logo {
    width: 70px; /* Adjust as needed */
    height: 70px;
    margin-bottom: var(--epulse-spacing-sm);
}
.auth-modal__header h2 { font-size: 2.2rem; color: var(--epulse-color-text-primary); }

.auth-modal__form .form-group { margin-bottom: var(--epulse-spacing-md); }
.form-label {
    display: block;
    font-size: 1.4rem;
    font-weight: 500;
    margin-bottom: var(--epulse-spacing-xs);
    color: var(--epulse-color-text-secondary);
}
.form-input, .form-select, .form-textarea {
    width: 100%;
    padding: var(--epulse-spacing-sm) var(--epulse-spacing-md);
    font-size: 1.6rem;
    border: 1px solid var(--epulse-color-background-dark);
    border-radius: var(--epulse-border-radius-standard);
    background-color: var(--epulse-color-background-light);
    color: var(--epulse-color-text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none;
    border-color: var(--epulse-color-primary);
    box-shadow: 0 0 0 3px rgba(var(--epulse-color-primary-rgb), 0.2); /* Needs RGB */
}
.form-input-wrapper { position: relative; }
.form-input-wrapper--password .form-input { padding-right: 40px; /* Space for toggle icon */ }
.form-input__toggle-password {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--epulse-color-text-secondary);
    cursor: pointer;
    font-size: 1.6rem;
    padding: 5px;
}
.form-group--hidden { display: none; }

.auth-modal__footer {
    margin-top: var(--epulse-spacing-lg);
    text-align: center;
    font-size: 1.4rem;
}
.auth-modal__footer p { margin-bottom: var(--epulse-spacing-xs); }
.auth-modal__link { font-weight: 500; }

/* Action Buttons (General) */
.action-button {
    display: inline-flex; /* Allows icon and text alignment */
    align-items: center;
    justify-content: center;
    padding: var(--epulse-spacing-sm) var(--epulse-spacing-lg);
    font-size: 1.6rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
    white-space: nowrap; /* Prevent wrapping on small buttons */
}
.action-button i { margin-right: var(--epulse-spacing-xs); }

.action-button--pill { border-radius: var(--epulse-border-radius-pill); }
.action-button--primary {
    background-color: var(--epulse-color-primary);
    color: var(--epulse-color-text-light);
}
.action-button--primary:hover, .action-button--primary:focus {
    background-color: #3a7bc8; /* Darker shade of primary */
    color: var(--epulse-color-text-light);
    transform: translateY(-1px);
}
.action-button--secondary {
    background-color: var(--epulse-color-background-medium);
    color: var(--epulse-color-primary);
    border: 1px solid var(--epulse-color-primary);
}
.action-button--secondary:hover, .action-button--secondary:focus {
    background-color: rgba(var(--epulse-color-primary-rgb), 0.1);
    transform: translateY(-1px);
}
.action-button--full-width { width: 100%; }
.action-button--small {
    padding: calc(var(--epulse-spacing-sm) * 0.8) calc(var(--epulse-spacing-lg) * 0.8);
    font-size: 1.4rem;
}


/* --- 7. App Notifications/Messages --- */
.app-notifications-container {
    position: fixed;
    top: calc(var(--epulse-header-height) + var(--epulse-spacing-md)); /* Below header */
    right: var(--epulse-spacing-md);
    width: auto;
    max-width: 350px;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: var(--epulse-spacing-sm);
}
.app-notification {
    padding: var(--epulse-spacing-md);
    border-radius: var(--epulse-border-radius-standard);
    box-shadow: var(--epulse-shadow-medium);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--epulse-color-text-light);
    animation: fadeInRight 0.5s ease forwards;
}
.app-notification--success { background-color: var(--epulse-color-success); }
.app-notification--error   { background-color: var(--epulse-color-error); }
.app-notification--info    { background-color: var(--epulse-color-info); }
.app-notification--warning { background-color: var(--epulse-color-warning); color: var(--epulse-color-text-primary); }

.app-notification__close-button {
    background: none;
    border: none;
    color: inherit; /* Inherits from parent .app-notification */
    opacity: 0.7;
    font-size: 2rem;
    margin-left: var(--epulse-spacing-md);
    cursor: pointer;
}
.app-notification__close-button:hover { opacity: 1; }

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* --- 8. Orders Overview Section --- */
.orders-overview-section { padding-top: var(--epulse-spacing-lg); padding-bottom: var(--epulse-spacing-lg); }

.orders-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 column */
    gap: var(--epulse-spacing-lg);
}

/* --- 9. Order Card --- */
.order-card {
    background-color: var(--epulse-color-background-light);
    border-radius: var(--epulse-border-radius-soft);
    box-shadow: var(--epulse-shadow-soft);
    overflow: hidden; /* Ensures child elements conform to border-radius */
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.order-card:hover {
    /* box-shadow: var(--epulse-shadow-medium); */
    /* transform: translateY(-3px); */
}

.order-card__header {
    background-color: rgba(var(--epulse-color-primary-rgb), 0.05); /* Light primary tint, needs RGB */
    padding: var(--epulse-spacing-md) var(--epulse-spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--epulse-color-background-dark);
}
.order-card__id {
    font-size: 1.8rem;
    color: var(--epulse-color-primary);
    margin-bottom: 0;
}
.order-card__date {
    font-size: 1.3rem;
    color: var(--epulse-color-text-secondary);
}

.order-card__body {
    padding: var(--epulse-spacing-lg);
}
.order-card__detail {
    font-size: 1.5rem;
    margin-bottom: var(--epulse-spacing-sm);
    display: flex; /* For label and value alignment */
    flex-wrap: wrap; /* Allow wrapping for long values */
}
.order-card__detail-label {
    font-weight: 500;
    color: var(--epulse-color-text-secondary);
    margin-right: var(--epulse-spacing-xs);
    flex-shrink: 0; /* Prevent label from shrinking */
}
.order-card__detail-value {
    color: var(--epulse-color-text-primary);
    word-break: break-word; /* Break long product names etc. */
}
.order-card__detail--price .order-card__detail-value {
    font-weight: bold;
    color: var(--epulse-color-success);
}
.order-card__separator {
    border: 0;
    border-top: 1px solid var(--epulse-color-background-dark);
    margin: var(--epulse-spacing-md) 0;
}
.order-card__detail--contact .contact-link {
    font-size: 1.4rem;
    margin-right: var(--epulse-spacing-md);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    padding: var(--epulse-spacing-xs) var(--epulse-spacing-sm);
    border-radius: var(--epulse-border-radius-pill);
    transition: background-color 0.2s ease;
}
.contact-link i { margin-right: var(--epulse-spacing-xs); }
.contact-link--whatsapp { color: #25D366; border: 1px solid #25D366; }
.contact-link--whatsapp:hover { background-color: rgba(37, 211, 102, 0.1); }
.contact-link--call { color: var(--epulse-color-info); border: 1px solid var(--epulse-color-info); }
.contact-link--call:hover { background-color: rgba(var(--epulse-color-info-rgb), 0.1); } /* Needs RGB */

.order-card__footer {
    padding: var(--epulse-spacing-lg);
    background-color: var(--epulse-color-background-medium); /* Slight contrast for footer */
    border-top: 1px solid var(--epulse-color-background-dark);
}
.order-card__delivery-info .order-card__detail:last-child { margin-bottom: 0; }

.status-badge {
    padding: calc(var(--epulse-spacing-xs)*0.5) var(--epulse-spacing-sm);
    border-radius: var(--epulse-border-radius-pill);
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--epulse-color-text-light);
    text-transform: capitalize;
    margin-right: var(--epulse-spacing-xs);
}
.delivery-type-badge {
    font-size: 1.2rem;
    color: var(--epulse-color-text-secondary);
    font-style: italic;
}

.status-badge--pending   { background-color: var(--epulse-color-warning); color: var(--epulse-color-text-primary); }
.status-badge--processing{ background-color: var(--epulse-color-info); }
.status-badge--shipped   { background-color: var(--epulse-color-primary); }
.status-badge--received { background-color: var(--epulse-color-success); }
.status-badge--cancelled { background-color: var(--epulse-color-error); }
.status-badge--completed { background-color: var(--epulse-color-success); }


/* --- 10. Delivery Update Form --- */
.delivery-update-form .form-group { margin-bottom: var(--epulse-spacing-md); }
.delivery-update-form .form-select,
.delivery-update-form .form-input,
.delivery-update-form .form-textarea {
    margin-bottom: var(--epulse-spacing-sm); /* Space below each input in the form */
}
.delivery-options-panel {
    padding: var(--epulse-spacing-md);
    margin-top: var(--epulse-spacing-sm);
    background-color: var(--epulse-color-background-light);
    border: 1px dashed var(--epulse-color-background-dark);
    border-radius: var(--epulse-border-radius-standard);
}
.delivery-options-panel .form-group:last-child { margin-bottom: 0; }
.use-location-button { margin-bottom: var(--epulse-spacing-sm); }
.map-container-placeholder {
    min-height: 100px; /* Placeholder for map */
    background-color: var(--epulse-color-background-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--epulse-color-text-secondary);
    font-style: italic;
    border-radius: var(--epulse-border-radius-standard);
    padding: var(--epulse-spacing-md);
    text-align: center;
}


/* --- 11. PWA Install Elements --- */
.pwa-install-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--epulse-color-primary);
    color: var(--epulse-color-text-light);
    padding: var(--epulse-spacing-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    z-index: 1500;
    transition: transform 0.3s ease;
}
.pwa-install-banner.hidden { transform: translateY(100%); }
.pwa-install-banner p { margin-bottom: 0; font-size: 1.5rem; }
.pwa-install-banner .action-button--secondary {
    background-color: var(--epulse-color-text-light);
    color: var(--epulse-color-primary);
    border-color: var(--epulse-color-text-light);
}

.pwa-install-modal {
    /* Similar to auth-modal styling */
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.6);
    display: flex; align-items: center; justify-content: center;
    z-index: 2500; opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.pwa-install-modal.pwa-install-modal--active { /* Use a different class if needed to avoid conflict */
    opacity: 1; visibility: visible;
}
.pwa-install-modal__content {
    background-color: var(--epulse-color-background-light);
    border-radius: var(--epulse-border-radius-soft);
    padding: var(--epulse-spacing-xl);
    width: 90%; max-width: 400px;
    text-align: center;
    position: relative;
    box-shadow: var(--epulse-shadow-medium);
}
.pwa-install-modal__close {
    position: absolute; top: var(--epulse-spacing-md); right: var(--epulse-spacing-md);
    background:none; border:none; font-size:2.4rem; cursor:pointer;
}
.pwa-install-modal h3 { font-size: 2rem; margin-bottom: var(--epulse-spacing-sm); }
.pwa-install-modal p { font-size: 1.5rem; margin-bottom: var(--epulse-spacing-md); }


/* --- 12. Footer --- */
.site-footer--minimal {
    text-align: center;
    padding: var(--epulse-spacing-lg) 0;
    background-color: var(--epulse-color-background-dark);
    color: var(--epulse-color-text-secondary);
    font-size: 1.4rem;
}
.site-footer--minimal p { margin-bottom: var(--epulse-spacing-xs); }


/* --- 13. Animations (from user) --- */
/* Button Hover (adapted) */
.action-button:hover {
  /* Using simple transform and background change, gradient can be added if desired */
  transform: translateY(-2px);
  box-shadow: var(--epulse-shadow-medium); /* Add a bit of lift */
}

/* Header Animation */
.site-header { animation: fadeInDown 0.6s ease-in-out; }
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Logo Animation */
.site-header__logo-text { animation: colorPulse 6s infinite alternate; }
@keyframes colorPulse {
  0%   { color: var(--epulse-color-primary); }
  50%  { color: var(--epulse-color-accent); }
  100% { color: var(--epulse-color-secondary); }
}

/* Icon Animations */
.user-actions__button i, .fas { transition: transform 0.3s ease; }
.user-actions__button:hover i, .user-actions__button:focus i { transform: scale(1.1) rotate(3deg); }

/* Form Input Animation */
/* Focus state already handled by .form-input:focus */

/* Modal Animation */
/* Already handled by .auth-modal and .auth-modal__dialog transitions */

/* Nav Item Animation (Subtle) */
.main-navigation__link { overflow: hidden; } /* For the ::after effect */
.main-navigation__link::before { /* New effect instead of bottom line */
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(var(--epulse-color-primary-rgb), 0.1), transparent);
    transition: left 0.4s ease;
    z-index: -1;
}
.main-navigation__link:hover::before,
.main-navigation__link:focus::before {
    left: 100%;
}


/* Input Shake Animation (for errors) */
.form-input.shake, .form-textarea.shake {
  animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
  40%, 60% { transform: translate3d(3px, 0, 0); }
}

/* Profile Dropdown Animation */
/* Already handled by .user-profile-dropdown transitions */

/* Scroll Animations (Example - apply to elements with a class like 'animate-on-scroll') */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* --- 14. Responsiveness --- */

/* Tablet and larger mobiles */
@media (min-width: 768px) {
    .orders-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for tablets */
    }
    .auth-modal__dialog { padding: var(--epulse-spacing-xl); }
}

/* Desktop */
@media (min-width: 1024px) {
    .orders-grid {
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); /* Flexible grid for larger screens */
    }
    .site-header__main-bar { padding: 0 var(--epulse-spacing-lg); }
}

/* Mobile Navigation Toggle */
@media (max-width: 991px) { /* Adjust breakpoint as needed */
    .main-navigation {
        position: fixed;
        top: 0;
        left: -100%; /* Off-screen */
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background-color: var(--epulse-color-background-light);
        box-shadow: var(--epulse-shadow-medium);
        flex-direction: column;
        align-items: flex-start;
        padding: calc(var(--epulse-header-height) + var(--epulse-spacing-md)) var(--epulse-spacing-lg) var(--epulse-spacing-lg);
        transition: left 0.3s ease-in-out;
        z-index: 1100; /* Above header but below modal */
        overflow-y: auto;
    }
    .main-navigation--active { left: 0; }
    .main-navigation__link {
        width: 100%;
        margin: var(--epulse-spacing-xs) 0;
        padding: var(--epulse-spacing-md);
    }
    .main-navigation__close-button {
        display: block;
        position: absolute;
        top: var(--epulse-spacing-md);
        right: var(--epulse-spacing-md);
        background: none; border: none; font-size: 3rem; color: var(--epulse-color-text-secondary);
        cursor: pointer;
    }
    .user-actions__button--menu { display: flex; }
}

/* Helper for RGB colors if not defined (example) */
/* In a real setup, you might generate these or define them directly */
:root {
    --epulse-color-primary-rgb: 74, 144, 226; /* For #4A90E2 */
    --epulse-color-info-rgb: 23, 162, 184; /* For #17A2B8 */
}