/* Greek Theme Variables */
:root {
    /* Clean, Modern Mediterranean Colors */
    --primary-blue: #1B365D;
    --light-blue: #3A5F7A;
    --accent-color: #C7A96B;
    --white: #FFFFFF;
    --light-grey: #F8F9FA;
    --medium-grey: #6C757D;
    --dark-grey: #495057;
    --soft-beige: #FAF8F5;
    --border-light: #E9ECEF;
    
    /* Greek-themed variables for cookie banner */
    --greek-blue: #2E86AB;
    --greek-white: #FFFFFF;
    --rich-brown: #6B705C;
    --deep-blue: #1B4D72;
    --warm-orange: #D4A574;
    
    /* Typography */
    --font-primary: 'RobotoLocal', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-accent: 'PlayfairLocal', Georgia, 'Times New Roman', serif;
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    
    /* Shadows */
    --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.12);
    --shadow-heavy: 0 8px 24px rgba(0, 0, 0, 0.15);
    
    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
}

/* Self-hosted font faces (drop WOFF2 files into /fonts). Uses local() to reuse system fonts if available. */
/* Self-hosted WOFF2 (present in /fonts). Keep local() first to reuse installed fonts, then URL fallback. */
@font-face {
  font-family: 'RobotoLocal';
  src: local('Roboto'), local('Roboto Regular'), url('../fonts/roboto-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'RobotoLocal';
  src: local('Roboto Medium'), url('../fonts/roboto-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'RobotoLocal';
  src: local('Roboto Bold'), url('../fonts/roboto-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PlayfairLocal';
  src: local('Playfair Display'), url('../fonts/playfair-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PlayfairLocal';
  src: local('Playfair Display Bold'), url('../fonts/playfair-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Utility: visually hidden (for accessibility and CSP-safe hiding) */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Ensure focus is visible */
:focus {
  outline: 2px solid #2c7be5;
  outline-offset: 2px;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Media elements scale to container width on all screens */
img, svg, video, canvas, iframe {
    max-width: 100%;
    height: auto;
}

/* Make embedded content fluid */
iframe { width: 100%; }
canvas { width: 100%; }

/* Avoid long strings/links breaking layouts */
pre, code { 
    white-space: pre-wrap; 
    word-break: break-word; 
}

body {
    font-family: var(--font-primary);
    line-height: 1.6;
    color: var(--dark-grey);
    background-color: var(--soft-beige);
    overflow-x: hidden;
}

/* Header */
.header {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--light-blue) 100%);
    color: var(--white);
    padding: var(--spacing-sm) 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-medium);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 60px;
}

.logo {
    font-family: var(--font-accent);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--white);
    text-decoration: none;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.nav-links {
    display: flex;
    gap: var(--spacing-lg);
}

.nav-links a {
    color: var(--white);
    text-decoration: none;
    font-weight: 500;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    transition: all 0.3s ease;
    position: relative;
}

.nav-links a:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: var(--spacing-xs);
}

.mobile-menu-toggle span {
    width: 25px;
    height: 3px;
    background-color: var(--white);
    margin: 3px 0;
    transition: 0.3s;
    border-radius: 2px;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}

/* Main Content */
.main-content {
    min-height: calc(100vh - 200px);
    padding: var(--spacing-xl) 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* Hero Section */
.hero {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.hero h1 {
    font-family: var(--font-accent);
    font-size: 3rem;
    color: var(--primary-blue);
    margin-bottom: var(--spacing-md);
    font-weight: 700;
}

.hero p {
    font-size: 1.2rem;
    color: var(--medium-grey);
    max-width: 700px;
    margin: 0 auto var(--spacing-xl);
    line-height: 1.7;
}

/* Map Section */
.map-section {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-light);
    text-align: center;
}

.map-section h2 {
    font-family: var(--font-accent);
    font-size: 2.2rem;
    color: var(--primary-blue);
    margin-bottom: var(--spacing-lg);
}

.map-container {
    max-width: 800px;
    margin: 0 auto;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-medium);
}

.map-container img {
    width: 100%;
    height: auto;
    display: block;
}

/* Info Grid */
.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.info-card {
    background: var(--white);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-light);
    transition: all 0.3s ease;
    text-align: center;
}

.info-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

.info-card h3 {
    font-family: var(--font-accent);
    color: var(--primary-blue);
    margin-bottom: var(--spacing-lg);
    font-size: 2.2rem;
    font-weight: 600;
}

.info-card p {
    color: var(--dark-grey);
    margin-bottom: var(--spacing-sm);
    font-size: 1.2rem;
    line-height: 1.6;
    font-weight: 500;
}

.info-card .highlight {
    color: var(--accent-color);
    font-weight: 700;
    font-size: 1.6rem;
    display: block;
    margin: var(--spacing-md) 0;
}

/* Contact Links */
.contact-links {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
    justify-content: center;
    flex-wrap: wrap;
}

.contact-links a {
    color: var(--white);
    background: var(--primary-blue);
    text-decoration: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    transition: all 0.3s ease;
    font-weight: 500;
    font-size: 0.9rem;
    border: 2px solid var(--primary-blue);
}

.contact-links a:hover {
    background: var(--light-blue);
    border-color: var(--light-blue);
    transform: translateY(-2px);
    box-shadow: var(--shadow-light);
}

.directions-link {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--white);
}

.directions-link:hover {
    background: #B8956A;
    border-color: #B8956A;
}

/* Footer */
.footer {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--light-blue) 100%);
    color: var(--white);
    padding: var(--spacing-xl) 0;
    margin-top: var(--spacing-xl);
}

