/* ==========================================================
   TIO Booking Overrides
   Matches staging.talkitover.in exactly
   ========================================================== */

:root {
  --tio-orange:  #ffa760;
  --tio-orange-hover: #e08840;
  --tio-dark:    #2c3740;
  --tio-blue:    #278fe2;
  --tio-footer-heading: #8CC4EF;
  --tio-footer-link:    #A3B1BC;
  --tio-footer-bar:     #E7F2FB;
}

/* ----------------------------------------------------------
   1. HIDE UNWANTED LEGACY ELEMENTS
   ---------------------------------------------------------- */

/* Old social sharing bar */
.topSocial,
a.socialLink,
span.socialLink { display: none !important; }

/* Footer social icons column — remove from booking pages */
section.footer .social-links { display: none !important; }

/* Left sidebar */
.lsidebar { display: none !important; }

/* ----------------------------------------------------------
   2. BODY & LAYOUT — fluid, responsive
   ---------------------------------------------------------- */

body {
  background: #f0f2f4 !important;
  font-family: 'DM Sans', sans-serif !important;
  color: var(--tio-dark) !important;
}

.wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.mainn {
  width: 100% !important;
  background: #f0f2f4 !important;
  min-height: 60vh !important;
}

/* Fluid content with responsive padding — same pattern as navbar */
.content {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 40px 15px !important;
  box-sizing: border-box !important;
}
@media (min-width: 768px)  { .content { padding: 40px 45px !important; } }
@media (min-width: 992px)  { .content { padding: 50px 60px !important; } }
@media (min-width: 1366px) { .content { padding: 60px 90px !important; } }
@media (min-width: 1600px) { .content { padding: 60px 120px !important; } }

.innerContent {
  width: 100% !important;
  max-width: 100% !important;
}

/* Content card */
.entryWrap {
  margin-left: 0 !important;
  padding: 32px !important;
  border: 1px solid #e2e6ea !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: 0 2px 12px rgba(44,55,64,0.08) !important;
  max-width: 100% !important;
}
@media (min-width: 768px) { .entryWrap { padding: 40px !important; } }

/* ----------------------------------------------------------
   3. TYPOGRAPHY
   ---------------------------------------------------------- */

.entryWrap h1,
.entryWrap h2,
.entryWrap h3,
.entryWrap h4 {
  font-family: 'Montserrat', sans-serif !important;
  color: var(--tio-dark) !important;
}

.entryWrap h1.pagetitle {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--tio-dark) !important;
  border-bottom: 2px solid var(--tio-orange) !important;
  padding-bottom: 14px !important;
  margin-bottom: 24px !important;
}

.entryWrap p,
.entryWrap label,
.entryWrap td,
.entryWrap li {
  font-family: 'DM Sans', sans-serif !important;
  color: #3a4450 !important;
  line-height: 1.7 !important;
}

.entryWrap a,
.entryWrap a:link {
  color: var(--tio-dark) !important;
  border-bottom-color: var(--tio-orange) !important;
}
.entryWrap a:hover { color: var(--tio-orange) !important; }

.hMainText h2 { border-bottom-color: var(--tio-orange) !important; }

/* ----------------------------------------------------------
   4. BOOKING SECTION COLORS
   ---------------------------------------------------------- */

/* Step indicator numbers & pills — dark instead of green */
.bk-step-pill {
  color: #888 !important;
  border-color: #d0d5da !important;
  background: #f5f6f7 !important;
}
.bk-step-pill.active {
  background: var(--tio-orange) !important;
  border-color: var(--tio-orange) !important;
  color: var(--tio-dark) !important;
  font-weight: 600 !important;
}
.bk-step-pill .pill-num {
  background: rgba(44,55,64,0.15) !important;
  color: var(--tio-dark) !important;
}
.bk-step-pill.active .pill-num {
  background: rgba(44,55,64,0.2) !important;
}

