/* =========================
   Base / Layout / Utilities
   ========================= */
:root{
  --brand:#ff7043;
  --brand-100:#ffe0b2;
  --ink:#333;
  --bg:#fff8f5;
  --panel:#fff;
  --muted:#f6f6f9;
  --shadow:0 2px 18px rgba(0,0,0,0.09);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", sans-serif;
  background:var(--bg);
  color:var(--ink);
}
img{max-width:100%;height:auto;display:block}
h2{text-align:center}

/* =========================
   Header
   ========================= */
/* Header top bar */
.header-top {
  position: relative;
  text-align: center;          /* centers the logo/link */
  padding-top: 1rem;           /* breathing room for the auth control */
}

/* The logo link + image */
.header-top .brand-logo {
  display: inline-block;       /* makes centering reliable with text-align */
}
.header-top .brand-logo img {
  width: 250px;                /* or use max-width if you want it responsive */
  max-width: 100%;
  height: auto;
}

/* Auth area (Login link or Logout form) */
.header-top .auth {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  color: #fff;                 /* header is orange, so keep text white */
}

.header-top .auth a {
  color: #fff;
  text-decoration: underline;
  font-size: .9rem;
}

.header-top .auth button {
  background: none;
  border: none;
  color: #fff;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font: inherit;
}

/* Optional: prevent layout shift if you can set intrinsic size */
.header-top .brand-logo img[width][height] {
  height: auto;
}

header{
  padding:2rem;
  text-align:center;
  background:var(--brand);
  color:#fff;
}
header h1{font-size:2.5rem;margin-bottom:.5rem}
header p{font-size:1.2rem}

/* =========================
   Tabs (Dashboard)
   ========================= */
.tab-content{display:none}
.tab-content.active{display:block}

.dashboard-tabs{
  display:flex;
  border-bottom:2px solid #ccc;
  margin-top:1rem;
  margin-bottom:2rem;
  justify-content:center;
  flex-wrap:wrap;
  gap:1rem;
}
.dashboard-tab{
  padding:.7rem 1.2rem;
  text-decoration:none;
  color:var(--ink);
  font-weight:500;
  border:2px solid transparent;
  border-radius:5px 5px 0 0;
  background:none;
  transition:all .2s ease;
}
.dashboard-tab:hover{background:var(--brand-100);color:#000}
.dashboard-tab.active{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand) var(--brand) transparent var(--brand);
  font-weight:700;
}

/* =========================
   CTA / Marketing blocks
   ========================= */
.cta{
  background:#fff;
  padding:3rem 1rem;
  text-align:center;
}
.cta h2{font-size:2rem;margin-bottom:1rem}
.cta p{font-size:1.1rem;max-width:600px;margin:0 auto 2rem}
.cta a.button{
  background:var(--brand);
  color:#fff;
  padding:1rem 2rem;
  border-radius:8px;
  text-decoration:none;
  font-weight:700;
}

.features{padding:3rem 1rem;max-width:900px;margin:auto}
.features h3{font-size:1.8rem;margin-bottom:1rem}
.features ul{list-style:none;padding:0;margin:0}
.features li{margin-bottom:1rem;font-size:1.1rem}

.price-box{
  margin-top:2rem;
  padding:2rem;
  background:var(--brand-100);
  text-align:center;
  border-radius:8px;
}
.price-box strong{font-size:2rem}

/* =========================
   Footer
   ========================= */
footer{
  text-align:center;
  padding:2rem;
  background:#fbe9e7;
  font-size:.9rem;
}

/* =========================
   Buttons / Inputs (shared)
   ========================= */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="color"],