/* ==============================
   Admin Login Page
   (migrated from admin-login.html)
============================== */
.login-section {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin: var(--spacing-xl) auto;
    max-width: 400px;
    box-shadow: var(--shadow-medium);
    border: 1px solid var(--border-light);
}
.login-title { text-align: center; margin-bottom: var(--spacing-xl); }
.login-title h1 {
    font-family: var(--font-accent);
    font-size: 2rem;
    color: var(--primary-blue);
    margin-bottom: var(--spacing-sm);
}
.login-form { display: flex; flex-direction: column; gap: var(--spacing-md); }
.form-group { display: flex; flex-direction: column; }
.form-group label { font-weight: 500; color: var(--primary-blue); margin-bottom: var(--spacing-xs); }
.form-group input {
    padding: var(--spacing-sm);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    transition: border-color 0.3s ease;
}
.form-group input:focus { outline: none; border-color: var(--primary-blue); }
.login-button {
    background: var(--primary-blue);
    color: var(--white);
    border: none;
    padding: var(--spacing-md);
    font-size: 1.1rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: var(--spacing-md);
}
.login-button:hover { background: var(--light-blue); transform: translateY(-2px); box-shadow: var(--shadow-medium); }
.login-button:disabled { background: #ccc; cursor: not-allowed; transform: none; box-shadow: none; }
.error-message { background: #f8d7da; color: #721c24; padding: var(--spacing-sm); border-radius: var(--radius-sm); text-align: center; display: none; }
.back-link { text-align: center; margin-top: var(--spacing-md); }
.back-link a { color: var(--primary-blue); text-decoration: none; font-weight: 500; }
.back-link a:hover { text-decoration: underline; }

/* ==============================
   Admin Panel
   (migrated from admin-panel.html)
============================== */
.admin-section { background: var(--greek-white); border-radius: var(--radius-lg); padding: var(--spacing-xl); margin: var(--spacing-lg) 0; box-shadow: var(--shadow-medium); }
.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-xl); padding-bottom: var(--spacing-md); border-bottom: 2px solid #e0e0e0; }
.admin-title h1 { font-family: var(--font-accent); font-size: 2.5rem; color: var(--greek-blue); margin-bottom: var(--spacing-xs); }
.admin-title p { color: var(--rich-brown); }
.logout-button { background: var(--terracotta); color: var(--greek-white); border: none; padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; font-weight: 500; transition: all 0.3s ease; }
.logout-button:hover { background: #c45a4a; transform: translateY(-2px); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-lg); margin-bottom: var(--spacing-xl); }
.stat-card { background: linear-gradient(135deg, var(--greek-blue), var(--deep-blue)); color: var(--greek-white); padding: var(--spacing-lg); border-radius: var(--radius-md); text-align: center; }
.stat-card h3 { font-size: 2rem; margin-bottom: var(--spacing-xs); }
.stat-card p { font-size: 1.1rem; opacity: 0.9; }
.reviews-section h2 { font-family: var(--font-accent); font-size: 2rem; color: var(--greek-blue); margin-bottom: var(--spacing-lg); }
.review-card { background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: var(--radius-md); padding: var(--spacing-lg); margin-bottom: var(--spacing-md); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.review-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-light); }
.review-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-md); padding-bottom: var(--spacing-sm); border-bottom: 1px solid #e0e0e0; }
.review-date { color: var(--rich-brown); font-size: 0.9rem; }
.rating-display { display: flex; gap: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
.rating-item { display: flex; align-items: center; gap: var(--spacing-xs); }
.rating-stars { color: var(--greek-gold); }
.rating-label { font-weight: 500; color: var(--greek-blue); min-width: 80px; }
.review-comment { background: var(--greek-white); padding: var(--spacing-md); border-radius: var(--radius-sm); border-left: 4px solid var(--greek-blue); margin-top: var(--spacing-sm); }
.no-reviews, .loading { text-align: center; color: var(--rich-brown); padding: var(--spacing-xl); }
.admin-tabs { display: flex; gap: var(--spacing-sm); margin-bottom: var(--spacing-xl); border-bottom: 2px solid #e0e0e0; padding-bottom: var(--spacing-sm); }
.tab-button { background: none; border: none; padding: var(--spacing-sm) var(--spacing-md); font-size: 1rem; font-weight: 500; color: var(--rich-brown); cursor: pointer; border-radius: var(--radius-sm); transition: all 0.3s ease; }
.tab-button:hover { background: rgba(13, 94, 175, 0.1); }
.tab-button.active { background: var(--greek-blue); color: var(--greek-white); }
.tab-content { display: none; }
.tab-content.active { display: block; }
.reservation-card { background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: var(--radius-md); padding: var(--spacing-lg); margin-bottom: var(--spacing-md); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.reservation-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-light); }
.reservation-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-md); padding-bottom: var(--spacing-sm); border-bottom: 1px solid #e0e0e0; }
.reservation-id { background: var(--greek-blue); color: var(--greek-white); padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 500; }
.reservation-date { color: var(--rich-brown); font-size: 0.9rem; }
.reservation-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
.reservation-detail { display: flex; flex-direction: column; }
.reservation-detail strong { color: var(--greek-blue); font-size: 0.9rem; margin-bottom: var(--spacing-xs); }
.reservation-detail span { color: var(--rich-brown); }
.reservation-message { background: var(--greek-white); padding: var(--spacing-md); border-radius: var(--radius-sm); border-left: 4px solid var(--greek-blue); margin-top: var(--spacing-sm); }
.date-filter { margin-bottom: var(--spacing-lg); display: flex; gap: var(--spacing-sm); align-items: center; }
.date-filter input { padding: var(--spacing-sm); border: 2px solid #e0e0e0; border-radius: var(--radius-sm); font-size: 1rem; }
.date-filter button { background: var(--greek-blue); color: var(--greek-white); border: none; padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-sm); cursor: pointer; font-weight: 500; transition: all 0.3s ease; }
.date-filter button:hover { background: var(--deep-blue); }
.admin-section .menu-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-xl); }
.admin-section .menu-header h2 { font-family: var(--font-accent); font-size: 2rem; color: var(--greek-blue); margin: 0; }
.add-category-btn { background: var(--greek-blue); color: var(--greek-white); border: none; padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-sm); cursor: pointer; font-weight: 500; transition: all 0.3s ease; }
.add-category-btn:hover { background: var(--deep-blue); transform: translateY(-2px); }
.menu-categories { display: grid; gap: var(--spacing-lg); }
.category-card { background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: var(--radius-md); padding: var(--spacing-lg); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.category-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-light); }
.category-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-md); }
.category-actions { display: flex; gap: var(--spacing-sm); }
.action-btn { padding: var(--spacing-xs) var(--spacing-sm); border: none; border-radius: var(--radius-sm); cursor: pointer; font-weight: 500; transition: all 0.3s ease; }
.edit-btn { background: var(--greek-blue); color: var(--greek-white); }
.edit-btn:hover { background: var(--deep-blue); }
.delete-btn { background: #dc3545; color: var(--greek-white); }
.delete-btn:hover { background: #b02a37; }
.category-items { display: grid; gap: var(--spacing-sm); }
.category-items .menu-item, .menu-items .menu-item { background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: var(--radius-md); padding: var(--spacing-md); display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-md); }
.category-items .menu-item.unavailable, .menu-items .menu-item.unavailable { opacity: 0.6; background: #f5f5f5; }
.category-items .item-info, .menu-items .item-info { flex: 1; }
.category-items .item-number, .menu-items .item-number { background: var(--greek-blue); color: var(--greek-white); padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 600; min-width: 40px; text-align: center; margin-right: var(--spacing-sm); }
.category-items .item-title, .menu-items .item-title { color: var(--greek-blue); font-weight: 600; }
.category-items .item-description, .menu-items .item-description { color: var(--rich-brown); margin-top: var(--spacing-xs); }
.category-items .item-price, .menu-items .item-price { color: var(--greek-blue); font-weight: 700; font-size: 1.1rem; }
.category-items .item-actions, .menu-items .item-actions { display: flex; gap: var(--spacing-sm); }
/* Ensure admin menu-items container lays out its children */
.menu-items { display: grid; gap: var(--spacing-md); }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-md); }
.form-actions { display: flex; justify-content: flex-end; gap: var(--spacing-sm); margin-top: var(--spacing-md); }
.btn-primary { background: var(--greek-blue); color: var(--greek-white); border: none; padding: var(--spacing-sm) var(--spacing-lg); border-radius: var(--radius-sm); cursor: pointer; font-weight: 500; transition: all 0.3s ease; }
.btn-primary:hover { background: var(--deep-blue); }
.btn-secondary { background: var(--rich-brown); color: var(--greek-white); border: none; padding: var(--spacing-sm) var(--spacing-lg); border-radius: var(--radius-sm); cursor: pointer; font-weight: 500; transition: all 0.3s ease; }
.btn-secondary:hover { background: #5a4a3a; }
.checkbox-group { display: flex; align-items: center; gap: var(--spacing-sm); }
.checkbox-group input[type="checkbox"] { width: auto; }
@media (max-width: 768px) {
    .admin-header { flex-direction: column; gap: var(--spacing-md); text-align: center; }
    .admin-title h1 { font-size: 2rem; }
    .stats-grid { grid-template-columns: 1fr; }
    .review-header { flex-direction: column; align-items: flex-start; gap: var(--spacing-sm); }
}

/* Simple modal components used by admin pages */
.modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background: rgba(0,0,0,0.5); }
.modal-content { background: var(--white); margin: 5% auto; padding: var(--spacing-lg); border: 1px solid var(--border-light); width: min(900px, 95%); border-radius: var(--radius-md); box-shadow: var(--shadow-medium); }
.modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-light); padding-bottom: var(--spacing-sm); margin-bottom: var(--spacing-md); }
.modal-title { font-family: var(--font-accent); color: var(--greek-blue); }
.close { cursor: pointer; font-size: 1.5rem; }