/* Buttons — orange matching staging CTA */
.btn-solid,
#submit,
#button,
input[type="submit"],
button[type="submit"],
.talkitover a {
  background: var(--tio-orange) !important;
  border-color: var(--tio-orange) !important;
  color: var(--tio-dark) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  padding: 10px 24px !important;
  font-size: 15px !important;
  cursor: pointer !important;
  transition: background 0.2s, color 0.2s !important;
}
.btn-solid:hover,
#submit:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background: var(--tio-orange-hover) !important;
  border-color: var(--tio-orange-hover) !important;
  color: #fff !important;
}

/* Admin menu bar */
#lcMenu {
  background: var(--tio-dark) !important;
  border-color: var(--tio-dark) !important;
}
#lcMenu a { color: #fff !important; }
#lcMenu a:hover { color: var(--tio-orange) !important; }

/* Form inputs */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
select,
textarea {
  font-family: 'DM Sans', sans-serif !important;
  border: 1px solid #ced4da !important;
  border-radius: 4px !important;
  color: var(--tio-dark) !important;
  background: #fff !important;
}

/* Placeholders — light grey matching theme */
::placeholder { color: #adb5bd !important; opacity: 1 !important; }
::-webkit-input-placeholder { color: #adb5bd !important; }
::-moz-placeholder { color: #adb5bd !important; }
:-ms-input-placeholder { color: #adb5bd !important; }

/* Form focus */
input:focus,
select:focus,
textarea:focus {
  border-color: var(--tio-orange) !important;
  box-shadow: 0 0 0 2px rgba(255,167,96,0.2) !important;
  outline: none !important;
}

/* Slot selection */
.slot-option:hover,
.slot-option.selected {
  border-color: var(--tio-orange) !important;
  background: #fff5ec !important;
}

/* Info panels */
.bk-info-panel {
  border-left-color: var(--tio-orange) !important;
  background: #fff8f3 !important;
}

/* Checkboxes */
input[type="checkbox"],
input[type="radio"] { accent-color: var(--tio-orange); }

/* Legend */
.legend-dot-free { background: var(--tio-blue) !important; }

/* Thank you */
.bk-summary-value a,
.bk-contact a { color: var(--tio-orange) !important; }

/* ----------------------------------------------------------
   5. BOOK.HTM SPECIFIC OVERRIDES
   (these classes have inline style blocks — need !important)
   ---------------------------------------------------------- */

/* Booking section — left aligned, full width */
.bk-wrap {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Step indicator — inactive pills */
.bk-step-pill {
  background: #f5f6f7 !important;
  border-color: #ced4da !important;
  color: #888 !important;
}
/* Active pill — orange with dark text */
.bk-step-pill.active {
  background: var(--tio-orange) !important;
  border-color: var(--tio-orange) !important;
  color: var(--tio-dark) !important;
  font-weight: 600 !important;
}
/* Pill number circle — white on dark for visibility */
.bk-step-pill .pill-num {
  background: var(--tio-dark) !important;
  color: #fff !important;
}
.bk-step-pill.active .pill-num {
  background: var(--tio-dark) !important;
  color: #fff !important;
}

/* Step number circles beside labels — dark grey/white */
.bk-step-num {
  background: var(--tio-dark) !important;
  color: #fff !important;
}

/* Proceed to Book button */
.bk-proceed {
  background: var(--tio-orange) !important;
  border-color: var(--tio-orange) !important;
  color: var(--tio-dark) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
}
.bk-proceed:hover {
  background: var(--tio-orange-hover) !important;
  border-color: var(--tio-orange-hover) !important;
  color: #fff !important;
}
.bk-proceed:disabled {
  background: #ced4da !important;
  border-color: #ced4da !important;
  color: #888 !important;
  cursor: not-allowed !important;
}

/* Dropdown select — remove green focus */
.bk-select {
  border-color: #ced4da !important;
  font-family: 'DM Sans', sans-serif !important;
  color: var(--tio-dark) !important;
  background: #fff !important;
}
.bk-select:focus {
  border-color: var(--tio-orange) !important;
  box-shadow: 0 0 0 2px rgba(255,167,96,0.2) !important;
  outline: none !important;
}

/* Notes panel — open design, no box */
.bk-notes {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.bk-notes-placeholder {
  color: #adb5bd !important;
}

/* Note heading — replace green with blue accent */
.bk-note-heading {
  color: var(--tio-blue) !important;
}

/* ----------------------------------------------------------
   6. SCHEDULE-STEP-2 SPECIFIC OVERRIDES
   ---------------------------------------------------------- */

/* Breadcrumb — blue tint to stand out */
.bk-breadcrumb {
  background: #eaf4fd !important;
  border: 1px solid #b8d9f5 !important;
  border-left: 4px solid var(--tio-blue) !important;
  color: #555 !important;
}
.bk-breadcrumb a {
  color: var(--tio-blue) !important;
}
.bk-breadcrumb .crumb.active {
  color: var(--tio-dark) !important;
}

/* Selected date bar — orange accent */
.s2-datebar {
  background: #fff8f3 !important;
  border: 1px solid #ffd9b3 !important;
  border-left: 4px solid var(--tio-orange) !important;
}
.s2-datebar label {
  color: var(--tio-dark) !important;
}
.s2-datebar input[type=text] {
  border-color: #ffd9b3 !important;
}

/* Section label strong */
.s2-section-label strong {
  color: var(--tio-dark) !important;
}

/* Slot options — remove green tint */
.slot-option {
  background: #f8f9fa !important;
  border-color: #e2e6ea !important;
}
.slot-option:hover {
  background: #fff5ec !important;
  border-color: var(--tio-orange) !important;
}
.slot-time {
  color: var(--tio-dark) !important;
}

/* Legend dot */
.s2-legend-dot {
  background: #ffa760 !important;
  border-color: #e08840 !important;
}

/* ----------------------------------------------------------
   7. MINIMAL FOOTER — full width breakout
   ---------------------------------------------------------- */

.tio-minimal-footer {
  /* Break out of any nested container to span full viewport */
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  margin-top: 40px;
  background: #2c3740;
  text-align: center;
  padding: 24px 16px;
  font-size: 13px;
  color: #A3B1BC;
  font-family: 'DM Sans', sans-serif;
  box-sizing: border-box;
}
.tio-minimal-footer a {
  color: #A3B1BC !important;
  margin-left: 12px;
  text-decoration: underline !important;
  border-bottom: none !important;
}
.tio-minimal-footer a:hover {
  color: #fff !important;
}

/* ----------------------------------------------------------
   8. FOOTER — exact staging.talkitover.in colors
   ---------------------------------------------------------- */

section.footer {
  background: var(--tio-dark) !important;
  padding-top: 60px !important;
  padding-bottom: 40px !important;
}

/* Fluid padding matching navbar */
section.footer .container-fluid {
  padding-left: 15px !important;
  padding-right: 15px !important;
}
@media (min-width: 768px)  { section.footer .container-fluid { padding-left: 45px !important; padding-right: 45px !important; } }
@media (min-width: 992px)  { section.footer .container-fluid { padding-left: 60px !important; padding-right: 60px !important; } }
@media (min-width: 1366px) { section.footer .container-fluid { padding-left: 90px !important; padding-right: 90px !important; } }

/* Headings */
section.footer .footer-list-heading {
  color: var(--tio-footer-heading) !important;
  font-size: 16px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  margin-bottom: 20px !important;
}

/* Links */
section.footer .footer-list li {
  margin: 12px 0 !important;
}
section.footer .footer-list li a {
  color: var(--tio-footer-link) !important;
  font-size: 15px !important;
  font-family: 'DM Sans', sans-serif !important;
  opacity: 0.8 !important;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: opacity 0.2s !important;
}
section.footer .footer-list li a:hover {
  opacity: 1 !important;
  color: #fff !important;
}

/* Footer logo column text */
section.footer .footer-logo p {
  color: var(--tio-footer-link) !important;
  font-size: 15px !important;
  opacity: 0.8 !important;
}
section.footer .f-logo {
  max-width: 180px !important;
  height: auto !important;
}

/* Footer bar — copyright row */
section.footer .footer-bar {
  margin-top: 48px !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--tio-footer-bar) !important;
}
section.footer .footer-bar p {
  color: var(--tio-footer-link) !important;
  font-size: 15px !important;
  opacity: 0.8 !important;
  font-family: 'DM Sans', sans-serif !important;
}
section.footer .footer-bar .footer-list li a {
  color: var(--tio-footer-link) !important;
}