/* public_html/css/app.css */
* {
    margin:     0;
    padding:    0;
    box-sizing: border-box;
}

:root {
    --green:         #1a6b5a;
    --green-light:   #2d9e7f;
    --green-pale:    #d4ede8;
    --green-bg:      #f0faf7;
    --green-dark:    #0d3d30;
    --amber:         #e8a020;
    --amber-light:   #fff3d4;
    --amber-dark:    #5a3000;
    --teal-mid:      #5a8a80;
    --teal-light:    #7aaa98;
    --border:        #d4ede8;
    --bg:            #f8fffe;
    --white:         #ffffff;
    --text:          #0d3d30;
    --text-mid:      #5a8a80;
    --text-light:    #7aaa98;
    --radius:        10px;
    --radius-lg:     14px;
    --shadow:        0 2px 12px rgba(26,107,90,0.08);
    --shadow-hover:  0 6px 24px rgba(26,107,90,0.14);
}

body {
    font-family:      'Georgia', serif;
    background:       var(--bg);
    color:            var(--text);
    line-height:      1.6;
}

/* ── Navigation ───────────────────────────────── */
.nav {
    background:      var(--white);
    border-bottom:   1px solid var(--border);
    padding:         0 40px;
    height:          64px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    position:        sticky;
    top:             0;
    z-index:         100;
    box-shadow:      var(--shadow);
}

.nav-logo {
    font-size:   1.4rem;
    font-weight: 700;
    color:       var(--green);
    cursor:      pointer;
}

.nav-logo span { color: var(--amber); }

.nav-links {
    display:     flex;
    gap:         28px;
    list-style:  none;
    align-items: center;
}

.nav-links a {
    color:           var(--teal-mid);
    font-size:       0.88rem;
    cursor:          pointer;
    text-decoration: none;
    transition:      color 0.2s;
    font-family:     Arial, sans-serif;
}

.nav-links a:hover { color: var(--green); }

.nav-btn {
    background:    var(--green);
    color:         var(--white);
    border:        none;
    padding:       9px 22px;
    border-radius: 50px;
    font-size:     0.85rem;
    cursor:        pointer;
    font-family:   Georgia, serif;
    transition:    background 0.2s;
}

.nav-btn:hover { background: var(--green-light); }

.nav-btn-outline {
    background:    transparent;
    color:         var(--green);
    border:        1.5px solid var(--green);
    padding:       8px 20px;
    border-radius: 50px;
    font-size:     0.85rem;
    cursor:        pointer;
    font-family:   Georgia, serif;
    margin-right:  8px;
    transition:    all 0.2s;
}

.nav-btn-outline:hover {
    background: var(--green);
    color:      var(--white);
}

/* ── Buttons ──────────────────────────────────── */
.btn {
    background:    var(--green);
    color:         var(--white);
    border:        none;
    padding:       12px 28px;
    border-radius: 8px;
    font-size:     0.9rem;
    cursor:        pointer;
    font-family:   Georgia, serif;
    transition:    all 0.2s;
    display:       inline-block;
}

.btn:hover {
    background: var(--green-light);
    transform:  translateY(-1px);
}

.btn-outline {
    background:    transparent;
    color:         var(--green);
    border:        1.5px solid var(--green);
    padding:       11px 28px;
    border-radius: 8px;
    font-size:     0.9rem;
    cursor:        pointer;
    font-family:   Georgia, serif;
    transition:    all 0.2s;
}

.btn-outline:hover {
    background: var(--green);
    color:      var(--white);
}

.btn-amber {
    background: var(--amber);
    color:      var(--amber-dark);
    border:     none;
    padding:    12px 28px;
    border-radius: 8px;
    font-size:  0.9rem;
    cursor:     pointer;
    font-family: Georgia, serif;
    font-weight: 700;
    transition: all 0.2s;
}

.btn-amber:hover { opacity: 0.9; }