/* ==============================
   Menu (PDF page)
   (migrated from menu.html)
============================== */
.pdf-container { width: 100%; height: 80vh; border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-medium); margin: var(--spacing-lg) 0; }
.mobile-pdf-container { display: none; text-align: center; padding: var(--spacing-xl); background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-medium); margin: var(--spacing-lg) 0; border: 1px solid var(--border-light); }
.pdf-header { text-align: center; margin-bottom: var(--spacing-xl); }
.pdf-header h1 { font-family: var(--font-accent); font-size: 2.5rem; color: var(--primary-blue); margin-bottom: var(--spacing-md); }
.pdf-header p { color: var(--medium-grey); font-size: 1.2rem; margin-bottom: var(--spacing-lg); }
.download-links { display: flex; flex-direction: column; gap: var(--spacing-md); align-items: center; margin: var(--spacing-xl) 0; }
.download-link { display: inline-flex; align-items: center; gap: var(--spacing-sm); background: var(--primary-blue); color: var(--white); padding: var(--spacing-lg) var(--spacing-xl); text-decoration: none; border-radius: var(--radius-md); transition: all 0.3s ease; font-weight: 600; font-size: 1.1rem; min-width: 250px; justify-content: center; box-shadow: var(--shadow-light); }
.download-link:hover { background: var(--light-blue); transform: translateY(-3px); box-shadow: var(--shadow-medium); }
.download-link i { font-size: 1.2rem; }
.mobile-info { background: var(--light-grey); padding: var(--spacing-lg); border-radius: var(--radius-md); margin: var(--spacing-lg) 0; border-left: 4px solid var(--primary-blue); border: 1px solid var(--border-light); }
.mobile-info h3 { color: var(--primary-blue); margin-bottom: var(--spacing-md); font-size: 1.3rem; font-weight: 600; }
.mobile-info p { color: var(--medium-grey); margin-bottom: var(--spacing-md); font-size: 1rem; line-height: 1.6; }
@media (max-width: 768px) {
    .pdf-container { display: none; }
    .mobile-pdf-container { display: block; }
    .pdf-header h1 { font-size: 2rem; }
}

