/* The Cut Company — Salonic booking page theme
 *
 * Overrides the stock Salonic / Material Kit look on thecutcompany.salonic.hu
 * so the visitor does not leave the brand at the moment of booking.
 *
 * This file is the source of truth. It is pasted into
 * Salonic -> Dizajn es arculat -> "Egyedi CSS kod" by hand until the site is
 * live on its own domain; after that, switch to the "Egyedi CSS URL" field
 * pointing at https://theccbarber.hu/salonic-theme.css and clear the code box.
 * See plans/08-salonic-theming.md for the measurements and rejected routes.
 *
 * Every rule is scoped to body.customer-thecutcompany. That class is what
 * limits the sheet to this salon; without it the rules would be inert, so do
 * not "simplify" it away.
 *
 * The colour values below are copied from app/globals.css :root, which stays
 * authoritative. Change them there first.
 */

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&display=swap");

body.customer-thecutcompany {
  --tcc-coal: #0e0e0e;
  --tcc-concrete: #2a2826;
  --tcc-moss: #9cc061;
  --tcc-moss-deep: #7a9942;
  --tcc-chalk: #f2efea;
  --tcc-smoke: #98938a;
  --tcc-fog: #4a463f;
  --tcc-display: "Oswald", "Roboto Condensed", sans-serif;
}

/* ---------------------------------------------------------------- base --- */

body.customer-thecutcompany {
  background-color: var(--tcc-coal) !important;
  color: var(--tcc-chalk) !important;
}

/* Square corners are a brand non-negotiable. The blanket rule is deliberate:
 * Material Kit sets a 3.2px radius on dozens of elements and enumerating them
 * would rot on the next Salonic build. Genuinely circular accents are put back
 * right after. */
body.customer-thecutcompany *,
body.customer-thecutcompany *::before,
body.customer-thecutcompany *::after {
  border-radius: 0 !important;
}
body.customer-thecutcompany .rounded-circle,
body.customer-thecutcompany .btn-just-icon,
body.customer-thecutcompany .fab,
body.customer-thecutcompany .card-avatar,
body.customer-thecutcompany .profil-pic,
body.customer-thecutcompany .profil-pic-small,
body.customer-thecutcompany .inputGroup label::after {
  border-radius: 50% !important;
}

/* Depth comes from grain, vignette and scrims — never from a soft shadow. */
body.customer-thecutcompany *,
body.customer-thecutcompany .btn,
body.customer-thecutcompany .card,
body.customer-thecutcompany .btn-raised {
  box-shadow: none !important;
  text-shadow: none !important;
}

/* -------------------------------------------------------- typography ----- */

body.customer-thecutcompany h1,
body.customer-thecutcompany h2,
body.customer-thecutcompany h3,
body.customer-thecutcompany h4,
body.customer-thecutcompany .title,
body.customer-thecutcompany .card-title,
body.customer-thecutcompany .service-title {
  font-family: var(--tcc-display) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--tcc-chalk) !important;
}

body.customer-thecutcompany p,
body.customer-thecutcompany .description,
body.customer-thecutcompany .duration {
  color: var(--tcc-smoke) !important;
}

/* ------------------------------------------------------------ navbar ----- */

body.customer-thecutcompany .navbar {
  background-color: var(--tcc-coal) !important;
  border-bottom: 1px solid var(--tcc-fog);
}
body.customer-thecutcompany .navbar .nav-link,
body.customer-thecutcompany .navbar .navbar-brand {
  color: var(--tcc-chalk) !important;
  font-family: var(--tcc-display) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Material Icons draws its glyphs from ligatures, so it must keep its own font
 * and its lowercase text. Putting the display face or text-transform on it
 * prints the ligature source instead - the globe turns into the word
 * "LANGUAGE". Restated defensively because several rules above are broad. */
body.customer-thecutcompany .material-icons {
  font-family: "Material Icons" !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--tcc-chalk) !important;
}
/* Salonic pads the brand logo and paints white behind it, which only makes
 * sense for a logo drawn for a light header. The uploaded mark already carries
 * its own Coal ground, so the box has to go or it frames it in white. */
