:root{--booking-blue:#ffc400;--booking-line:#3a3421;--booking-muted:#8f8d86}
html{background:#101113;overscroll-behavior-y:none}
.booking-body{background:#101113;overscroll-behavior-y:none}
.shop-avatar{background:#ffc400;color:#111}
.catalog-tabs{background:#242116}.catalog-tabs button{color:#b6a55f}.catalog-tabs button.active{background:#17181b;color:#fff}
.service-card-price{color:#ffc400}.service-duration{background:#2b281d;color:#e9d994}.service-card-foot{border-color:#3b3523}.available{background:#705b0e;color:#ffe992}
.service-card button,.professional-card button{background:#ffc400;color:#111;font-weight:700}
.professional-card .avatar{background:#332d19;color:#ffd84a}
.schedule-head{border-color:#393320}.schedule-head>button{border-color:#493d18}.schedule-head>span,.selected-service small,.time-title span,.time-group>small{color:#d5b83f}
.professional-choice,.day-button,.time-grid button{border-color:#3e3826}.professional-choice.selected{border-color:#ffc400;color:#ffc400}
.day-button.selected,.time-grid button.selected{border-color:#ffc400;background:#ffc400;color:#111;font-weight:700}
.schedule-screen{padding-bottom:24px}.continue-button{position:static;bottom:auto;margin:22px 0 8px;box-shadow:none}.continue-button:disabled{background:#4a411d;color:#b7a353}.time-groups{padding-bottom:2px}
@media(max-width:599px){.booking-app{min-height:100dvh;padding-bottom:64px}.booking-header{height:62px;padding-inline:13px}.catalog-screen,.schedule-screen,.details-screen{padding:12px}.catalog-tabs{margin-bottom:10px}.service-catalog,.professional-catalog{gap:8px}.service-card,.professional-card{padding:12px}.schedule-head{padding-bottom:11px}.selected-service{margin:11px 0;padding:11px}.schedule-section{margin-top:13px}.schedule-section h2{margin-bottom:8px}.day-button{height:52px}.time-groups{gap:11px}.time-grid button{height:41px}.continue-button{margin-top:16px}.booking-review{margin:11px 0}.details-screen form{gap:11px}}
.continue-button,.details-screen form button{background:#ffc400;color:#111}
.continue-button:disabled{background:#4a401b;color:#978335}
.booking-review span{color:#d2b94f}.details-screen input{border-color:#403a29}
.booking-nav{border-color:#393320}.booking-nav button.active{color:#ffc400;box-shadow:inset 0 2px #ffc400}
.booking-app{padding-bottom:0}.continue-button{bottom:12px}
.inline-icon,.booking-header svg,.booking-nav svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.inline-icon{width:14px;height:14px;flex:none}.service-duration,.available,.service-card button,.professional-card button{display:inline-flex;align-items:center;gap:6px}.service-card button .inline-icon,.professional-card button .inline-icon{width:17px;height:17px}.booking-header svg{width:21px;height:21px}.booking-nav button{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px}.booking-nav svg{width:19px;height:19px}
.booking-extras{display:grid;gap:8px;margin:15px 0}.booking-extras details{border:1px solid #3a3421;border-radius:9px;background:#18191d;overflow:hidden}.booking-extras summary{height:50px;padding:0 13px;display:flex;align-items:center;gap:9px;color:#d2bd67;font-size:12px;cursor:pointer;list-style:none}.booking-extras summary::-webkit-details-marker{display:none}.booking-extras summary svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.booking-extras summary span{flex:1}.booking-extras summary b{transition:transform .2s}.booking-extras details[open] summary b{transform:rotate(180deg)}.coupon-entry{display:flex;gap:7px;padding:0 12px 12px}.coupon-entry input{min-width:0;flex:1;height:42px;padding:0 11px;border:1px solid #403a29;border-radius:6px;background:#111214;color:#fff;text-transform:uppercase}.coupon-entry button{height:42px;padding:0 13px;border:0;border-radius:6px;background:#ffc400;color:#111;font-weight:700}.booking-extras details>p{min-height:0;margin:-4px 12px 11px;color:#d0b94f;font-size:10px}.booking-extras textarea{width:calc(100% - 24px);min-height:88px;margin:0 12px 12px;padding:11px;border:1px solid #403a29;border-radius:6px;background:#111214;color:#fff;font:12px/1.5 var(--font);resize:vertical}.coupon-applied{border-color:#7e6815!important}.coupon-success{color:#72d5a2!important}.payment-box{margin:12px 0 14px;padding:14px;border:1px solid #5b4910;border-radius:9px;background:#1c1a12}.payment-box[hidden]{display:none}.payment-box div{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}.payment-box small,.payment-box strong,.payment-box span{display:block}.payment-box small{color:#b99f36;font-size:9px;letter-spacing:1.4px;text-transform:uppercase}.payment-box strong{color:#ffc400;font:800 22px var(--display)}.payment-box p{margin:9px 0 12px;color:#c9c0a2;font-size:11px;line-height:1.5}.payment-box button{height:40px;width:100%;border:0;border-radius:7px;background:#ffc400;color:#111;font-weight:800}.payment-box span{margin-top:9px;color:#dfd2a5;font-size:10px;word-break:break-all}.payment-check{display:flex!important;align-items:center;gap:9px!important;padding:11px;border:1px solid #3a3421;border-radius:8px;background:#18191d;color:#e8ddb8!important}.payment-check[hidden]{display:none!important}.payment-check input{width:17px;height:17px;padding:0;accent-color:#ffc400}

/* Refinamento da etapa final: menos brilho pesado, mais leitura. */
.details-screen{padding-bottom:22px}.booking-review{border-color:#4a3d18;background:linear-gradient(180deg,#1a1b1f,#16171a)}.booking-review strong{font-size:16px}.booking-review span{color:#d9bd42;font-size:11px;line-height:1.45}.payment-box{position:relative;margin:14px 0 14px;padding:16px;border-color:#6b5613;background:linear-gradient(180deg,#1d1a10 0%,#15140f 100%);box-shadow:inset 0 1px 0 rgba(255,196,0,.08)}.payment-box:before{content:"";position:absolute;left:16px;right:16px;top:46px;height:1px;background:rgba(255,196,0,.16)}.payment-box div{padding-bottom:14px}.payment-box small{color:#c5a737;font-size:8px;letter-spacing:1.9px}.payment-box strong{font-size:25px;line-height:1;color:#ffca16}.payment-box p{margin:13px 0 13px;color:#d2c8a5;font-size:11px}.payment-box button{height:44px;border-radius:6px;box-shadow:0 3px 0 #8e7100;font-size:13px;transition:transform .16s ease,box-shadow .16s ease}.payment-box button:active{transform:translateY(2px);box-shadow:0 1px 0 #8e7100}.payment-box span{padding:9px 10px;border:1px dashed rgba(255,196,0,.24);border-radius:6px;background:rgba(0,0,0,.16);color:#cab879}.booking-extras{gap:9px;margin:13px 0}.booking-extras details{border-color:#423817;background:#17181b}.booking-extras details[open]{border-color:#6b5613;background:#181815}.booking-extras summary{height:48px;color:#d7bd4b}.coupon-entry{padding:0 12px 10px}.coupon-entry input{height:45px;border-color:#4d431e;background:#101114}.coupon-entry button{height:45px;min-width:82px;border-radius:6px;font-size:12px}.booking-extras details>p{margin:0 12px 12px;color:#69d59a}.details-screen label{color:#c2c0b8}.details-screen input{border-color:#41381f;background:#15161a}.details-screen input:focus{border-color:#ffc400;outline:0}.payment-check{height:48px;padding:0 13px;border-color:#41381f;background:#15161a;color:#ece3c2!important}.payment-check input{width:18px;height:18px;border-radius:4px}.details-screen form button{height:55px;margin-top:12px;border-radius:8px;box-shadow:0 4px 0 #8e7100;font-size:14px}.details-screen form button:active{transform:translateY(2px);box-shadow:0 2px 0 #8e7100}@media(max-width:380px){.payment-box strong{font-size:22px}.coupon-entry{display:grid;grid-template-columns:1fr}.coupon-entry button{width:100%}}
.payment-check{position:relative;cursor:pointer;transition:border-color .18s,background .18s}.payment-check:hover{border-color:#6b5613;background:#181815}.payment-check input{appearance:none;display:grid;place-items:center;flex:0 0 20px;width:20px!important;height:20px!important;margin:0;border:1px solid #635421;border-radius:5px;background:#101114;transition:.18s}.payment-check input:checked{border-color:#ffc400;background:#ffc400}.payment-check input:checked:after{content:"";width:9px;height:5px;border-left:2px solid #111;border-bottom:2px solid #111;transform:rotate(-45deg) translate(1px,-1px)}.payment-check:has(input:checked){border-color:#ffc400;background:#211d0f;color:#fff8d9!important}.details-screen form p:not(:empty){padding:9px 10px;border:1px solid #623631;border-radius:6px;background:#241817;color:#f0a19b!important}

@media(max-width:599px){
  .booking-body{height:100dvh;min-height:100dvh;overflow:hidden}
  .booking-app{height:100dvh;min-height:0!important;display:flex;flex-direction:column;overflow:hidden;padding-bottom:0!important}
  .booking-header{flex:0 0 auto}
  .catalog-screen,.schedule-screen,.details-screen,.booking-success,.client-screen{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:94px!important}
  .booking-nav{position:absolute;left:0;right:0;bottom:0}
}

/* Aba Sobre — informações da barbearia com leitura mais clara. */
.shop-about {
  padding-bottom: 28px;
}

.shop-about > h1 {
  margin: 4px 0 12px;
  font-size: clamp(23px, 6vw, 30px);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.shop-about .about-description {
  position: relative;
  margin: 0 0 18px;
  padding: 16px 17px 16px 20px;
  border: 1px solid #292b2f;
  background: #151619;
  color: #d3d4d7;
  font-size: 13px;
  line-height: 1.72;
}

.shop-about .about-description::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: #ffc400;
}

.shop-about > section {
  margin-top: 10px;
  padding: 15px 16px 16px;
  border: 1px solid #292b2f;
  background: #121316;
}

.shop-about > section > small {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
}

.shop-about > section > small::before {
  content: "";
  width: 13px;
  height: 1px;
  background: #ffc400;
}

.shop-about section p {
  margin-top: 12px;
  color: #e3e3e5;
  font-size: 12px;
  line-height: 1.55;
}

.shop-about .about-chips {
  gap: 6px;
  margin-top: 13px;
}

.shop-about .about-chips span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-color: #4a4020;
  background: #211e13;
  color: #f0df98;
  font-size: 10px;
  line-height: 1.2;
}

.shop-about .hours-list {
  margin-top: 12px;
  border-top: 0;
}

.shop-about .hours-list li {
  min-height: 34px;
  padding: 8px 2px;
  border-bottom-color: #292b2f;
  font-size: 11px;
}

.shop-about .hours-list li:last-child {
  border-bottom: 0;
}

.shop-about .hours-list span {
  color: #a8a9ad;
}

.shop-about .hours-list strong {
  color: #f4f4f5;
  font-weight: 600;
}

.shop-about .contact-shop {
  min-height: 48px;
  margin-top: 14px;
  border: 1px solid #ffc400;
  box-shadow: 0 10px 24px rgba(255, 196, 0, 0.08);
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.shop-about .contact-shop:active {
  transform: translateY(1px);
}

@media (min-width: 620px) {
  .shop-about {
    max-width: 720px;
    margin-inline: auto;
  }

  .shop-about > section {
    padding: 18px 20px;
  }

  .shop-about .hours-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
  }
}

@media (max-width: 420px) {
  .shop-about .about-description {
    padding: 14px 14px 14px 17px;
    font-size: 12px;
  }

  .shop-about > section {
    padding: 14px;
  }
}

/* Área do cliente: o atributo hidden precisa prevalecer sobre os layouts em grid. */
.client-screen[hidden],.client-access[hidden],.client-account[hidden]{display:none!important}

.client-account{padding-bottom:18px}
.client-profile{margin-top:4px;padding:16px 0}
.client-filters{margin:0 0 8px;padding:4px;border:1px solid #292b2f;border-radius:8px;background:#141518}
.client-filters button{height:40px;border:0;border-radius:5px;color:#92959c;transition:background .18s ease,color .18s ease,box-shadow .18s ease}
.client-filters button.active{background:#222117;color:#ffc400;box-shadow:none}
.client-appointments{display:grid;gap:8px;padding-top:4px}
.client-appointments .client-appointment{grid-template-columns:72px minmax(0,1fr);gap:14px;padding:14px;border:1px solid #292b2f;border-radius:9px;background:#151619}
.client-appointment time{display:flex;flex-direction:column;justify-content:center;padding-right:13px;border-right:1px solid #303136;font-variant-numeric:tabular-nums}
.client-appointment time span{margin:0;color:#9a9da3;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.client-appointment time strong{margin-top:5px;color:#ffc400;font:700 17px var(--display);text-transform:none}
.client-appointment-info{min-width:0}
.client-appointment-title{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.client-appointment-title strong{min-width:0;overflow:hidden;color:#f1f1f2;font-size:13px;text-overflow:ellipsis;white-space:nowrap}
.client-appointment-title small{flex:none;width:auto!important;margin:0!important;padding:4px 6px!important;border-radius:4px;font-size:8px!important;line-height:1}
.client-appointment-info>span{margin-top:7px!important;color:#a1a3a8!important;font-size:10px!important}
.client-appointment-info>em{display:block;margin-top:4px;color:#6f7279;font-size:9px;font-style:normal}
.client-appointment.is-confirmed .client-appointment-title small{border-color:#315f49;color:#74d6a4}
.client-appointment.is-pending .client-appointment-title small{border-color:#6d5b19;color:#f0cb42}
.client-appointment.is-cancelled .client-appointment-title small{border-color:#633633;color:#e6918b}

@media(max-width:599px){
  .client-screen{padding:12px 16px 0}
  .client-access{padding-top:14px}
  .client-account{animation:client-account-in .22s ease-out both}
  .client-profile{position:sticky;top:-12px;z-index:3;margin-inline:-16px;padding:13px 16px;border-bottom:1px solid #292b2f;background:rgba(16,17,19,.96);backdrop-filter:blur(10px)}
  .client-appointments .client-appointment{grid-template-columns:64px minmax(0,1fr);gap:11px;padding:12px}
  .client-appointment time{padding-right:10px}
}

@keyframes client-account-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
/* Catalogo publico: servicos e planos */
.catalog-screen {
  padding-inline: clamp(14px, 4vw, 22px);
}

.catalog-screen > h1 {
  margin: 14px 0 12px;
  font-size: clamp(1.25rem, 4vw, 1.55rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.catalog-tabs {
  position: sticky;
  top: 0;
  z-index: 8;
  min-height: 48px;
  margin: 0 -2px 16px;
  padding: 4px;
  overflow: hidden;
  border: 1px solid #302d23;
  border-radius: 7px;
  background: rgba(24, 23, 18, 0.96);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(12px);
}

.catalog-tabs button {
  position: relative;
  min-height: 38px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #aaa18a;
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.025em;
  transition: color 160ms ease, background-color 160ms ease;
}

.catalog-tabs button:hover {
  color: #f3f3f3;
  background: rgba(255, 255, 255, 0.035);
}

.catalog-tabs button.active {
  background: #17181b;
  color: #fff;
  box-shadow: inset 0 0 0 1px #f4f4f4;
}

.catalog-tabs button.active::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 2px;
  left: 12px;
  height: 2px;
  border-radius: 2px;
  background: #ffc400;
}

.service-catalog,
.membership-catalog {
  gap: 12px;
}

.service-card {
  position: relative;
  overflow: hidden;
  padding: 17px;
  border: 1px solid #363225;
  border-radius: 8px;
  background: linear-gradient(145deg, #1d1f22 0%, #191a1c 100%);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.service-card::before,
.membership-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, #ffc400, rgba(255, 196, 0, 0));
}

.service-card:hover {
  transform: translateY(-2px);
  border-color: #65551f;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}

.service-card-head {
  align-items: flex-start;
  gap: 16px;
}

.service-card-head h2 {
  margin: 1px 0 0;
  color: #f4f4f4;
  font-size: 1.06rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.service-card-price {
  flex: none;
  font-size: 1.28rem;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.service-duration,
.available {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  min-height: 27px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 196, 0, 0.13);
  border-radius: 5px;
  font-size: 0.75rem;
  line-height: 1;
}

.service-duration {
  margin-top: 12px;
  background: #272419;
  color: #e8ddbc;
}

.service-duration svg,
.available svg,
.service-card button svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.8;
}

.service-card-foot {
  align-items: center;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid #373328;
}

.available {
  background: #56480e;
  color: #fff0a8;
}

.service-card button {
  min-width: 112px;
  min-height: 40px;
  padding: 9px 15px;
  border: 1px solid #ffd029;
  border-radius: 6px;
  box-shadow: 0 5px 14px rgba(255, 196, 0, 0.12);
  transition: transform 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.service-card button:hover {
  transform: translateY(-1px);
  background: #ffd126;
  box-shadow: 0 8px 20px rgba(255, 196, 0, 0.18);
}

.service-card button:active {
  transform: translateY(0);
}

.membership-card {
  position: relative;
  overflow: hidden;
  padding: 20px;
  border: 1px solid #393426;
  border-radius: 7px;
  background: linear-gradient(145deg, #1b1d20 0%, #17181a 100%);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
}

.membership-card small {
  display: block;
  margin-bottom: 9px;
  color: #ffc400;
  font-size: 0.63rem;
  font-weight: 750;
  letter-spacing: 0.2em;
}

.membership-card h2 {
  margin: 0 0 8px;
  color: #f5f5f5;
  font-size: 1.15rem;
  line-height: 1.2;
  letter-spacing: -0.018em;
}

.membership-card > strong {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin: 0 0 13px;
  color: #ffc400;
  font-size: clamp(1.5rem, 6vw, 1.8rem);
  line-height: 1;
  letter-spacing: -0.035em;
}

.membership-card > strong em {
  color: #c9c4b8;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
}

.membership-card > p {
  margin: 0 0 15px;
  color: #aaa8a3;
  font-size: 0.79rem;
  line-height: 1.55;
}

.membership-card ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 14px 0 0;
  border-top: 1px solid #343434;
  list-style: none;
}

.membership-card li {
  color: #d4d3cf;
  font-size: 0.76rem;
  line-height: 1.4;
}

.membership-card li::first-letter {
  color: #ffc400;
}

.membership-card > a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 45px;
  margin-top: 17px;
  padding: 11px 16px;
  border: 1px solid #ffd020;
  border-radius: 5px;
  background: #ffc400;
  color: #111;
  font-size: 0.86rem;
  font-weight: 750;
  text-decoration: none;
  transition: transform 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.membership-card > a:hover {
  transform: translateY(-1px);
  background: #ffd126;
  box-shadow: 0 8px 22px rgba(255, 196, 0, 0.15);
}

@media (max-width: 599px) {
  .catalog-screen {
    padding-inline: 13px;
  }

  .catalog-screen > h1 {
    margin-top: 13px;
    font-size: 1.27rem;
  }

  .catalog-tabs {
    min-height: 45px;
    max-height: 52px;
    margin-bottom: 13px;
    overflow: hidden;
    transform-origin: top;
    will-change: max-height, opacity, transform;
    transition: max-height 220ms ease, opacity 160ms ease, transform 220ms ease,
      margin-bottom 220ms ease, padding 220ms ease, border-width 220ms ease;
  }

  .catalog-tabs.is-scroll-hidden {
    min-height: 0;
    max-height: 0;
    margin-bottom: 0;
    padding-block: 0;
    border-width: 0;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
  }

  .catalog-tabs button {
    min-height: 35px;
    padding-inline: 4px;
    font-size: 0.67rem;
  }

  .service-catalog,
  .membership-catalog {
    gap: 10px;
  }

  .service-card,
  .membership-card {
    padding: 15px;
  }

  .service-card-head h2 {
    font-size: 1rem;
  }

  .service-card-price {
    font-size: 1.18rem;
  }

  .service-card-foot {
    gap: 10px;
  }

  .service-card button {
    min-width: 105px;
    padding-inline: 12px;
  }

  .membership-card > a {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-tabs,
  .catalog-tabs button,
  .service-card,
  .service-card button,
  .membership-card > a {
    transition: none;
  }
}

/* Navegação persistente da página pública. */
.booking-body { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
.booking-nav {
  position: fixed;
  z-index: 30;
  left: 50%;
  right: auto;
  bottom: 0;
  width: min(430px, 100%);
  height: auto;
  display: block;
  transform: translateX(-50%);
  border-top: 1px solid #303237;
  background: rgba(14, 15, 18, 0.98);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(12px);
}
.booking-nav-actions { display: grid; grid-template-columns: repeat(3, 1fr); min-height: 63px; }
.booking-nav .booking-nav-actions button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: #a4a8b0;
  font-size: 10px;
}
.booking-nav .booking-nav-actions button::after { display: none; }
.booking-nav .booking-nav-actions button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.booking-nav .booking-nav-actions button span { font-size: 10px; }
.booking-nav .booking-nav-actions button.active { color: #ffc400; box-shadow: inset 0 2px #ffc400; }
.booking-nav > small { display: block; padding: 0 10px calc(7px + env(safe-area-inset-bottom)); color: #85878d; text-align: center; font-size: 9px; }
.booking-nav > small a { color: #b9bbc0; font-weight: 600; text-decoration: none; }
.booking-nav > small a:hover, .booking-nav > small a:focus-visible { color: #ffc400; text-decoration: underline; }

/* Refinamento da área do cliente e histórico. */
.client-screen { padding-bottom: 120px !important; scrollbar-width: thin; scrollbar-color: #55575d transparent; }
.client-profile { gap: 13px; }
.client-profile > span { flex: 0 0 44px; box-shadow: 0 0 0 3px rgba(255, 196, 0, 0.08); }
.client-profile > div { overflow: hidden; }
.client-profile > div strong, .client-profile > div small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-profile > div strong { font-size: 14px; line-height: 1.3; }
.client-profile > button { padding: 8px 0 8px 10px; font-weight: 650; }
.client-filters { margin: 13px 0 12px; padding: 3px; }
.client-filters button { font-weight: 550; }
.client-appointments { gap: 10px; padding: 0 0 20px; }
.client-appointments .client-appointment { min-height: 94px; padding: 13px; border-color: #303238; background: linear-gradient(145deg, #17181b, #141517); box-shadow: 0 5px 14px rgba(0, 0, 0, 0.1); }
.client-appointments .client-appointment-title { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; }
.client-appointments .client-appointment-title > strong { display: block; min-width: 0; overflow: hidden; font-size: 13px; line-height: 1.3; text-overflow: ellipsis; text-transform: capitalize; white-space: nowrap; }
.client-appointments .client-appointment-title > small { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-width: 72px; min-height: 20px; margin: 0 !important; padding: 3px 7px !important; }
.client-appointment-info > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 599px) {
  .client-screen { padding-bottom: 125px !important; }
  .client-screen::-webkit-scrollbar { width: 3px; }
  .client-screen::-webkit-scrollbar-thumb { border-radius: 999px; background: #55575d; }
}