@import url("https://fonts.googleapis.com/css?family=Montserrat");

/* =========================================================
   Click2Reserve – Online Widget (ONE optimized CSS)
   Merge of:
   - /online/<venue>/style.css
   - /online/<venue>/css/widget-theme.css
========================================================= */

/* ---------- Theme tokens (defaults = dark) ---------- */
:root{
  /* Base surfaces */
  --c2r-bg: #121212;
  --c2r-text: #f1f1f1;
  --c2r-surface: #1e1e1e;
  --c2r-surface2: #161616;
  --c2r-border: #333;

  /* Inputs */
  --c2r-input-bg: #0f0f0f;
  --c2r-input-text: #f1f1f1;
  --c2r-input-border: #3a3a3a;

  /* Brand */
  --c2r-accent: #c8a03a;          /* GOLD (PHP can override inline if you want) */
  --c2r-accent-hover: #b88f2f;

  /* Buttons / selection */
  --c2r-selected-bg: var(--c2r-accent);
  --c2r-selected-border: var(--c2r-accent);
  --c2r-selected-text: #111;

  /* Slot/seat normal */
  --c2r-choice-bg: #ffffff;
  --c2r-choice-border: #cbd5e1;
  --c2r-choice-text: #0f172a;

  /* Animated border gradient */
  --c2r-border-gradient: linear-gradient(
    270deg,
    #ffffff,
    #000000,
    #ffffff,
    #000000,
    #000000,
    #ffffff,
    #000000
  );
  --c2r-border-speed: 80s;

  /* Convenience aliases */
  --c2r-gold: var(--c2r-accent);
  --c2r-gold-hover: var(--c2r-accent-hover);
}


/* Light overrides */
.c2r-theme-light{
  --c2r-bg: #ffffff;
  --c2r-text: #0f172a;
  --c2r-surface: #ffffff;
  --c2r-surface2: #f8fafc;
  --c2r-border: #e2e8f0;

  --c2r-input-bg: #ffffff;
  --c2r-input-text: #0f172a;
  --c2r-input-border: #cbd5e1;

  /* Light border gradient looks “premium” (soft + gold) */
  --c2r-border-gradient: linear-gradient(
    270deg,
    #f8fafc,
    #e2e8f0,
    #c8a03a,
    #f8fafc,
    #e2e8f0
  );
}

/* Auto follows OS */
@media (prefers-color-scheme: light){
  .c2r-theme-auto{
    --c2r-bg: #ffffff;
    --c2r-text: #0f172a;
    --c2r-surface: #ffffff;
    --c2r-surface2: #f8fafc;
    --c2r-border: #e2e8f0;

    --c2r-input-bg: #ffffff;
    --c2r-input-text: #0f172a;
    --c2r-input-border: #cbd5e1;

    --c2r-border-gradient: linear-gradient(
      270deg,
      #f8fafc,
      #e2e8f0,
      #c8a03a,
      #f8fafc,
      #e2e8f0
    );
  }
}

/* ---------- Base page (ONLY when theme class exists) ---------- */
html, body{ height:100%; }
html{ width:100%; }

body.c2r-theme-light,
body.c2r-theme-dark,
body.c2r-theme-auto{
  margin:0;
  padding:0;
  background: var(--c2r-bg);
  color: var(--c2r-text);
  font-family: Arial, sans-serif;
}

p{ color: inherit; }
a{ color: inherit; }
a:hover{ color: var(--c2r-accent); text-decoration: none; }

/* Mobile footer spacing fix (kept from your original) */
@media (max-width: 767px){
  #footer{
    margin-left:-20px;
    margin-right:-20px;
    padding-left:20px;
    padding-right:20px;
  }
}

/* ---------- Small utilities ---------- */
.text-sm{ font-size:.875rem; line-height:1.25rem; color:inherit; }
#error, .error{ color:red; font-family:verdana, Helvetica, sans-serif; }
option:disabled{ color:grey; font-style:italic; }
.initiallyHidden{ display:none; }