textarea,
select{
  width:100%;
  padding:.55rem .7rem;
  border:1px solid #ddd;
  border-radius:6px;
  font-size:1.03rem;
  margin-top:.25rem;
  margin-bottom:1.1rem;
  background:#f9f9fb;
  color:#222;
  transition:border .2s ease;
}
input[type="color"]{height:2.5rem;padding:.2rem;width:80px}
textarea{resize:vertical}
input[type="submit"],
.btn-primary-like{
  background:#4CAF50;
  color:#fff;
  border:none;
  border-radius:7px;
  padding:.7rem 1.6rem;
  font-size:1.08rem;
  cursor:pointer;
  transition:background .2s ease;
}
input[type="submit"]:hover,
.btn-primary-like:hover{background:#388E3C}

/* =========================
   Generic “card” pattern
   ========================= */
.card-like{
  background:#fff;
  border-radius:16px;
  box-shadow:var(--shadow);
}

/* =========================
   Buy Card
   ========================= */
.buy-card{
  max-width:288px;
  margin:2rem auto;
  background:#fff8e1;
  border-radius:12px;
  box-shadow:0 4px 10px rgba(0,0,0,0.05);
  overflow:hidden;
  text-align:center;
  transition:transform .2s ease;
}
.buy-card:hover{transform:translateY(-3px)}
.buy-card-image{width:40%;margin:1rem auto 0;border-radius:4px}
.buy-card-content{padding:1.5rem}
.buy-card-title{font-size:1.4rem;margin-bottom:.5rem;color:var(--ink)}
.buy-card-price{font-size:1.2rem;font-weight:700;color:var(--brand);margin-bottom:1.2rem}
.buy-card-button{
  background:var(--brand);
  color:#fff;
  padding:.75rem 1.5rem;
  border:none;border-radius:8px;
  font-size:1rem;font-weight:700;
  cursor:pointer;transition:background .2s ease;
}
.buy-card-button:hover{background:#e64a19}

/* =========================
   Calendar / Availability helpers
   ========================= */
.calendar-btn{
  padding:10px;border:1px solid #ccc;cursor:pointer;background:#fff8e1;
}
.calendar-btn.available{background:#c8e6c9}
.calendar-btn.selected{outline:2px solid #1976d2;background:#bbdefb !important}

.day{
  border:1px solid #ccc;
  padding:10px;margin-bottom:10px;border-radius:8px;
}
.slots{margin-top:5px;list-style:none;padding:0}
.slots li{margin-bottom:4px}
.slots button{margin-left:8px}
.time-input{margin-top:5px}

/* =========================
   Settings Page
   ========================= */
.settings-page{
  max-width:520px;margin:2rem auto;
  background:#fff;padding:2rem 2.5rem 1.7rem;
  border-radius:16px;box-shadow:var(--shadow);
}
.settings-summary{
  margin-top:2.7rem;background:#f4f6fc;
  padding:1.3rem 1rem 1.2rem 1.5rem;border-radius:9px;
  font-size:1.06rem;color:#2c3e50;word-break:break-all;
  box-shadow:0 1px 6px rgba(0,0,0,0.04);
}
.settings-summary b{color:#174a5a}
.settings-link{color:#007BFF;text-decoration:underline;word-break:break-all}

/* =========================
   Profile Page
   ========================= */
.profile-page{
  max-width:520px;margin:2rem auto;
  background:#fff;padding:2.3rem 2.5rem 1.7rem;
  border-radius:16px;box-shadow:var(--shadow);
}
.success{
  background:#eafbe7;color:#297a38;padding:.7rem 1rem;border-radius:7px;margin-bottom:1rem;font-size:1rem;
}
.error{
  background:#fdeaea;color:#a12323;padding:.7rem 1rem;border-radius:7px;margin-bottom:1rem;font-size:1rem;
}
.pw-btn,.cancel-btn{
  background:#4CAF50;color:#fff;border:none;border-radius:7px;
  padding:.55rem 1.3rem;font-size:.99rem;cursor:pointer;transition:background .2s ease;margin-right:.8rem;
}
.pw-btn:hover{background:#388E3C}
.cancel-btn{background:#e74c3c;margin-left:.2rem}
.cancel-btn:hover{background:#be2e1e}
.password-panel{
  background:#f4f8fc;padding:1.3rem 1.1rem 1.2rem 1.5rem;
  border-radius:10px;box-shadow:0 1px 6px rgba(0,0,0,0.04);margin-top:1.5rem;
}
.section-divider{border-bottom:1px solid #eee;margin:2.2rem 0 1.5rem}

/* =========================
   Appointments Page
   ========================= */
.appointments-page{
  max-width:750px;margin:2rem auto;background:#fff;
  padding:2.1rem 2.5rem 1.7rem;border-radius:16px;box-shadow:var(--shadow);
}
.appt-table{
  width:100%;border-collapse:collapse;margin-bottom:1.2rem;
  font-size:1.07rem;background:#f9fafb;border-radius:8px;overflow:hidden;
}
.appt-table th,.appt-table td{
  padding:.78em 1.05em;text-align:left;border-bottom:1px solid #ececec;
}
.appt-table th{background:#f3f5fb;color:#333;font-weight:700;font-size:1.01em}
.appt-table tr:last-child td{border-bottom:none}
.appt-table tr:hover td{background:#eaf6ff;transition:background .18s}
.appt-status{font-weight:700;border-radius:5px;padding:.2em .8em;display:inline-block}
.status-confirmed{background:#eafbe7;color:#297a38}
.status-pending{background:#fdf7e3;color:#d49400}
.status-canceled,.status-cancelled{background:#fdeaea;color:#a12323}
.delete-btn{
  background:#fbe9e9;color:#a12323;border:1px solid #f1c1c1;
  padding:.45em 1em;border-radius:7px;font-size:.95rem;font-weight:700;cursor:pointer;
  transition:background .2s,color .2s, transform .05s;box-shadow:0 1px 3px rgba(0,0,0,0.06);
}
.delete-btn:hover{background:#f8caca;color:#7c1c1c}
.delete-btn:active{background:#f3b1b1;transform:scale(.98)}
.appt-status-select{
  font-weight:700;border-radius:5px;padding:.2em .8em;font-size:.95rem;border:1px solid #ccc;background:#fff;color:#174a5a;transition:border .2s;
}
.appt-status-select:focus{outline:none;border-color:#7cbfea;box-shadow:0 0 0 2px rgba(0,123,255,0.2)}

/* =========================
   Meeting Types
   ========================= */
.types-page{
  max-width:600px;margin:2rem auto;background:#fff;
  padding:2rem 2.5rem 1.5rem;border-radius:16px;box-shadow:var(--shadow);
}
.types-page h2{margin:0 0 1.2rem;color:#174a5a;font-size:1.38rem;font-weight:700}
.new-type-form{
  background:#f4f8fc;padding:1.5rem 1.2rem 1.3rem;border-radius:11px;margin-bottom:2rem;
  box-shadow:0 1px 7px rgba(0,0,0,0.06);
}
.new-type-form h3{margin:0 0 1.05rem;font-size:1.09rem;color:#236080}
.new-type-form label{display:block;margin-bottom:1.07rem;font-weight:700;color:#234}
.new-type-form .btn{background:#4CAF50;color:#fff;border:none;border-radius:7px;padding:.68rem 1.5rem;font-size:1.05rem;cursor:pointer;transition:background .2s}
.new-type-form .btn:hover{background:#388E3C}
.appointment-type{
  background:#f9fafb;padding:1.15rem 1.2rem 1.02rem;border-radius:9px;margin-bottom:1.45rem;
  box-shadow:0 1px 6px rgba(0,0,0,0.03);font-size:1.08rem;
}
.appointment-type h3{margin:0 0 .77rem;color:#222;font-size:1.07rem;font-weight:700}
.appointment-type p{margin:.22rem 0 .5rem;color:#444;font-size:1.01rem}

/* =========================
   Availability Editor (Weekly)
   ========================= */
.availability h2{margin:1rem 0}
.time-range{margin-top:.5rem;display:flex;gap:.5rem;align-items:center}
.type-label{color:#888;font-size:.93em;margin-left:.8em}
.type-input{min-width:120px}
select,input,button{font-size:1rem}

/* =========================
   Responsive Tweaks
   ========================= */
@media (max-width:600px){
  header h1{font-size:2rem}
  .cta h2{font-size:1.5rem}
}
/* Center the whole Booking tab */
#booking-page{
  max-width: 960px;        /* page width */
  margin: 0 auto;          /* center the section */
  padding: 0 16px;
  text-align: center;      /* center headings + simple rows */
}

/* Center + constrain the days container */
#booking-page #container{
  max-width: 900px;        /* inner width */
  margin: 0 auto;          /* center the container */
  display: grid;           
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  justify-items: center;   /* centers cards in each grid cell */
}

/* Make each day card a nice centered card */
#booking-page .day{
  width: 100%;
  max-width: 500px;        /* card width cap */
  margin: 0 auto;          /* extra safety centering */
  background: #fff;        /* optional: if not already set */
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 12px;
}

/* Optional: tidy the top controls and save row (removes need for inline styles) */
#booking-page .availability-controls{
  margin: 1rem 0;
}
#booking-page .availability-controls label{
  margin: 0 .5rem;
}
#booking-page .save-row{
  margin-top: 2rem;
}
/* Stack labels & inputs on the Settings form */
.settings-page form label{
  display:block;
  font-weight:700;          /* keep your styling */
  color:#333;
  margin-top:.9rem;
}

/* Ensure the color picker sits on its own line too */
.settings-page form input[type="color"]{
  display:block;
  margin-top:.25rem;
  width:80px;               /* your existing size */
  padding:.2rem;
}
/* Layout helpers for marketing sections */
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.grid-2{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media (min-width:768px){.grid-2{grid-template-columns:1fr 1fr}}
.panel-soft{background:#fff3e0}
.btn-block{width:100%}