/* --- BRAND GUIDE SETTINGS --- */
:root {
    --brand-primary: #3b82f6; /* CHANGE: Main button/accent color */
    --brand-hover: #2563eb;   /* CHANGE: Darker color for when hovering over buttons */
    --text-main: #333333;     /* CHANGE: Main text color */
    --font-family: 'Montserrat-Medium', Tahoma, Geneva, Verdana, sans-serif; /* CHANGE: Your brand font */
    
    /* These are structural colors, usually safe to leave alone */
    --bg-page: transparent;   /* Transparent lets your main website background show through when embedded */
    --bg-card: #ffffff;
    --border-color: #e2e8f0;
    --booked-bg: #fee2e2;
    --booked-text: #991b1b;
}

/* --- SITE STRUCTURE --- */
body { 
    font-family: var(--font-family); 
    background-color: var(--bg-page); 
    color: var(--text-main);
    padding: 10px; 
    margin: 0; 
}

/* Make sure the grid can scroll horizontally if embedded in a small space */
.grid { 
    display: flex; 
    gap: 15px; 
    overflow-x: auto; 
    padding-bottom: 10px;
}

.day-column { 
    flex: 1; 
    min-width: 240px; 
    background: var(--bg-card); 
    padding: 15px; 
    border-radius: 12px; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
    border: 1px solid var(--border-color);
}

h3 { 
    text-align: center; 
    border-bottom: 2px solid var(--border-color); 
    padding-bottom: 10px; 
    margin-top: 0;
}

.slot { 
    background: #f8fafc; 
    padding: 15px; 
    margin-bottom: 15px; 
    border: 1px solid var(--border-color); 
    border-radius: 8px; 
}

.booked { 
    background: var(--booked-bg); 
    border-color: #fca5a5; 
    color: var(--booked-text); 
}

/* --- FORMS & BUTTONS --- */
input[type="text"], input[type="email"], input[type="number"] { 
    width: 100%; 
    box-sizing: border-box; 
    margin-bottom: 8px; 
    padding: 10px; 
    border: 1px solid var(--border-color); 
    border-radius: 6px; 
}

button { 
    width: 100%; 
    background: var(--brand-primary); 
    color: white; 
    border: none; 
    padding: 12px; 
    border-radius: 6px; 
    font-weight: bold; 
    cursor: pointer; 
    transition: background 0.2s; 
}

button:hover { 
    background: var(--brand-hover); 
}