/* ==============================
   Interactive Menu page
   (migrated from menu-interactive.html)
============================== */
.menu-container { background: var(--white); border-radius: var(--radius-lg); padding: var(--spacing-xl); margin: var(--spacing-xl) 0; box-shadow: var(--shadow-medium); border: 1px solid var(--border-light); }
.menu-header { display: block; text-align: center; margin-bottom: var(--spacing-xl); }
.menu-header h1 { font-family: var(--font-accent); font-size: 2.5rem; color: var(--primary-blue); margin-bottom: var(--spacing-sm); }
.menu-header p { color: var(--medium-grey); font-size: 1.1rem; }
.category-selector { display: flex; gap: var(--spacing-sm); margin-bottom: var(--spacing-xl); flex-wrap: wrap; justify-content: center; }
.category-btn { background: var(--light-grey); color: var(--primary-blue); border: 2px solid var(--border-light); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-md); cursor: pointer; font-weight: 500; transition: all 0.3s ease; white-space: normal; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; text-align: left; min-height: 60px; display: flex; align-items: center; -webkit-appearance: none; appearance: none; outline: none; box-shadow: none; }
.category-btn:hover { background: var(--primary-blue); color: var(--white); transform: translateY(-2px); }
.category-btn.active { background: var(--primary-blue); color: var(--white); border-color: var(--primary-blue); }
/* Removed global .menu-section visibility rules to avoid hiding
   admin panel menu section. Interactive menu does not use this class. */