#contact-form{ height:auto; overflow-y:auto; }

.c2r-disabled{ opacity:.55; pointer-events:none; }
.c2r-hidden{ display:none !important; }

/* Step indicator */
.step.finish{ background-color:#04AA6D; }

/* Checkmark animation */
@keyframes popIn{
  0%   { transform:scale(.2); opacity:0; }
  80%  { transform:scale(1.2); opacity:1; }
  100% { transform:scale(1); }
}
.animated-checkmark{ animation: popIn .6s ease-out forwards; transform-origin:center; }

.reservation-code{ font-size:1.3rem; margin-top:20px; padding:10px; display:inline-block; }
.copy-btn{ vertical-align:middle; transition:all .3s ease; }

/* Invalid fields */
input.invalid, select.invalid, textarea.invalid{ border:2px solid red; }

/* ---------- Embed mode ---------- */
.c2r-embed #footer,
.c2r-embed .logoA{ display:none !important; }
.c2r-embed section{ max-width:100% !important; }

/* ---------- Section card (used in deposit/thankyou) ---------- */
section{
  z-index:999;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  padding:1rem;
  border:1px solid var(--c2r-border);
  border-radius:4px;
  background: var(--c2r-surface2);
  color: var(--c2r-text);
  position:relative;
  top:2px;
  height:auto;
  margin:0 auto;
  text-align:center;
}

/* ---------- Widget shell ---------- */
.reserveWidget{
  z-index:1000;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  padding:1rem;
  border:1px solid var(--c2r-border);
  border-radius:4px;
  position:relative;
  top:2px;
  height:auto;
  margin-left:auto;
  margin-right:auto;
  background: var(--c2r-surface);
  color: var(--c2r-text);
}

/* Keep grid safe: DO NOT style .row globally */
.reserveWidget .row{ color: inherit; }

/* Animated border wrapper */
.block{
  position:relative;
  background: var(--c2r-surface2);
}

/* Animated border around the form */
.block:before,
.block:after{
  content:'';
  position:absolute;
  left:-2px;
  top:-2px;
  background: var(--c2r-border-gradient);
  background-size:400%;
  width:calc(100% + 4px);
  height:calc(100% + 4px);
  z-index:-1;
  animation: steam var(--c2r-border-speed) linear infinite;
}
@keyframes steam{
  0%   { background-position:0 0; }
  50%  { background-position:400% 0; }
  100% { background-position:0 0; }
}
.block:after{ filter: blur(50px); }

/* Country code select */
#country_code{
  color: var(--c2r-input-text);
  background: var(--c2r-input-bg);
}

/* Output (thankyou / summaries) */
.rsvOut{
  color: var(--c2r-choice-text);
  background: var(--c2r-choice-bg);
  font-size:15px;
  padding:10px;
}

/* Before accepting Reservation */
.noActive{
  background-color:#ddd;
  cursor:not-allowed;
}

/* ---------- Inputs / labels ---------- */
.reserveWidget .control-label{
  font-size:18px;
  color: inherit;
}

.reserveWidget input[type="text"]{
  padding:10px;
  margin:0;
  font-size:18px;
  color: var(--c2r-input-text);
  background: var(--c2r-input-bg);
  border:1px solid var(--c2r-input-border);
}

/* Widget-scoped buttons */
.reserveWidget .btn{
  border-radius:5px;
  font-weight:300;
  height:45px;
}

/* input group sizing */
.reserveWidget .input-group > .form-control:not(:first-child),
.reserveWidget .input-group > .custom-select:not(:first-child){
  font-size:18px;
}

/* Alerts */
.reserveWidget .alert{
  width:100%;
  max-width:350px;
  margin-left:auto;
  margin-right:auto;
}

