/* ================================
    GLOBAL LAYOUT - Shared styles used across the entire site.
    polished, professional, Shopify‑level styling
    complete, production‑ready styles.css
================================ */

/* =========================================
   GLOBAL BASE STYLES
   Shared across the entire site
   ========================================= */


body {
    /* General Page Styling */
    /* Sets a clean, readable font and adds spacing around the page */
    font-family: Arial, sans-serif;
    background: #ffffff;
    margin: 0;
    padding: 0;
    color: #333;
}

/* Optional, but recommended: predictable sizing*/
*, *::before, *::after {
    box-sizing: border-box;
}

/* =========================================
   GLOBAL CONTAINER
   ========================================= */
.container {
    max-width: 600px;
    margin: 40px auto;
    background: #fff;
    padding: 25px 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

/* ================================
   PAGE TITLES
================================ */
h1 {
    font-size: 28px;
    margin-bottom: 10px;
    text-align: center;
}

/* ALERTS */
/* Error/Success Alerts */
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    text-align: center;
}

.alert-error { 
    background: #f8d7da; 
    color: #721c24; 
    border: 1px solid #f5c6cb; 
}