body.customer-thecutcompany .navbar-brand-logo {
  background: transparent !important;
  padding: 0 !important;
}
body.customer-thecutcompany .navbar-brand-logo img {
  padding: 0 !important;
}
body.customer-thecutcompany .navbar .nav-link:hover {
  color: var(--tcc-moss) !important;
}

/* Below 992px the collapsed menu is a fixed off-canvas panel whose ::after
 * pseudo-element paints a full-size white sheet over it. Scoped to the same
 * breakpoint Salonic uses, so the desktop navbar is untouched. */
@media all and (max-width: 991px) {
  body.customer-thecutcompany .navbar-collapse,
  body.customer-thecutcompany .navbar-collapse::after {
    background-color: var(--tcc-coal) !important;
  }
  /* Salonic draws no backdrop behind the panel, so on a Coal page the two
   * would merge into one surface with no edge. */
  body.customer-thecutcompany .navbar-collapse {
    border-left: 1px solid var(--tcc-fog) !important;
  }
  body.customer-thecutcompany .navbar-collapse .navbar-nav .nav-item::after {
    background-color: var(--tcc-fog) !important;
  }
  body.customer-thecutcompany .navbar-collapse .nav-link,
  body.customer-thecutcompany .navbar-collapse .material-icons {
    color: var(--tcc-chalk) !important;
  }
  /* Salonic marks the current page with a near-white pill
   * (rgb(236,237,239)) behind dark text - built for its own white panel.
   * On Coal that pill is what read as "fehéren, olvashatatlan": the text
   * color override above wins (!important), but the light background
   * stayed, so Chalk-on-near-white nearly disappears. */
  body.customer-thecutcompany .navbar-collapse .nav-item.active .nav-link,
  body.customer-thecutcompany .navbar-collapse .nav-item.active .nav-link:hover,
  body.customer-thecutcompany .navbar-collapse .nav-item.active .nav-link:focus,
  body.customer-thecutcompany .navbar-collapse .nav-item.active .nav-link:active {
    background-color: var(--tcc-fog) !important;
    color: var(--tcc-moss) !important;
  }
}
body.customer-thecutcompany .navbar .navbar-toggler .navbar-toggler-icon {
  background-color: var(--tcc-chalk) !important;
}

/* ------------------------------------------------------- page header ----- */

/* The cover sits under a Material Kit scrim. Tinted to Coal and eased off so
 * the cover plate's texture is not flattened to pure black, while the white
 * headline keeps its contrast. */
body.customer-thecutcompany .page-header .header-filter::before,
body.customer-thecutcompany .header-filter::before {
  background: rgba(14, 14, 14, 0.5) !important;
}
body.customer-thecutcompany .page-header {
  background-color: var(--tcc-coal) !important;
}

/* ---------------------------------------------------------- surfaces ----- */

body.customer-thecutcompany .card,
body.customer-thecutcompany .dropdown-menu,
body.customer-thecutcompany .modal-content,
body.customer-thecutcompany .service-item-container {
  background-color: var(--tcc-concrete) !important;
  color: var(--tcc-chalk) !important;
  border: 1px solid var(--tcc-fog) !important;
}
body.customer-thecutcompany .card-header-info {
  background-color: var(--tcc-concrete) !important;
}
body.customer-thecutcompany .dropdown-item {
  color: var(--tcc-chalk) !important;
}
body.customer-thecutcompany .dropdown-item:hover,
body.customer-thecutcompany .dropdown-item:focus {
  background-color: var(--tcc-fog) !important;
  color: var(--tcc-moss) !important;
}
body.customer-thecutcompany hr,
body.customer-thecutcompany .divider_inner {
  border-color: var(--tcc-fog) !important;
  background-color: var(--tcc-fog) !important;
}

body.customer-thecutcompany .price {
  color: var(--tcc-moss) !important;
  font-family: var(--tcc-display) !important;
}

/* ----------------------------------------------------------- buttons ----- */