/* ---------- Horizontal scrollable (seats) ---------- */
div.horizontal-scrollable{
  overflow:auto;
  white-space:nowrap;
}
div.horizontal-scrollable a{
  display:inline-block;
  color: inherit;
  text-align:center;
  padding:14px;
  text-decoration:none;
}
div.horizontal-scrollable a:hover{ background-color:#777; }

/* ---------- Wizard tabs ---------- */
.tab{ display:none; }

.step{
  height:15px;
  width:15px;
  margin:0 2px;
  background-color:#bbbbbb;
  border:none;
  border-radius:50%;
  display:inline-block;
  opacity:.5;
}
.step.active{ opacity:1; }

/* ---------- Form fields theme (scoped to widget area only) ---------- */
#contact-page input:not([type="radio"]):not([type="checkbox"]),
#contact-page select,
#contact-page textarea,
#contact-page .form-control,
#contact-page .custom-select,
#contact-page .form-select{
  background: var(--c2r-input-bg) !important;
  color: var(--c2r-input-text) !important;
  border:1px solid var(--c2r-input-border) !important;
}

#contact-page input::placeholder,
#contact-page textarea::placeholder{
  opacity:.7;
  color: var(--c2r-input-text) !important;
}

#contact-page .form-control:focus,
#contact-page select:focus,
#contact-page textarea:focus{
  border-color: var(--c2r-accent) !important;
  box-shadow: 0 0 0 .2rem rgba(0,0,0,.12) !important;
}

.c2r-theme-light #contact-page,
.c2r-theme-light #contact-page *{
  color: inherit;
}

.c2r-theme-light #contact-page .text-danger{ color:#dc2626 !important; }
.c2r-theme-light #contact-page .text-muted{  color:#64748b !important; }

.c2r-theme-light #contact-page,
.c2r-theme-light #contact-form,
.c2r-theme-light #contact-page .reserveWidget,
.c2r-theme-light #contact-page .tab,
.c2r-theme-light #contact-page .block,
.c2r-theme-light section{
  background: var(--c2r-surface) !important;
  color: var(--c2r-text) !important;
}

/* ---------- Cards ---------- */
.c2r-card{
  background: var(--c2r-surface) !important;
  color: var(--c2r-text) !important;
  border: 1px solid var(--c2r-border) !important;
}

/* ---------- Seats / Time slots ---------- */
.input-group-btn input[type="radio"],
.input-group-btnDate input[type="radio"],
.input-group-btnTime input[type="radio"]{
  display:none;
}

.input-group-btn label,
.input-group-btnDate label,
.input-group-btnTime label,
label.c2r-seat,
label.c2r-slot,
.btnDate,
.btnTime{
  background: var(--c2r-choice-bg) !important;
  color: var(--c2r-choice-text) !important;
  height:45px;
  border-radius:5px;
  border:1px solid var(--c2r-choice-border) !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  vertical-align:middle;
  cursor:pointer;
  user-select:none;
}

.input-group-btn label{ width:45px; }
.input-group-btnDate label, .btnDate{ width:120px; }
.input-group-btnTime label{ width:80px; }
.btnTime{ width:120px; }

.input-group-btn label.active,
.input-group-btnDate label.active,
.input-group-btnTime label.active,
label.c2r-seat.active,
label.c2r-slot.active,
label.c2r-slot.is-selected{
  background: var(--c2r-selected-bg) !important;
  border-color: var(--c2r-selected-border) !important;
  color: var(--c2r-selected-text) !important;
}

label.c2r-slot .c2r-time,
label.c2r-seat,
label.c2r-seat *{
  color: inherit !important;
}

label.c2r-disabled,
label.c2r-slot.c2r-disabled{
  opacity:.55;
  pointer-events:none;
}

.c2r-theme-dark  #contact-page label.c2r-seat.btn-outline-secondary{
  color:#fff !important;
  border-color:#555 !important;
  background: transparent !important;
}

.c2r-theme-dark  #contact-page label.c2r-seat.btn-outline-secondary:hover{
  background: rgba(255,255,255,.08) !important;
}