/* ── Search bar ───────────────────────────────── */
.search-bar {
    display:       flex;
    border:        1.5px solid var(--green);
    border-radius: 8px;
    overflow:      hidden;
    background:    var(--white);
}

.search-bar input {
    flex:        1;
    padding:     12px 16px;
    border:      none;
    outline:     none;
    font-size:   0.88rem;
    font-family: Georgia, serif;
    color:       var(--text);
    background:  transparent;
}

.search-bar button {
    background:  var(--green);
    color:       var(--white);
    border:      none;
    padding:     12px 20px;
    font-size:   0.88rem;
    cursor:      pointer;
    font-family: Georgia, serif;
    transition:  background 0.2s;
}

.search-bar button:hover { background: var(--green-light); }

/* ── Cards ────────────────────────────────────── */
.card {
    background:    var(--white);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    overflow:      hidden;
    transition:    transform 0.2s, box-shadow 0.2s;
    cursor:        pointer;
}

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

.card-horiz {
    display:       grid;
    grid-template-columns: 90px 1fr;
    background:    var(--white);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    overflow:      hidden;
    transition:    transform 0.2s, box-shadow 0.2s;
    cursor:        pointer;
}

.card-horiz:hover {
    transform:  translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.card-img-box {
    background:      linear-gradient(135deg, var(--green), var(--green-light));
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       2rem;
    min-height:      100px;
}

.card-img-tall {
    height:          180px;
    background:      linear-gradient(135deg, var(--green), var(--green-light));
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       3rem;
}

.card-body { padding: 14px 16px; }

.card-name {
    font-size:     0.92rem;
    font-weight:   700;
    color:         var(--text);
    margin-bottom: 3px;
}

.card-sub {
    font-size:   0.75rem;
    color:       var(--teal-mid);
    margin-bottom: 8px;
    font-family: Arial, sans-serif;
}

.card-meta {
    display:   flex;
    gap:       6px;
    flex-wrap: wrap;
    align-items: center;
}

/* ── Badges ───────────────────────────────────── */
.badge {
    background:    var(--green-bg);
    border:        1px solid var(--border);
    color:         var(--green);
    padding:       2px 8px;
    border-radius: 50px;
    font-size:     0.7rem;
    font-family:   Arial, sans-serif;
}

.badge-amber {
    background: var(--amber-light);
    border:     1px solid #e8cfa0;
    color:      var(--amber-dark);
    padding:    2px 8px;
    border-radius: 50px;
    font-size:  0.7rem;
    font-family: Arial, sans-serif;
}

.badge-green {
    background: var(--green);
    color:      var(--white);
    padding:    2px 8px;
    border-radius: 50px;
    font-size:  0.7rem;
    font-family: Arial, sans-serif;
}

.stars {
    color:       var(--amber);
    font-size:   0.72rem;
    font-family: Arial, sans-serif;
}

/* ── Section ──────────────────────────────────── */
.section {
    padding:   40px;
    max-width: 1100px;
    margin:    0 auto;
}

.section-tag {
    color:           var(--green);
    font-size:       0.68rem;
    letter-spacing:  2px;
    text-transform:  uppercase;
    margin-bottom:   6px;
    font-family:     Arial, sans-serif;
}

.section-title {
    font-size:     1.6rem;
    color:         var(--text);
    margin-bottom: 6px;
}

.section-divider {
    width:         36px;
    height:        3px;
    background:    var(--green);
    border-radius: 2px;
    margin-bottom: 24px;
}

/* ── Grids ────────────────────────────────────── */
.grid-2 {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   16px;
}

.grid-3 {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   20px;
}

.grid-4 {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   16px;
}

/* ── Forms ────────────────────────────────────── */
.form-card {
    background:    var(--white);
    border:        1px solid var(--border);
    border-radius: var(--radius-lg);
    padding:       32px;
}

.form-group { margin-bottom: 18px; }

.form-label {
    display:       block;
    font-size:     0.75rem;
    color:         var(--teal-mid);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    font-family:   Arial, sans-serif;
}

.form-input {
    width:         100%;
    padding:       10px 14px;
    border:        1.5px solid var(--border);
    border-radius: 8px;
    font-size:     0.88rem;
    font-family:   Georgia, serif;
    color:         var(--text);
    background:    var(--white);
    outline:       none;
    transition:    border-color 0.2s;
}

.form-input:focus { border-color: var(--green); }

.form-select {
    width:         100%;
    padding:       10px 14px;
    border:        1.5px solid var(--border);
    border-radius: 8px;
    font-size:     0.88rem;
    font-family:   Georgia, serif;
    color:         var(--text);
    background:    var(--white);
    outline:       none;
    cursor:        pointer;
}

.form-select:focus { border-color: var(--green); }

.form-status {
    font-size:   0.85rem;
    font-weight: 700;
    min-height:  22px;
    margin-bottom: 12px;
    font-family: Arial, sans-serif;
}

/* ── Calendar ─────────────────────────────────── */
.cal-wrap {
    background:    var(--white);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    padding:       20px;
}

.cal-head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   14px;
}