.menu-container .menu-item { background: #f8f9fa; border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: var(--spacing-lg); margin-bottom: var(--spacing-md); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.menu-container .menu-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-light); }
.menu-container .menu-item.unavailable { opacity: 0.6; background: #f5f5f5; }
.menu-container .item-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--spacing-sm); }
.menu-container .item-number { background: var(--primary-blue); color: var(--white); padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 600; min-width: 40px; text-align: center; }
.menu-container .item-price { color: var(--primary-blue); font-weight: 700; font-size: 1.2rem; }
.section-title { font-family: var(--font-accent); font-size: 2rem; color: var(--primary-blue); margin-bottom: var(--spacing-lg); text-align: center; border-bottom: 2px solid var(--border-light); padding-bottom: var(--spacing-md); }
.no-items { text-align: center; color: var(--medium-grey); font-style: italic; padding: var(--spacing-xl); }
@media (max-width: 768px) {
    .menu-container { padding: var(--spacing-md); margin: var(--spacing-md) 0; }
    .menu-header h1 { font-size: 2rem; }
    .category-selector { flex-direction: column; align-items: center; }
    .category-btn { width: 100%; max-width: 200px; }
    .menu-container .item-header { flex-direction: column; gap: var(--spacing-sm); }
    .menu-container .item-price { align-self: flex-end; }
}

/* Admin Panel: Category title */
.category-title { display: flex; align-items: center; gap: var(--spacing-sm); font-size: 1.2rem; font-weight: 600; color: var(--greek-blue); }

