/* ============================================
   HOOFDSTYLES VOOR BROODJESBESTEL WEBSITE
   Apple-achtig design met glassmorphism effect
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ------------------------------------
   CSS VARIABELEN (CUSTOM PROPERTIES)
   Centrale definitie van kleuren, spacing, etc.
   Gebruik: var(--naam-van-variabele)
   ------------------------------------ */
:root {
    /* KLEURENSCHEMA - geïnspireerd op Apple's design systeem */
    --color-primary: #007AFF;          /* Hoofdkleur - blauw voor primaire acties */
    --color-primary-dark: #0051D5;     /* Donkere variant voor hover effecten */
    --color-success: #34C759;          /* Groen - voor succesmeldingen */
    --color-warning: #FF9500;          /* Oranje - voor waarschuwingen */
    --color-danger: #FF3B30;           /* Rood - voor foutmeldingen en allergenen */
    --color-text: #1D1D1F;             /* Hoofdtekstkleur - bijna zwart */
    --color-text-secondary: #86868B;   /* Secundaire tekst - grijs */
    --color-background: #F5F5F7;       /* Achtergrondkleur - lichtgrijs */
    --color-white: #FFFFFF;            /* Wit voor kaarten en componenten */
    --color-border: rgba(0, 0, 0, 0.1); /* Subtiele borders met transparantie */
    
    /* STATUS KLEUREN - voor bestelstatussen */
    --status-nieuw: #007AFF;           /* Blauw - nieuwe bestelling */
    --status-bereiding: #FF9500;       /* Oranje - in voorbereiding */
    --status-klaar: #34C759;           /* Groen - klaar om af te halen */
    --status-afgehaald: #8E8E93;       /* Grijs - reeds afgehaald */
    
    /* GLASSMORPHISM EFFECT - moderne glasachtige UI componenten */
    --glass-bg: rgba(255, 255, 255, 0.7);           /* Semi-transparante witte achtergrond */
    --glass-border: rgba(255, 255, 255, 0.18);      /* Subtiele witte rand */
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07); /* Zachte schaduw voor diepte */
    
    /* SPACING - consistente afstanden (rem = relatief aan root font-size) */
    --spacing-xs: 0.5rem;  /* Extra klein - 8px */
    --spacing-sm: 1rem;    /* Klein - 16px */
    --spacing-md: 1.5rem;  /* Gemiddeld - 24px */
    --spacing-lg: 2rem;    /* Groot - 32px */
    --spacing-xl: 3rem;    /* Extra groot - 48px */
    
    /* BORDER RADIUS - afgeronde hoeken voor verschillende componenten */
    --radius-sm: 8px;   /* Klein - buttons, badges */
    --radius-md: 12px;  /* Gemiddeld - input velden */
    --radius-lg: 16px;  /* Groot - kaarten */
    --radius-xl: 20px;  /* Extra groot - hero elementen */
    
    /* TRANSITIONS - animatiesnelheden voor vloeiende overgangen */
    --transition-fast: 0.15s ease;     /* Snel - hover effecten */
    --transition-normal: 0.3s ease;    /* Normaal - standaard animaties */
    --transition-slow: 0.5s ease;      /* Traag - complexe transformaties */
}

/* ------------------------------------
   BODY STYLING
   Basis typografie en achtergrond
   ------------------------------------ */
body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", sans-serif;
    font-size: 17px;           /* Apple's standaard body size */
    line-height: 1.47059;      /* Optimale leesbaarheid */
    font-weight: 400;          /* Normale gewicht */
    letter-spacing: -0.022em;  
    color: var(--color-text);  
    background-color: var(--color-background);
    /* Font smoothing voor scherpere tekst op moderne schermen */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

/* ------------------------------------
   TYPOGRAFIE - Headings en tekst
   ------------------------------------ */

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;          /* Semi-bold voor koppen */
    letter-spacing: -0.03em;   /* Strakke tracking voor grotere tekst */
    line-height: 1.2;          /* Compacte lijnhoogte voor titels */
    color: var(--color-text);
}

/* Specifieke groottes per heading niveau */
h1 {
    font-size: 48px;    /* Hoofdtitel - paginatitel */
    font-weight: 700;   /* Extra bold voor h1 */
}

h2 {
    font-size: 40px;    /* Grote sectie titel */
}

h3 {
    font-size: 32px;    /* Subsectie titel */
}

h4 {
    font-size: 24px;    /* Kleine sectie titel */
}

h5 {
    font-size: 20px;    /* Card titel */
}

h6 {
    font-size: 17px;    /* Kleinste heading */
}

/* Paragrafen - ruimte onderaan voor leesbaarheid */
p {
    margin-bottom: var(--spacing-sm);
}

/* Links - primaire kleur met hover effect */
a {
    color: var(--color-primary);                /* Blauwe linkkleur */
    text-decoration: none;                      /* Geen onderstreping */
    transition: color var(--transition-fast);   /* Vloeiende kleurovergang */
}

/* Hover state voor links - donkerdere tint */
a:hover {
    color: var(--color-primary-dark);
}

/* ------------------------------------
   GLASSMORPHISM EFFECT
   Moderne glasachtige UI componenten
   ------------------------------------ */

/* Basis glass effect - semi-transparant met blur */
.glass {
    background: var(--glass-bg);                    /* Semi-transparante achtergrond */
    backdrop-filter: blur(10px);                    /* Blur effect achter element */
    -webkit-backdrop-filter: blur(10px);            /* Safari support */
    border: 1px solid var(--glass-border);          /* Subtiele witte rand */
    border-radius: var(--radius-lg);                /* Afgeronde hoeken */
    box-shadow: var(--glass-shadow);                /* Zachte schaduw voor diepte */
}

