/* =============================================
   style.css — Κοινό CSS για όλες τις σελίδες
   delivery.flyballoons.gr
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

:root {
    --red: #c0392b;
    --red-dark: #a93226;
    --ink: #2b2b2b;
    --grey-light: #f4f4f4;
    --grey-mid: #e0e0e0;
    --grey-dark: #666;
    --white: #fff;
    --shadow: 0 2px 12px rgba(0,0,0,.08);
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
    background: var(--grey-light);
    color: var(--ink);
    font-family: 'Roboto', Calibri, sans-serif;
    min-height: 100vh;
}

/* ── Header ── */
.site-header {
    background: var(--white);
    border-bottom: 3px solid var(--red);
    padding: 0 40px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 50;
}
.header-logo { display:flex; align-items:center; text-decoration:none; }
.header-logo img { height:44px; width:auto; display:block; }
.logo-fallback { font-size:20px; font-weight:700; color:var(--red); font-family:'Roboto',Calibri,sans-serif; }
.header-back { color:var(--grey-dark); font-size:13px; text-decoration:none; font-weight:500; }
.header-back:hover { color:var(--red); }

/* ── Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 22px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Roboto', Calibri, sans-serif;
    cursor: pointer;
    border: none;
    transition: background .15s;
    text-decoration: none;
}
.btn-red  { background: var(--red); color: #fff; }
.btn-red:hover  { background: var(--red-dark); }
.btn-red:disabled { background: #ccc; cursor:not-allowed; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #444; }
.btn-outline { background: transparent; border: 1.5px solid var(--grey-mid); color: var(--ink); }
.btn-outline:hover { border-color: var(--ink); }

/* ── Form elements ── */
.box {
    background: var(--white);
    border-radius: 10px;
    padding: 24px;
    box-shadow: var(--shadow);
    margin-bottom: 20px;
    border: 1px solid var(--grey-mid);
}
.box h2 { font-size:17px; font-weight:700; margin-bottom:16px; color:var(--ink); }