.cal-month {
    font-size:   0.9rem;
    font-weight: 700;
    color:       var(--text);
    font-family: Arial, sans-serif;
}

.cal-nav-btn {
    background:    none;
    border:        1px solid var(--border);
    color:         var(--teal-mid);
    width:         28px;
    height:        28px;
    border-radius: 6px;
    cursor:        pointer;
    font-size:     0.85rem;
    transition:    all 0.2s;
}

.cal-nav-btn:hover {
    background:    var(--green);
    color:         var(--white);
    border-color:  var(--green);
}

.cal-grid {
    display:         grid;
    grid-template-columns: repeat(7, 1fr);
    gap:             3px;
    text-align:      center;
}

.cal-hdr {
    font-size:   0.62rem;
    color:       var(--teal-mid);
    padding:     4px 0;
    font-family: Arial, sans-serif;
}

.cal-day {
    font-size:     0.75rem;
    padding:       7px 4px;
    border-radius: 5px;
    cursor:        pointer;
    color:         var(--text);
    font-family:   Arial, sans-serif;
    transition:    all 0.15s;
}

.cal-day.empty   { color: transparent; cursor: default; }
.cal-day.avail   { background: var(--green-bg); color: var(--green); font-weight: 600; }
.cal-day.avail:hover { background: var(--green); color: var(--white); }
.cal-day.selected { background: var(--green); color: var(--white); font-weight: 700; }
.cal-day.full    { color: var(--border); cursor: default; }
.cal-day.past    { color: var(--border); cursor: default; }

.cal-legend {
    display:    flex;
    gap:        14px;
    margin-top: 12px;
    font-size:  0.68rem;
    color:      var(--teal-mid);
    font-family: Arial, sans-serif;
}

.legend-dot {
    width:          8px;
    height:         8px;
    border-radius:  50%;
    display:        inline-block;
    margin-right:   4px;
    vertical-align: middle;
}

/* ── Time slots ───────────────────────────────── */
.time-slots {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   6px;
    margin-top:            12px;
}

.time-slot {
    background:    var(--white);
    border:        1.5px solid var(--border);
    border-radius: 6px;
    padding:       8px 6px;
    text-align:    center;
    cursor:        pointer;
    transition:    all 0.15s;
}

.time-slot.avail { border-color: var(--green); }
.time-slot.avail:hover { background: var(--green); }
.time-slot.avail:hover .slot-time { color: var(--white); }
.time-slot.avail:hover .slot-seats { color: rgba(255,255,255,0.7); }
.time-slot.selected { background: var(--green); border-color: var(--green); }
.time-slot.selected .slot-time { color: var(--white); }
.time-slot.selected .slot-seats { color: rgba(255,255,255,0.7); }

.slot-time {
    font-size:   0.75rem;
    font-weight: 700;
    color:       var(--text);
    font-family: Arial, sans-serif;
}

.time-slot.avail .slot-time { color: var(--green); }