/* ==============================
   Rating page
   (migrated from rate-us.html)
============================== */
.rating-section { background: var(--white); border-radius: var(--radius-lg); padding: var(--spacing-xl); margin: var(--spacing-xl) 0; box-shadow: var(--shadow-medium); border: 1px solid var(--border-light); }
.rating-title { text-align: center; margin-bottom: var(--spacing-xl); }
.rating-title h1 { font-family: var(--font-accent); font-size: 2.5rem; color: var(--primary-blue); margin-bottom: var(--spacing-sm); }
.rating-title p { color: var(--medium-grey); font-size: 1.1rem; }
.rating-form { max-width: 600px; margin: 0 auto; }
.rating-group { margin-bottom: var(--spacing-lg); padding: var(--spacing-lg); border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--light-grey); }
.rating-group-title { font-family: var(--font-accent); font-size: 1.5rem; color: var(--primary-blue); margin-bottom: var(--spacing-md); display: flex; align-items: center; gap: var(--spacing-sm); font-weight: 600; }
.star-rating { display: flex; gap: var(--spacing-sm); margin-top: var(--spacing-sm); justify-content: center; }
.star { font-size: 2.5rem; color: #ddd; cursor: pointer; transition: all 0.3s ease; user-select: none; }
.star:hover, .star.active { color: var(--accent-color); transform: scale(1.1); }
.star.filled { color: var(--accent-color); }
.comment-section { margin-top: var(--spacing-xl); }
.comment-section label { display: block; font-weight: 600; color: var(--primary-blue); margin-bottom: var(--spacing-sm); font-size: 1.1rem; }
.comment-section textarea { width: 100%; min-height: 120px; padding: var(--spacing-md); border: 2px solid var(--border-light); border-radius: var(--radius-sm); font-family: var(--font-primary); font-size: 1rem; resize: vertical; transition: border-color 0.3s ease; }
.comment-section textarea:focus { outline: none; border-color: var(--primary-blue); }
.char-count { text-align: right; font-size: 0.9rem; color: var(--medium-grey); margin-top: var(--spacing-xs); }
.submit-button { background: var(--primary-blue); color: var(--white); border: none; padding: var(--spacing-lg) var(--spacing-xl); transition: all 0.3s ease; width: 100%; margin-top: var(--spacing-xl); font-size: 1.1rem; font-weight: 600; border-radius: var(--radius-md); cursor: pointer; }
.submit-button:hover { background: var(--light-blue); transform: translateY(-2px); box-shadow: var(--shadow-medium); }
.submit-button:disabled { background: var(--medium-grey); cursor: not-allowed; transform: none; box-shadow: none; }
.success-message { background: #d4edda; color: #155724; padding: var(--spacing-md); border-radius: var(--radius-md); margin: var(--spacing-md) 0; text-align: center; display: none; }
.error-message { background: #f8d7da; color: #721c24; padding: var(--spacing-md); border-radius: var(--radius-md); margin: var(--spacing-md) 0; text-align: center; display: none; }
.success-popup, .error-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center; z-index: 10000; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.success-popup.show, .error-popup.show { opacity: 1; visibility: visible; }
.success-popup-content, .error-popup-content { background: var(--white); padding: var(--spacing-xl); border-radius: var(--radius-lg); text-align: center; max-width: 400px; margin: var(--spacing-md); box-shadow: var(--shadow-heavy); transform: scale(0.8); transition: transform 0.3s ease; border: 1px solid var(--border-light); }
.success-popup.show .success-popup-content, .error-popup.show .error-popup-content { transform: scale(1); }
.success-popup h3 { color: var(--primary-blue); font-family: var(--font-accent); font-size: 1.8rem; margin-bottom: var(--spacing-md); font-weight: 600; }
.success-popup p { color: var(--medium-grey); margin-bottom: var(--spacing-lg); font-size: 1.1rem; }
.success-popup .redirect-button { background: var(--primary-blue); color: var(--white); border: none; padding: var(--spacing-md) var(--spacing-lg); border-radius: var(--radius-sm); cursor: pointer; font-weight: 600; transition: all 0.3s ease; font-size: 1rem; }
.success-popup .redirect-button:hover { background: var(--light-blue); transform: translateY(-2px); }
.error-popup h3 { color: #dc3545; font-family: var(--font-accent); font-size: 1.5rem; margin-bottom: var(--spacing-md); }
.error-popup p { color: var(--medium-grey); margin-bottom: var(--spacing-lg); }
.error-popup .close-button { background: #dc3545; color: var(--white); border: none; padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-sm); cursor: pointer; font-weight: 500; transition: all 0.3s ease; }
.error-popup .close-button:hover { background: #c82333; transform: translateY(-2px); }
@media (max-width: 768px) { .rating-section { padding: var(--spacing-md); margin: var(--spacing-md) 0; } .rating-title h1 { font-size: 2rem; } .star { font-size: 1.8rem; } }

/* ==============================
   Reservation page
   (migrated from reservation.html)
============================== */
.reservation-section { background: var(--white); border-radius: var(--radius-lg); padding: var(--spacing-xl); margin: var(--spacing-xl) 0; box-shadow: var(--shadow-medium); border: 1px solid var(--border-light); }
.reservation-title { text-align: center; margin-bottom: var(--spacing-xl); }
.reservation-title h1 { font-family: var(--font-accent); font-size: 2.5rem; color: var(--primary-blue); margin-bottom: var(--spacing-sm); }
.reservation-title p { color: var(--medium-grey); font-size: 1.1rem; }
.reservation-form { max-width: 800px; margin: 0 auto; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); }
.form-group.full-width { grid-column: 1 / -1; }
/* Labels */
.form-group label { font-weight: 500; color: var(--primary-blue); margin-bottom: var(--spacing-xs); }
/* Unified input/select/textarea styles */
.form-group input,
.form-group select,
.form-group textarea { width: 100%; padding: var(--spacing-sm); border: 2px solid var(--border-light); border-radius: var(--radius-sm); font-size: 1rem; font-family: var(--font-primary); transition: border-color 0.3s ease; background: #fff; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline: none; border-color: var(--primary-blue); }
/* Mobile-friendly selects */
.form-group select { -webkit-appearance: none; appearance: none; background-image: none; }
/* Taller message field */
.reservation-form textarea { min-height: 160px; resize: vertical; line-height: 1.5; }
.reservation-notes { background: linear-gradient(135deg, #fff3cd, #ffeaa7); border: 1px solid #ffc107; border-radius: var(--radius-md); padding: var(--spacing-lg); margin-bottom: var(--spacing-lg); }
.reservation-notes h3 { color: #856404; font-family: var(--font-accent); font-size: 1.3rem; margin-bottom: var(--spacing-sm); }
.reservation-notes p { color: #856404; margin-bottom: var(--spacing-sm); font-size: 0.95rem; }
.reservation-notes .phone-number { font-weight: 600; color: var(--primary-blue); }
@media (max-width: 768px) { .form-grid { grid-template-columns: 1fr; } .reservation-title h1 { font-size: 2rem; } }

/* Inline field hints and errors for forms */
.field-hint { color: var(--medium-grey); font-size: 0.9rem; margin-top: var(--spacing-xs); }
.field-error { color: #dc3545; font-size: 0.9rem; margin-top: var(--spacing-xs); display: none; }
.form-group.invalid input,
.form-group.invalid select,
.form-group.invalid textarea { border-color: #dc3545; }

/* ==============================
   Legal pages (Impressum/Datenschutz)
============================== */
.legal-content { background: var(--greek-white); border-radius: var(--radius-lg); padding: var(--spacing-xl); margin: var(--spacing-xl) 0; box-shadow: var(--shadow-medium); }
.legal-content h1 { font-family: var(--font-accent); color: var(--greek-blue); font-size: 2.5rem; margin-bottom: var(--spacing-lg); text-align: center; }
.legal-content h2 { font-family: var(--font-accent); color: var(--greek-blue); font-size: 1.5rem; margin: var(--spacing-lg) 0 var(--spacing-md) 0; border-bottom: 2px solid var(--greek-blue); padding-bottom: var(--spacing-xs); }
.legal-content h3 { color: var(--deep-blue); font-size: 1.2rem; margin: var(--spacing-md) 0 var(--spacing-sm) 0; }
.legal-content p { color: var(--rich-brown); line-height: 1.6; margin-bottom: var(--spacing-sm); }
.legal-content ul { color: var(--rich-brown); margin: var(--spacing-sm) 0; padding-left: var(--spacing-lg); }
.legal-content li { margin-bottom: var(--spacing-xs); }
.data-table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.data-table th, .data-table td { padding: var(--spacing-xs); border: 1px solid var(--border-light); text-align: left; }
.contact-info { background: var(--sand-beige); padding: var(--spacing-md); border-radius: var(--radius-md); margin: var(--spacing-md) 0; border-left: 4px solid var(--greek-blue); }
.contact-info strong { color: var(--greek-blue); }
@media (max-width: 768px) { .legal-content { padding: var(--spacing-md); } .legal-content h1 { font-size: 2rem; } .legal-content h2 { font-size: 1.3rem; } }

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    text-align: center;
}

.footer-links {
    margin-top: var(--spacing-md);
}

.footer-links a {
    color: var(--white);
    text-decoration: none;
    margin: 0 var(--spacing-md);
    transition: color 0.3s ease;
    font-weight: 500;
}

.footer-links a:hover {
    color: var(--accent-color);
}

/* Responsive Design */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex;
    }
    
    .nav-links {
        position: fixed;
        top: 60px;
        right: -100%;
        width: 280px;
        height: calc(100vh - 60px);
        background: var(--primary-blue);
        flex-direction: column;
        padding: var(--spacing-lg);
        transition: right 0.3s ease;
        gap: var(--spacing-md);
        box-shadow: var(--shadow-medium);
    }
    
    .nav-links.active {
        right: 0;
    }
    
    .nav-links a {
        padding: var(--spacing-md);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: var(--radius-sm);
        text-align: center;
        display: block;
    }
    
    .hero h1 {
        font-size: 2.2rem;
    }
    
    .hero p {
        font-size: 1.1rem;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .map-section {
        padding: var(--spacing-lg);
    }
    
    .info-card {
        padding: var(--spacing-lg);
    }
    
    .info-card h3 {
        font-size: 1.8rem;
    }
    
    .info-card p {
        font-size: 1.1rem;
    }
    
    .info-card .highlight {
        font-size: 1.4rem;
    }
}

@media (max-width: 480px) {
    .nav-links {
        width: 100%;
        right: -100%;
    }
    
    .hero h1 {
        font-size: 1.8rem;
    }
    
    .hero p {
        font-size: 1rem;
    }
    
    .map-section,
    .info-section {
        padding: var(--spacing-md);
        margin: 0 var(--spacing-sm);
    }
    
    .contact-links {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-sm);
    }
    
    .contact-links a {
        width: 100%;
        max-width: 200px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .nav-links {
        flex-direction: column;
        gap: var(--spacing-xs);
    }
    
    .nav-links a {
        text-align: center;
        padding: var(--spacing-sm);
    }
    
    .hero h1 {
        font-size: 1.8rem;
    }
    
    .map-section h2 {
        font-size: 1.5rem;
    }
    
    .info-card {
        padding: var(--spacing-md);
    }
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.mb-sm {
    margin-bottom: var(--spacing-sm);
}

.mb-md {
    margin-bottom: var(--spacing-md);
}

.mb-lg {
    margin-bottom: var(--spacing-lg);
}

.mt-sm {
    margin-top: var(--spacing-sm);
}

.mt-md {
    margin-top: var(--spacing-md);
}

.mt-lg {
    margin-top: var(--spacing-lg);
}

/* Extra small utilities used to remove inline styles for strict CSP */
.mt-20 { margin-top: 20px; }
.max-w-100 { max-width: 100%; }

/* Cookie Consent Banner */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--greek-white);
    border-top: 3px solid var(--greek-blue);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    padding: var(--spacing-lg);
    transform: translateY(100%);
    animation: slideUp 0.5s ease forwards;
}

@keyframes slideUp {
    to {
        transform: translateY(0);
    }
}

.cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.cookie-text h3 {
    color: var(--greek-blue);
    font-family: var(--font-accent);
    font-size: 1.3rem;
    margin-bottom: var(--spacing-sm);
}

.cookie-text p {
    color: var(--rich-brown);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: var(--spacing-sm);
}

.cookie-text p:last-of-type {
    margin-bottom: 0;
}

.cookie-buttons {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.cookie-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.cookie-accept-all {
    background: var(--greek-blue);
    color: var(--greek-white);
}

.cookie-accept-all:hover {
    background: var(--deep-blue);
    transform: translateY(-2px);
}

.cookie-accept-necessary {
    background: var(--greek-white);
    color: var(--greek-blue);
    border: 2px solid var(--greek-blue);
}

.cookie-accept-necessary:hover {
    background: var(--greek-blue);
    color: var(--greek-white);
    transform: translateY(-2px);
}

.cookie-settings {
    background: var(--rich-brown);
    color: var(--greek-white);
}

.cookie-settings:hover {
    background: var(--warm-orange);
    transform: translateY(-2px);
}

.cookie-success-message {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--greek-blue);
    color: var(--greek-white);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-medium);
    z-index: 10001;
    animation: slideIn 0.3s ease;
}

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

@media (max-width: 768px) {
    .cookie-content {
        gap: var(--spacing-sm);
    }
    
    .cookie-text h3 {
        font-size: 1.1rem;
    }
    
    .cookie-text p {
        font-size: 0.9rem;
    }
    
    .cookie-buttons {
        flex-direction: column;
    }
    
    .cookie-btn {
        width: 100%;
        text-align: center;
    }
    
    .cookie-success-message {
        top: 10px;
        right: 10px;
        left: 10px;
        text-align: center;
    }
} 

/* Tighter mobile controls for menu PDF download buttons */
@media (max-width: 768px) {
    .download-links { 
        display: flex; 
        flex-direction: column; 
        gap: var(--spacing-sm); 
        align-items: stretch; 
    }
    .download-link { 
        min-width: 0; 
        width: 100%; 
        padding: var(--spacing-md) var(--spacing-lg); 
        box-sizing: border-box;
    }
}

/* Prevent long links/text from breaking legal layout */
.legal-content a { overflow-wrap: anywhere; }

/* Prevent admin layouts from overflowing on small screens */
@media (max-width: 768px) {
    .admin-header { flex-wrap: wrap; row-gap: var(--spacing-sm); }
    .admin-tabs { flex-wrap: wrap; overflow-x: auto; }
    .reservation-header, .review-header { flex-wrap: wrap; row-gap: var(--spacing-sm); }
}