body.customer-thecutcompany .btn,
body.customer-thecutcompany .btn-primary,
body.customer-thecutcompany .btn-next,
body.customer-thecutcompany .btn-index-select,
body.customer-thecutcompany .salonic-gradient-button {
  background-color: var(--tcc-moss) !important;
  background-image: none !important;
  color: var(--tcc-coal) !important;
  border: none !important;
  font-family: var(--tcc-display) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
body.customer-thecutcompany .btn:hover,
body.customer-thecutcompany .btn:focus,
body.customer-thecutcompany .btn-primary:hover,
body.customer-thecutcompany .btn-next:hover,
body.customer-thecutcompany .salonic-gradient-button:hover {
  background-color: var(--tcc-moss-deep) !important;
  color: var(--tcc-coal) !important;
}

/* Link-style and icon-only buttons must not become moss blocks. */
body.customer-thecutcompany .btn-link,
body.customer-thecutcompany .btn-just-icon,
body.customer-thecutcompany .navbar .btn {
  background-color: transparent !important;
  color: var(--tcc-moss) !important;
}
body.customer-thecutcompany .btn-link:hover,
body.customer-thecutcompany .btn-just-icon:hover {
  background-color: transparent !important;
  color: var(--tcc-moss-deep) !important;
}

body.customer-thecutcompany a {
  color: var(--tcc-moss);
}
body.customer-thecutcompany a:hover {
  color: var(--tcc-moss-deep);
}

/* ------------------------------------------------------------- forms ----- */

/* The single most breakable part: Material Kit's inputs are drawn for a white
 * page, so on Coal they go invisible unless every piece is restated. */
body.customer-thecutcompany .form-control,
body.customer-thecutcompany input:not([type="checkbox"]):not([type="radio"]),
body.customer-thecutcompany textarea,
body.customer-thecutcompany select {
  background-color: var(--tcc-concrete) !important;
  background-image: none !important;
  color: var(--tcc-chalk) !important;
  border: 1px solid var(--tcc-fog) !important;
  padding: 10px 12px !important;
}
body.customer-thecutcompany .form-control:focus,
body.customer-thecutcompany input:not([type="checkbox"]):not([type="radio"]):focus,
body.customer-thecutcompany textarea:focus {
  border-color: var(--tcc-moss) !important;
  outline: none !important;
}
/* The consent tickboxes are plain native inputs, not the .inputGroup widget. */
body.customer-thecutcompany input[type="checkbox"],
body.customer-thecutcompany input[type="radio"] {
  accent-color: var(--tcc-moss);
}
body.customer-thecutcompany ::placeholder {
  color: var(--tcc-smoke) !important;
  opacity: 1;
}
body.customer-thecutcompany label,
body.customer-thecutcompany .bmd-label-floating,
body.customer-thecutcompany .bmd-label-static {
  color: var(--tcc-smoke) !important;
}

/* Phone widget — its dropdown is a separate white panel appended to the field */
body.customer-thecutcompany .iti__country-list,
body.customer-thecutcompany .iti__dropdown-content {
  background-color: var(--tcc-concrete) !important;
  color: var(--tcc-chalk) !important;
  border: 1px solid var(--tcc-fog) !important;
}
body.customer-thecutcompany .iti__country.iti__highlight {
  background-color: var(--tcc-fog) !important;
}
body.customer-thecutcompany .iti__dial-code {
  color: var(--tcc-smoke) !important;
}

/* -------------------------------------------------- content surfaces ----- */

/* Material Kit lifts the page content onto a white sheet (.main-raised on the
 * contact page). Without this the whole page stays white under Chalk text. */
body.customer-thecutcompany .main,
body.customer-thecutcompany .main-raised,
body.customer-thecutcompany .section {
  background-color: var(--tcc-coal) !important;
  color: var(--tcc-chalk) !important;
}
/* The booking summary's service list carries its own `background: white`. */
body.customer-thecutcompany .service-data {
  background: transparent !important;
  color: var(--tcc-chalk) !important;
}
body.customer-thecutcompany .bg-white,
body.customer-thecutcompany .alert-secondary {
  background-color: var(--tcc-concrete) !important;
  color: var(--tcc-chalk) !important;
}
body.customer-thecutcompany .card-profile,
body.customer-thecutcompany .card-header {
  background-color: transparent !important;
}

/* Salonic's text utilities, remapped onto the dark surface. .text-strong is the
 * price in both the service list and the booking summary. */
body.customer-thecutcompany .text-strong,
body.customer-thecutcompany .text-primary {
  color: var(--tcc-moss) !important;
}
body.customer-thecutcompany .text-secondary,
body.customer-thecutcompany .text-small,
body.customer-thecutcompany .text-muted,
body.customer-thecutcompany .control-label {
  color: var(--tcc-smoke) !important;
}
body.customer-thecutcompany .available-times a:not(.btn) {
  color: var(--tcc-chalk) !important;
}

/* ----------------------------------------------- service list rows ------- */

/* Salonic ships label{padding-left:0} and pins the indicator at right:0, so
 * both the title and the tick sit flush against the card edge. */
body.customer-thecutcompany .inputGroup {
  background-color: transparent !important;
}
body.customer-thecutcompany .inputGroup label {
  padding: 16px 64px 16px 16px !important;
  color: var(--tcc-chalk) !important;
}
body.customer-thecutcompany .inputGroup label:hover {
  background-color: rgba(156, 192, 97, 0.06) !important;
}

/* The tick: a hollow ring on dark when unchecked - the stock rule paints it
 * white and keeps a white checkmark inside, which reads as a filled box. */
body.customer-thecutcompany .inputGroup label::after {
  right: 16px !important;
  width: 26px !important;
  height: 26px !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 2px solid var(--tcc-fog) !important;
}
body.customer-thecutcompany .inputGroup input:checked ~ label::after {
  background-color: var(--tcc-moss) !important;
  border-color: var(--tcc-moss) !important;
  background-image: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%230e0e0e' fill-rule='nonzero'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 1px 2px !important;
}
body.customer-thecutcompany .inputGroup input:checked ~ label {
  background-color: rgba(156, 192, 97, 0.1) !important;
}

/* -------------------------------------------------------- calendar ------- */

/* The date picker is Mobiscroll running its light "mbsc-ios" theme, which
 * hardcodes #fff on the panel, the slide and every cell. Its own dark theme
 * (mbsc-ios-dark) is not what Salonic loads, and it is amber-accented anyway,
 * so the surfaces are restated here rather than switched. */
body.customer-thecutcompany .mbsc-ios.mbsc-datepicker-inline,
body.customer-thecutcompany .mbsc-ios.mbsc-datepicker .mbsc-calendar,
body.customer-thecutcompany .mbsc-ios.mbsc-datepicker .mbsc-calendar-slide,
body.customer-thecutcompany .mbsc-ios.mbsc-calendar-cell {
  background: var(--tcc-concrete) !important;
  border-color: var(--tcc-fog) !important;
  color: var(--tcc-chalk) !important;
}
body.customer-thecutcompany .mbsc-calendar-week-day,
body.customer-thecutcompany .mbsc-calendar-day-outer .mbsc-calendar-cell-text {
  color: var(--tcc-smoke) !important;
}
body.customer-thecutcompany .mbsc-calendar-title,
body.customer-thecutcompany .mbsc-calendar-month-name,
body.customer-thecutcompany .mbsc-calendar-year,
body.customer-thecutcompany .mbsc-calendar-button,
body.customer-thecutcompany .mbsc-icon-button {
  color: var(--tcc-moss) !important;
}
body.customer-thecutcompany .mbsc-ios.mbsc-selected .mbsc-calendar-cell-text {
  background: var(--tcc-moss) !important;
  border-color: var(--tcc-moss) !important;
  color: var(--tcc-coal) !important;
}
/* Closed days must read as "there, but not bookable". Fog on Concrete is only
 * 1.9:1 and made the grid look like it had holes in it. */
body.customer-thecutcompany .mbsc-disabled .mbsc-calendar-cell-text {
  color: var(--tcc-smoke) !important;
  opacity: 0.45 !important;
}

/* --------------------------------------------------------- dialogs ------- */

/* Az adatkezelesi tajekoztato / foglalasi szabalyzat nyilatkozatok.
 *
 * The two links in the consent tickbox on the guest-data step do not navigate:
 * they open a jQuery-Confirm dialog (`$.dialog`, `.jconfirm.jconfirm-light`),
 * a library nothing else in the flow shows. Salonic also uses it for error
 * alerts (`$.alert({type:"red"})`), so these rules cover both.
 *
 * `.jconfirm .jconfirm-box` hardcodes `background: white` while the text keeps
 * inheriting Chalk from the body - that is the white-on-white declaration.
 */
body.customer-thecutcompany .jconfirm .jconfirm-box {
  background: var(--tcc-concrete) !important;
  border: 1px solid var(--tcc-fog) !important;
  color: var(--tcc-chalk) !important;
}
/* The light theme's backdrop is #444; the opacity (0.6, set inline by the
 * plugin) is left alone so its close animation still runs. */
body.customer-thecutcompany .jconfirm .jconfirm-bg {
  background-color: var(--tcc-coal) !important;
}
/* The dialog body is the /privacy or /policy fragment, whose heading carries
 * the class `page-header` - the same name Material Kit uses for the cover
 * block. So an <h4> picks up `height: 100px; display: flex` from their sheet
 * and Coal from ours, and prints as a black bar across the dialog. Reset here
 * rather than narrowing the cover rule, which is what that one is for. */
body.customer-thecutcompany .jconfirm .page-header {
  height: auto !important;
  display: block !important;
  background: transparent !important;
  border-bottom: 1px solid var(--tcc-fog) !important;
  padding-bottom: 12px !important;
  margin-bottom: 8px !important;
}

/* The cancel-booking page (`/booking/cancelBooking/<uuid>`) opens a different
 * library again: SweetAlert (the `sweetalert` npm package, 2.x). Its stylesheet
 * is bundled into `widget.min.js` and injected at runtime, so it never appears
 * as a <link> - which is why the 2026-09-02 survey, which read the loaded
 * stylesheets and clicked the booking flow, missed it entirely. */
body.customer-thecutcompany .swal-modal {
  background-color: var(--tcc-concrete) !important;
  border: 1px solid var(--tcc-fog) !important;
}
body.customer-thecutcompany .swal-overlay {
  background-color: rgba(14, 14, 14, 0.85) !important;
}
body.customer-thecutcompany .swal-title,
body.customer-thecutcompany .swal-text {
  color: var(--tcc-chalk) !important;
}
body.customer-thecutcompany .swal-title {
  font-family: var(--tcc-display) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
body.customer-thecutcompany .swal-content__input,
body.customer-thecutcompany .swal-content__textarea {
  background-color: var(--tcc-coal) !important;
  border: 1px solid var(--tcc-fog) !important;
  color: var(--tcc-chalk) !important;
}
body.customer-thecutcompany .swal-button--cancel {
  background-color: var(--tcc-fog) !important;
  color: var(--tcc-chalk) !important;
}

/* The success icon masks its own circle with two white half-discs while the
 * tick draws itself. Both break here: on Coal they are visible rather than
 * invisible, and the blanket radius reset above turns them into rotated
 * rectangles - the grey diamond over the "VISSZAIGAZOLT" heading. Make them
 * transparent rather than hiding them: the layout stays put and only the
 * intro animation loses its wipe. */
body.customer-thecutcompany .swal-icon--success::before,
body.customer-thecutcompany .swal-icon--success::after,
body.customer-thecutcompany .swal-icon--success__hide-corners {
  background: transparent !important;
}

/* --------------------------------------------------------- footer -------- */

/* ------------------------------------------------------ cookie bar ------- */

body.customer-thecutcompany .cc-window {
  background-color: var(--tcc-concrete) !important;
  color: var(--tcc-chalk) !important;
  border-top: 1px solid var(--tcc-fog) !important;
}
body.customer-thecutcompany .cc-btn {
  background-color: var(--tcc-moss) !important;
  color: var(--tcc-coal) !important;
}

/* ------------------------------------------------------------ footer ----- */

body.customer-thecutcompany .footer {
  background-color: var(--tcc-coal) !important;
  border-top: 1px solid var(--tcc-fog);
  color: var(--tcc-smoke) !important;
}
body.customer-thecutcompany .footer a {
  color: var(--tcc-smoke) !important;
}
body.customer-thecutcompany .footer-brand {
  color: var(--tcc-chalk) !important;
  font-family: var(--tcc-display) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
body.customer-thecutcompany .footer a:hover {
  color: var(--tcc-moss) !important;
}