.slot-seats {
    font-size:   0.62rem;
    color:       var(--teal-mid);
    font-family: Arial, sans-serif;
}

/* ── Promo cards ──────────────────────────────── */
.promo-card {
    border-radius: var(--radius);
    padding:       18px;
    position:      relative;
    overflow:      hidden;
}

.promo-type {
    font-size:      0.62rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight:    700;
    margin-bottom:  6px;
    font-family:    Arial, sans-serif;
}

.promo-disc {
    font-size:   1.4rem;
    font-weight: 700;
    color:       var(--text);
    line-height: 1.1;
}

.promo-rest {
    font-size:   0.75rem;
    color:       var(--teal-mid);
    margin-top:  4px;
    font-family: Arial, sans-serif;
}

.promo-exp {
    font-size:   0.65rem;
    color:       var(--teal-light);
    margin-top:  8px;
    padding-top: 8px;
    border-top:  1px solid rgba(0,0,0,0.06);
    font-family: Arial, sans-serif;
}

.promo-icon {
    position:  absolute;
    bottom:    -8px;
    right:     6px;
    font-size: 3.5rem;
    opacity:   0.1;
}

/* ── Footer ───────────────────────────────────── */
.footer {
    background:  var(--green-dark);
    color:       rgba(255,255,255,0.65);
    padding:     48px 40px 28px;
    margin-top:  60px;
}

.footer-grid {
    display:               grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap:                   40px;
    margin-bottom:         36px;
}

.footer-logo {
    font-size:     1.3rem;
    font-weight:   700;
    color:         var(--white);
    margin-bottom: 10px;
}

.footer-logo span { color: var(--amber); }

.footer-desc {
    font-size:   0.82rem;
    line-height: 1.7;
}

.footer h4 {
    color:          var(--white);
    font-size:      0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom:  14px;
    font-family:    Arial, sans-serif;
}

.footer ul {
    list-style: none;
    display:    flex;
    flex-direction: column;
    gap:        8px;
}

.footer ul li {
    font-size:  0.82rem;
    cursor:     pointer;
    transition: color 0.2s;
    font-family: Arial, sans-serif;
}

.footer ul li:hover { color: var(--white); }

.footer-bottom {
    border-top:  1px solid rgba(255,255,255,0.1);
    padding-top: 20px;
    text-align:  center;
    font-size:   0.78rem;
    font-family: Arial, sans-serif;
}

/* ── Loading ──────────────────────────────────── */
.loading-state {
    text-align:  center;
    padding:     60px 40px;
    color:       var(--teal-mid);
    font-size:   1rem;
    font-family: Arial, sans-serif;
}

/* ── Empty state ──────────────────────────────── */
.empty-state {
    text-align: center;
    padding:    60px 40px;
}

.empty-icon {
    font-size:     3.5rem;
    margin-bottom: 14px;
}

.empty-title {
    font-size:     1.2rem;
    color:         var(--text);
    margin-bottom: 8px;
}

.empty-sub {
    font-size:   0.85rem;
    color:       var(--teal-mid);
    margin-bottom: 20px;
    font-family: Arial, sans-serif;
}

/* ── Status badges ────────────────────────────── */
.status-pending   { background: var(--amber-light); color: var(--amber-dark); padding: 3px 10px; border-radius: 50px; font-size: 0.72rem; font-family: Arial, sans-serif; }
.status-confirmed { background: var(--green-bg); color: var(--green); padding: 3px 10px; border-radius: 50px; font-size: 0.72rem; font-family: Arial, sans-serif; }
.status-cancelled { background: #fce8e8; color: #a32d2d; padding: 3px 10px; border-radius: 50px; font-size: 0.72rem; font-family: Arial, sans-serif; }

/* ── Responsive ───────────────────────────────── */
@media (max-width: 768px) {
    .nav          { padding: 0 20px; }
    .section      { padding: 28px 20px; }
    .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
    .footer-grid  { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .footer-grid  { grid-template-columns: 1fr; }
}