.field { margin-bottom: 14px; }
.field label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 5px;
    color: var(--grey-dark);
    text-transform: uppercase;
    letter-spacing: .4px;
}
.field label .req { color: var(--red); }
.field input, .field textarea, .field select {
    width: 100%;
    padding: 10px 13px;
    border: 1.5px solid var(--grey-mid);
    border-radius: 7px;
    font-size: 14px;
    font-family: 'Roboto', Calibri, sans-serif;
    background: var(--white);
    color: var(--ink);
    transition: border-color .15s;
    outline: none;
}
.field input:focus, .field textarea:focus { border-color: var(--red); }
.field textarea { resize: vertical; min-height: 75px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ── Messages ── */
.msg { padding:10px 14px; border-radius:7px; font-size:14px; margin-bottom:14px; }
.msg-error   { background:#fdecea; color:var(--red); border:1px solid #f5c6c2; }
.msg-success { background:#eafaf1; color:#27ae60; border:1px solid #a9dfbf; }
.msg-info    { background:#fef9ec; color:#8a6914; border:1px solid #f9e4a0; }

/* ── Steps bar ── */
.steps { display:flex; margin-bottom:28px; border-radius:8px; overflow:hidden; border:1px solid var(--grey-mid); }
.step { flex:1; padding:12px 10px; font-size:13px; font-weight:500; background:var(--white); color:var(--grey-dark); border-right:1px solid var(--grey-mid); text-align:center; transition:all .2s; }
.step:last-child { border-right:none; }
.step.active { background:var(--ink); color:#fff; }
.step.done   { background:var(--grey-light); color:var(--ink); }
.step-num { font-size:17px; font-weight:700; display:block; }

/* ── Summary box ── */
.summary-box { background:var(--grey-light); border-radius:8px; padding:14px 16px; margin-bottom:18px; border:1px solid var(--grey-mid); }
.summary-row { display:flex; justify-content:space-between; padding:6px 0; font-size:14px; border-bottom:1px solid var(--grey-mid); }
.summary-row:last-child { border-bottom:none; }

/* ── Order info ── */
.order-info { background:var(--grey-light); border-radius:7px; padding:12px 14px; margin-top:10px; font-size:14px; display:none; border-left:3px solid #27ae60; }

/* ── Calendar ── */
.month-label { font-size:17px; font-weight:700; margin-bottom:14px; color:var(--ink); }
.cal { background:var(--white); border-radius:10px; padding:20px; box-shadow:var(--shadow); margin-bottom:16px; border:1px solid var(--grey-mid); }
.cal-header { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; margin-bottom:6px; }
.cal-header span { text-align:center; font-size:11px; font-weight:500; color:var(--grey-dark); padding:5px 0; text-transform:uppercase; letter-spacing:.4px; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.cal-day { aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:6px; font-size:13px; font-weight:500; cursor:pointer; transition:all .15s; border:1.5px solid transparent; }
.cal-day.empty, .cal-day.past { color:#ccc; cursor:default; }
.cal-day.unavailable { color:#ddd; cursor:not-allowed; }
.cal-day.available { background:var(--grey-light); color:var(--ink); }
.cal-day.available:hover { background:#fdecea; color:var(--red); }
.cal-day.selected { background:var(--red); color:#fff; border-color:var(--red); }
.cal-day.today { border-color:var(--red); }

/* ── Slot buttons ── */
.slots-label { font-size:14px; font-weight:500; margin-bottom:10px; color:var(--ink); }
.slots-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px; margin-bottom:20px; }
.slot-btn { padding:11px 12px; border-radius:7px; border:1.5px solid var(--grey-mid); background:var(--white); cursor:pointer; font-family:'Roboto',Calibri,sans-serif; text-align:center; transition:all .15s; }
.slot-btn:hover { border-color:var(--red); background:#fdecea; }
.slot-btn.selected { background:var(--red); border-color:var(--red); color:#fff; }
.slot-btn .time { font-size:14px; font-weight:500; display:block; }

/* ── Week grid (appointments) ── */
.week-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.week-nav button { background:var(--white); border:1.5px solid var(--grey-mid); border-radius:6px; padding:6px 14px; cursor:pointer; font-family:'Roboto',Calibri,sans-serif; font-size:13px; font-weight:500; transition:all .15s; }
.week-nav button:hover { border-color:var(--red); color:var(--red); }
.week-nav button:disabled { color:#ccc; cursor:not-allowed; border-color:var(--grey-mid); }
.week-label { font-size:15px; font-weight:700; }
.week-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.day-col { background:var(--white); border-radius:9px; overflow:hidden; border:1px solid var(--grey-mid); }
.day-header { background:var(--ink); color:#fff; text-align:center; padding:10px 6px; }
.day-header .day-name { font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.5px; opacity:.7; }
.day-header .day-num { font-size:22px; font-weight:700; display:block; line-height:1.1; }
.slot-item { margin:6px; padding:9px; border-radius:6px; background:var(--grey-light); border:1.5px solid var(--grey-mid); cursor:pointer; text-align:center; transition:all .15s; font-family:'Roboto',Calibri,sans-serif; }
.slot-item:hover { border-color:var(--red); background:#fdecea; }
.slot-item.selected { background:var(--red); border-color:var(--red); color:#fff; }
.slot-item .stime { font-size:13px; font-weight:500; display:block; }
.day-empty { padding:16px 8px; text-align:center; font-size:12px; color:var(--grey-dark); }

/* ── Success screen ── */
.success-screen { display:none; text-align:center; padding:48px 20px; }
.success-screen .icon { font-size:52px; margin-bottom:18px; }
.success-screen h2 { font-size:26px; font-weight:700; margin-bottom:10px; }
.success-screen p { color:var(--grey-dark); font-size:15px; line-height:1.7; max-width:420px; margin:0 auto 20px; }
.ref-badge { display:inline-block; background:var(--white); border:1.5px solid var(--grey-mid); border-radius:8px; padding:10px 20px; font-size:18px; font-weight:700; letter-spacing:1px; margin-bottom:20px; }

/* ── Footer ── */
.foot { text-align:center; color:var(--grey-dark); font-size:13px; padding:20px 0 40px; }
.foot a { color:var(--red); text-decoration:none; }

/* ── Responsive ── */
@media(max-width:600px) {
    .site-header { padding:0 16px; }
    .header-logo img { height:36px; }
    .grid2 { grid-template-columns:1fr; }
    .week-grid { grid-template-columns:repeat(2,1fr); }
}