/* Keep selected seats clearly GOLD in dark mode */
.c2r-theme-dark #contact-page .input-group-btn input[type="radio"]:checked + label.c2r-seat.btn-outline-secondary,
.c2r-theme-dark #contact-page label.c2r-seat.btn-outline-secondary.active{
  background: var(--c2r-selected-bg) !important;
  border-color: var(--c2r-selected-border) !important;
  color: var(--c2r-selected-text) !important;
}

@media (prefers-color-scheme: dark){
  .c2r-theme-auto #contact-page label.c2r-seat.btn-outline-secondary{
    color:#fff !important;
    border-color:#555 !important;
    background: transparent !important;
  }

  .c2r-theme-auto #contact-page label.c2r-seat.btn-outline-secondary:hover{
    background: rgba(255,255,255,.08) !important;
  }

  .c2r-theme-auto #contact-page .input-group-btn input[type="radio"]:checked + label.c2r-seat.btn-outline-secondary,
.c2r-theme-auto #contact-page label.c2r-seat.btn-outline-secondary.active{
    background: var(--c2r-selected-bg) !important;
    border-color: var(--c2r-selected-border) !important;
    color: var(--c2r-selected-text) !important;
  }
}

/* Seat-limit badge readability (light mode) */
.c2r-theme-light #contact-page .c2r-badge.c2r-badge-muted{
  background:#fde68a !important; /* soft gold */
  color:#111827 !important;      /* dark readable text */
  border:1px solid #f59e0b !important;
}

@media (prefers-color-scheme: light){
  .c2r-theme-auto #contact-page .c2r-badge.c2r-badge-muted{
    background:#fde68a !important;
    color:#111827 !important;
    border:1px solid #f59e0b !important;
  }
}

/* ---------- Buttons ---------- */
#contact-page .btn-primary,
#btn-submit.btn-primary{
  background: var(--c2r-accent) !important;
  border-color: var(--c2r-accent) !important;
  color: #111 !important;
  font-weight: 800;
}

#contact-page .btn-primary:hover,
#btn-submit.btn-primary:hover{
  background: var(--c2r-accent-hover) !important;
  border-color: var(--c2r-accent-hover) !important;
  color:#111 !important;
}

#contact-page .btn-primary:focus,
#btn-submit.btn-primary:focus{
  box-shadow: 0 0 0 .2rem rgba(200,160,58,.25) !important;
}

/* Next button class you already use */
.reserveWidget .btn.btn-c2r-gold,
.btn.btn-c2r-gold{
  background-color: var(--c2r-gold) !important;
  border-color: var(--c2r-gold) !important;
  color:#111 !important;
  font-weight:800;
}
.reserveWidget .btn.btn-c2r-gold:hover,
.btn.btn-c2r-gold:hover,
.reserveWidget .btn.btn-c2r-gold:focus,
.btn.btn-c2r-gold:focus{
  background-color: var(--c2r-gold-hover) !important;
  border-color: var(--c2r-gold-hover) !important;
  color:#111 !important;
}
.reserveWidget .btn.btn-c2r-gold:disabled,
.btn.btn-c2r-gold:disabled{
  background-color:#e7d3a5 !important;
  border-color:#e7d3a5 !important;
  color:#444 !important;
  opacity:.95;
  cursor:not-allowed;
}

/* ---------- Deposit note (Step 1 + Step 2) ---------- */
.c2r-deposit-box{
  margin-top: 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--c2r-border);
  background: var(--c2r-surface2);
  color: var(--c2r-text);
}

.c2r-deposit-box .c2r-deposit-title{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-weight:800;
}

.c2r-deposit-box .c2r-deposit-muted{
  opacity:.8;
}

/* Optional: make it pop a bit in light mode */
.c2r-theme-light .c2r-deposit-box{
  background: var(--c2r-surface2);
  border-color: var(--c2r-border);
}