/* Sterk glass effect - meer ondoorzichtig en blur */
.glass-strong {
    background: rgba(255, 255, 255, 0.85);  /* Meer ondoorzichtig */
    backdrop-filter: blur(20px);             /* Sterker blur effect */
    -webkit-backdrop-filter: blur(20px);     /* Safari support */
}

/* ------------------------------------99
   CONTAINERS - Content wrappers
   ------------------------------------ */

/* Standaard container - voor brede content */
.container {
    max-width: 1200px;              /* Maximale breedte voor leesbaarheid */
    margin: 0 auto;                 /* Horizontaal centreren */
    padding: 0 var(--spacing-md);   /* Zijdelingse padding */
}

/* Smalle container - voor formulieren en gecentreerde content */
.container-narrow {
    max-width: 600px;               
    margin: 0 auto;                 
    padding: 0 var(--spacing-md);   /* Zijdelingse padding */
}

/* ------------------------------------
   LAYOUT COMPONENTEN
   ------------------------------------ */

/* Page wrapper - zorgt voor sticky footer layout */
.page-wrapper {
    min-height: 100vh;          
    display: flex;              
    flex-direction: column;     
}

/* Main content area - groeit om beschikbare ruimte te vullen */
.main-content {
    flex: 1;                        /* Neemt alle beschikbare ruimte */
    padding: var(--spacing-lg) 0;   /* Verticale padding */
}

/* Gecentreerde content - voor login/registratie pagina's */
.centered {
    display: flex;              
    flex-direction: column;     
    align-items: center;        /* Horizontaal centreren */
    justify-content: center;    /* Verticaal centreren */
    min-height: 80vh;           /* 80% van viewport hoogte */
}

/* Secties - ruimte tussen grote content blokken */
.section {
    margin-bottom: var(--spacing-xl);  /* Extra grote ruimte onderaan */
}

/* Sectie titels - gecentreerd met ruimte */
.section-title {
    margin-bottom: var(--spacing-md);  /* Ruimte onder titel */
    text-align: center;                /* Gecentreerde tekst */
}

/* ------------------------------------
   UTILITY CLASSES - Herbruikbare helpers
   ------------------------------------ */

/* Tekst uitlijning */
.text-center {
    text-align: center;
}

/* Secundaire tekstkleur - voor minder belangrijke info */
.text-secondary {
    color: var(--color-text-secondary);
}

/* MARGIN UTILITIES - voor snelle spacing aanpassingen */
.mt-sm { margin-top: var(--spacing-sm); }       /* Margin top klein */
.mt-md { margin-top: var(--spacing-md); }       /* Margin top gemiddeld */
.mt-lg { margin-top: var(--spacing-lg); }       /* Margin top groot */
.mb-sm { margin-bottom: var(--spacing-sm); }    /* Margin bottom klein */
.mb-md { margin-bottom: var(--spacing-md); }    /* Margin bottom gemiddeld */
.mb-lg { margin-bottom: var(--spacing-lg); }    /* Margin bottom groot */

/* Verberg element - !important om andere styles te overschrijven */
.hidden {
    display: none !important;
}

/* ------------------------------------
   LOADING SPINNER
   Animatie voor laadstatus
   ------------------------------------ */
.loading {
    display: inline-block;                      
    width: 20px;
    height: 20px;
    border: 3px solid rgba(0, 122, 255, 0.3);  
    border-radius: 50%;                        
    border-top-color: var(--color-primary);    /* Donkere bovenkant voor spinner effect */
    animation: spin 0.8s linear infinite;       /* Continue rotatie animatie */
}

/* Keyframe animatie voor rotatie */
@keyframes spin {
    to { transform: rotate(360deg); }  /* 360° rotatie = volledige cirkel */
}

/* ------------------------------------
   FEEDBACK MESSAGES
   Error en success meldingen
   ------------------------------------ */

/* Foutmelding - rode achtergrond */
.error-message {
    background-color: rgba(255, 59, 48, 0.1);
    color: var(--color-danger);
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    margin-top: var(--spacing-xs);
    font-size: 14px;
}

.success-message {
    background-color: rgba(52, 199, 89, 0.1);
    color: var(--color-success);
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    margin-top: var(--spacing-xs);
    font-size: 14px;
}

/* ------------------------------------
   STATUS BADGES
   Visuele indicators voor bestelstatus
   ------------------------------------ */

/* Basis badge styling - wordt gecombineerd met kleur classes */
.status-badge {
    display: inline-block;         
    padding: 4px 12px;             
    border-radius: 12px;           
    font-size: 13px;               
    font-weight: 600;              
    text-transform: capitalize;    /* Eerste letter hoofdletter */
}

/* Nieuw - blauwe badge voor nieuwe bestellingen */
.status-nieuw {
    background-color: rgba(0, 122, 255, 0.1);  
    color: var(--status-nieuw);                 
}

/* In bereiding - oranje badge voor bestellingen in voorbereiding */
.status-bereiding {
    background-color: rgba(255, 149, 0, 0.1);  
    color: var(--status-bereiding);             
}

/* Klaar - groene badge voor klaar om af te halen */
.status-klaar {
    background-color: rgba(52, 199, 89, 0.1);  
    color: var(--status-klaar);                 
}

/* Afgehaald - grijze badge voor afgehaalde bestellingen */
.status-afgehaald {
    background-color: rgba(142, 142, 147, 0.1); 
    color: var(--status-afgehaald);             
}

/* ------------------------------------
   ALLERGENEN BADGES
   Waarschuwingen voor allergie-informatie
   ------------------------------------ */
.allergen-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 500;
    background-color: rgba(255, 59, 48, 0.1);
    color: var(--color-danger);
    margin-right: 4px;
    margin-top: 4px;
}

.allergen-badge svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}