/* MyCut refresh: discovery rails, universal search, market navigation and auth. */

/* Wider desktop canvas: use more of the available app workspace. */
@media (min-width: 821px) {
  .app-main.with-app-nav { padding-left: 18px; padding-right: 26px; }
  .discover-page.app-wrap { width: min(100%, 1580px); max-width: 1580px !important; padding: 26px clamp(26px, 3.2vw, 54px) 56px; }
  .discover-page .featured-shop-pro { grid-template-columns: minmax(0, 1.62fr) minmax(300px, .78fr); gap: 18px; }
  .discover-page .featured-shop-media, .discover-page .featured-shop-side { min-height: 390px; }
  .discover-page .section-heading h2 { font-size: 22px !important; }
  .discover-page .shops-section, .discover-page .service-section, .discover-page .discovery-categories-pro { margin-top: 24px !important; }
  .market-page { max-width: 1540px !important; padding-left: clamp(26px, 3.2vw, 54px) !important; padding-right: clamp(26px, 3.2vw, 54px) !important; }
  .market-product-page .market-product-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(34px, 4vw, 68px); }
  .market-product-page .market-gallery-main { aspect-ratio: 1.08 / 1; }
  .universal-search-page { max-width: 1540px !important; padding-left: clamp(28px, 4vw, 62px) !important; padding-right: clamp(28px, 4vw, 62px) !important; }
}

/* The barber section on the home/discovery page is a proper horizontal rail. */
.discover-page .home-barbers-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 2px 10px !important;
  touch-action: pan-x;
}
.discover-page .home-barbers-row::-webkit-scrollbar { display: none; }
.discover-page .home-barbers-row > .home-place-card,
.discover-page .home-barbers-row > .live-skeleton-card {
  flex: 0 0 232px !important;
  width: 232px !important;
  min-width: 232px !important;
  scroll-snap-align: start;
}
.discover-page .home-barbers-row > .home-place-card {
  display: block !important;
  padding: 6px !important;
  border-radius: 18px !important;
  background: #fff !important;
  border: 1px solid rgba(20, 22, 26, .08) !important;
  box-shadow: 0 10px 30px rgba(20, 22, 26, .045) !important;
}
.discover-page .home-barbers-row .home-place-media { aspect-ratio: 1.12 / 1 !important; border-radius: 14px !important; overflow: hidden; }
.discover-page .home-barbers-row .home-place-copy { padding: 10px 7px 7px !important; }
.discover-page .home-barbers-row .home-place-copy strong { font-size: 13px !important; }
.discover-page .home-barbers-row .home-place-copy small { font-size: 10px !important; }

/* Universal search starts with a back arrow and the search field on one line. */
.universal-search-page { max-width: 1500px; margin: 0 auto; padding: 24px 36px 100px; color: #17181c; }
.universal-search-header { display: none !important; }
.universal-search-topbar { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 14px; margin: 2px 0 24px; }
.universal-search-topbar .search-header-back { width: 44px; height: 44px; border-radius: 14px; flex: 0 0 auto; box-shadow: 0 7px 20px rgba(23, 24, 28, .04); }
.universal-search-topbar .universal-search-box { min-width: 0; }
.universal-search-input-wrap { min-height: 52px; height: 52px; border-radius: 15px; box-shadow: 0 7px 22px rgba(23, 24, 28, .035); }
.universal-search-input-wrap input { font-size: 14px; }
.universal-filter-row { padding-top: 11px; }
.universal-results { margin-top: 18px; }
.universal-results-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.universal-result-media { height: clamp(150px, 15vw, 220px); }
.universal-result-card { border-radius: 16px; overflow: hidden; }
.universal-result-body h3 { font-size: 12px; }
.universal-result-body p, .universal-result-meta { font-size: 9px; }
.search-header-back { color: #33363b; }

/* Hide both app footers while the universal search overlay is open. */
body.search-open .mobile-bottom-nav,
body.search-open .market-mobile-nav { display: none !important; }

/* Marketplace footer: Home, Explore, Market, Cart and Account. It replaces the generic footer on market routes. */
@media (max-width: 820px) {
  body:has(.market-page) .mobile-bottom-nav { display: none !important; }
  body:has(.market-page:not(.market-product-page)) .market-mobile-nav { display: grid !important; }
  body:has(.market-product-page) .market-mobile-nav { display: none !important; }
}
.market-mobile-nav { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 3px !important; padding: 6px !important; }
.market-mobile-nav a { min-width: 0; font-size: 9px !important; font-weight: 700 !important; }
.market-mobile-nav a .icon { width: 17px; height: 17px; }
.market-mobile-nav a.is-active { background: #17181c !important; color: #fff !important; }
.market-mobile-nav a:not(.is-active) { color: #888b91 !important; }
.market-mobile-nav a.is-active::after { content: ""; position: absolute; inset: auto 32% 4px; height: 2px; border-radius: 99px; background: #a6e0bd; }
.market-product-page .market-mobile-nav,
body[data-market-view="product"] .market-mobile-nav { display: none !important; }

/* Login / create-account modal based on the supplied white, rounded reference. */
.firebase-auth-overlay {
  z-index: 10000 !important;
  padding: 22px !important;
  align-items: center !important;
  background: rgba(231, 235, 237, .78) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}
.firebase-auth-card {
  width: min(1030px, calc(100vw - 44px)) !important;
  max-width: 1030px !important;
  max-height: min(760px, calc(100dvh - 44px)) !important;
  min-height: 580px !important;
  display: grid !important;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .92) !important;
  border-radius: 28px !important;
  background: #fff !important;
  color: #17181c !important;
  box-shadow: 0 32px 100px rgba(38, 48, 57, .18), 0 5px 18px rgba(38, 48, 57, .06) !important;
}
.auth-welcome-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 28px 30px 24px;
  background: linear-gradient(155deg, #f9fafb 0%, #f0f5f4 100%);
  border-right: 1px solid rgba(30, 38, 44, .055);
}
.auth-welcome-brand { display: flex; align-items: center; gap: 10px; color: #17181c; text-decoration: none; width: fit-content; }
.auth-welcome-brand .auth-brand-mark { width: 38px; height: 38px; padding: 8px; border-radius: 12px; background: #fff; box-shadow: 0 6px 18px rgba(29, 41, 50, .06); }
.auth-welcome-brand span { display: grid; gap: 3px; }
.auth-welcome-brand strong { font: 800 18px/1 var(--display, Outfit, sans-serif); letter-spacing: -.045em; }
.auth-welcome-brand small { font-size: 9px; color: #8c9299; }
.auth-welcome-picture { position: relative; height: clamp(155px, 21vh, 205px); margin-top: 27px; border-radius: 19px; overflow: hidden; background: #dce7e4; }
.auth-welcome-picture::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(23, 31, 35, .24), transparent 62%); pointer-events: none; }
.auth-welcome-picture img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 44%; }
.auth-picture-tag { position: absolute; z-index: 1; left: 11px; bottom: 11px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(255,255,255,.42); border-radius: 999px; padding: 7px 9px; background: rgba(255,255,255,.9); color: #444b50; font-size: 7px; font-weight: 800; letter-spacing: .07em; }
.auth-picture-tag i { width: 6px; height: 6px; border-radius: 50%; background: #36a76f; }
.auth-welcome-copy { margin-top: 24px; }
.auth-welcome-eyebrow { color: #777e85; font-size: 8px; letter-spacing: .15em; font-weight: 800; }
.auth-welcome-copy h2 { margin: 8px 0 9px; color: #202226; font: 800 clamp(25px, 3vw, 35px)/1.02 var(--display, Outfit, sans-serif); letter-spacing: -.055em; }
.auth-welcome-copy p { max-width: 330px; margin: 0; color: #7b8087; font-size: 11px; line-height: 1.7; }
.auth-welcome-proof { display: flex; flex-wrap: wrap; gap: 7px 12px; margin-top: auto; padding-top: 20px; color: #70767c; font-size: 8px; }
.auth-welcome-proof span { display: inline-flex; align-items: center; gap: 5px; }
.auth-welcome-proof b { color: #705af5; font-size: 8px; }
.auth-form-pane { position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: center; overflow: auto; padding: 42px clamp(28px, 4vw, 54px) 30px !important; background: #fff !important; }
.firebase-auth-close { position: absolute !important; top: 17px !important; right: 17px !important; z-index: 3; width: 34px !important; height: 34px !important; display: grid !important; place-items: center !important; border: 1px solid #e9eaed !important; border-radius: 50% !important; background: #fff !important; color: #747981 !important; box-shadow: 0 4px 13px rgba(20, 22, 26, .045); font-size: 22px !important; line-height: 1 !important; cursor: pointer; }
.firebase-auth-close:hover { background: #f7f7f8 !important; color: #202226 !important; }
.firebase-auth-close[hidden] { display: none !important; }
.auth-mobile-brand { display: none; }
.auth-form-content { width: 100%; max-width: 420px; margin: 0 auto; }
.firebase-auth-eyebrow { display: block; margin-bottom: 8px; color: #7f858c !important; font-size: 8px !important; font-weight: 800 !important; letter-spacing: .15em !important; }
.firebase-auth-title { margin: 0 0 8px !important; color: #24252a !important; font: 800 clamp(27px, 3.2vw, 36px)/1.02 var(--display, Outfit, sans-serif) !important; letter-spacing: -.055em !important; }
.firebase-auth-copy { margin: 0 0 23px !important; color: #8b9096 !important; font-size: 10px !important; line-height: 1.6 !important; }
.firebase-auth-form { display: grid; gap: 12px; }
.auth-field { display: grid; gap: 6px; color: #35383d; font-size: 9px; font-weight: 700; }
.auth-field[hidden] { display: none !important; }
.auth-field input { width: 100%; min-width: 0; height: 44px; padding: 0 13px; border: 1px solid #e5e6e9; border-radius: 11px; outline: none; background: #fff; color: #222329; font: 400 10px/1.3 "DM Sans", sans-serif; transition: border-color .18s ease, box-shadow .18s ease; }
.auth-field input::placeholder { color: #a6abb1; }
.auth-field input:focus { border-color: #897cf9; box-shadow: 0 0 0 3px rgba(111, 91, 245, .1); }
.firebase-auth-submit { min-height: 46px; margin-top: 2px; padding: 0 16px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; background: #6d5cf6; color: #fff; font-size: 10px; font-weight: 800; cursor: pointer; box-shadow: 0 9px 20px rgba(109, 92, 246, .18); transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
.firebase-auth-submit:hover { background: #5f4fea; transform: translateY(-1px); box-shadow: 0 12px 24px rgba(109, 92, 246, .22); }
.firebase-auth-submit:disabled { opacity: .65; cursor: wait; transform: none; }
.auth-separator { display: flex; align-items: center; gap: 10px; margin: 17px 0 15px; color: #888d93; font-size: 9px; }
.auth-separator::before, .auth-separator::after { content: ""; height: 1px; flex: 1; background: #ececef; }
.auth-social-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.auth-social-row button { width: 43px; height: 43px; justify-self: center; display: grid; place-items: center; border: 1px solid #e7e8eb; border-radius: 50%; background: #fff; cursor: pointer; transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.auth-social-row button:hover { transform: translateY(-2px); border-color: #d1d3d8; background: #fafafa; }
.auth-social-row img { display: block; width: 18px; height: 18px; object-fit: contain; }
.auth-switch-copy { margin: 18px 0 0; text-align: center; color: #8a8e94; font-size: 9px; }
.auth-switch-copy button { border: 0; padding: 0; background: transparent; color: #6a59ed; font: inherit; font-weight: 800; cursor: pointer; }
.auth-status { margin: 13px 0 0; border-radius: 10px; padding: 9px 11px; background: #f4f4f7; color: #62666e; font-size: 9px; line-height: 1.5; }
.auth-status[hidden] { display: none !important; }
.auth-status.is-error { background: #fff0f0; color: #ae3e43; }
.auth-status.is-success { background: #edf9f1; color: #1f7950; }
.auth-status.is-info { background: #f1f0ff; color: #5d50c9; }
.auth-legal-note { margin: 15px 0 0; text-align: center; color: #a1a5ab; font-size: 7px; line-height: 1.5; }
.firebase-auth-card.is-auth-busy .auth-social-row button { opacity: .55; }

@media (max-width: 900px) {
  .universal-search-page { padding: 17px 16px calc(82px + env(safe-area-inset-bottom, 0px)) !important; }
  .universal-search-topbar { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; margin-bottom: 18px; }
  .universal-search-topbar .search-header-back { width: 40px; height: 40px; border-radius: 12px; }
  .universal-search-input-wrap { height: 48px; min-height: 48px; padding-left: 12px; gap: 7px; }
  .universal-search-input-wrap input { font-size: 12px; }
  .universal-search-input-wrap kbd { display: none; }
  .universal-filter-row { gap: 5px; padding-top: 8px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .universal-filter-row::-webkit-scrollbar { display: none; }
  .universal-filter { flex: 0 0 auto; }
  .universal-results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 11px; }
  .universal-result-media { height: 155px; }
  .market-mobile-nav { left: 9px !important; right: 9px !important; bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important; }
  .market-mobile-nav a { min-height: 47px; }
  .firebase-auth-overlay { padding: 0 !important; background: #edf0f1 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; align-items: stretch !important; }
  .firebase-auth-card { width: 100% !important; height: 100dvh !important; min-height: 100dvh !important; max-height: 100dvh !important; grid-template-columns: 1fr !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
  .auth-welcome-pane { display: none !important; }
  .auth-form-pane { justify-content: flex-start !important; padding: calc(22px + env(safe-area-inset-top, 0px)) 22px calc(24px + env(safe-area-inset-bottom, 0px)) !important; }
  .auth-mobile-brand { display: flex; align-items: center; gap: 8px; margin: 0 0 34px; color: #202126; }
  .auth-mobile-brand img { width: 35px; height: 35px; padding: 7px; border-radius: 11px; background: #f5f5f7; }
  .auth-mobile-brand strong { font: 800 17px/1 var(--display, Outfit, sans-serif); letter-spacing: -.045em; }
  .firebase-auth-close { right: 17px !important; top: calc(16px + env(safe-area-inset-top, 0px)) !important; width: 35px !important; height: 35px !important; }
  .auth-form-content { width: 100%; max-width: 460px; }
  .firebase-auth-title { font-size: 32px !important; }
  .firebase-auth-copy { font-size: 11px !important; margin-bottom: 24px !important; }
  .auth-field { font-size: 10px; }
  .auth-field input { height: 48px; font-size: 12px; border-radius: 12px; }
  .firebase-auth-submit { min-height: 48px; font-size: 11px; }
  .auth-social-row { margin-top: 2px; }
  .auth-social-row button { width: 46px; height: 46px; }
}
@media (max-width: 560px) {
  .universal-search-page { padding-left: 11px !important; padding-right: 11px !important; }
  .universal-search-topbar { grid-template-columns: 36px minmax(0, 1fr); gap: 8px; }
  .universal-search-topbar .search-header-back { width: 36px; height: 36px; }
  .universal-search-input-wrap { height: 44px; min-height: 44px; grid-template-columns: 20px minmax(0,1fr) auto; border-radius: 13px; padding: 0 8px; gap: 5px; }
  .universal-search-input-wrap .icon { width: 17px; height: 17px; }
  .universal-search-input-wrap input { font-size: 11px; }
  .universal-filter { font-size: 8px; padding: 7px 9px; }
  .universal-results-grid { gap: 8px; }
  .universal-result-media { height: 128px; }
  .universal-result-body { padding: 9px !important; }
  .universal-result-body h3 { font-size: 10px; }
  .market-mobile-nav { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; left: 6px !important; right: 6px !important; padding: 5px !important; border-radius: 16px !important; }
  .market-mobile-nav a { font-size: 7.5px !important; gap: 4px !important; }
  .firebase-auth-card { overflow-y: auto !important; }
  .auth-form-pane { overflow: visible !important; padding-left: 20px !important; padding-right: 20px !important; }
  .auth-mobile-brand { margin-bottom: 31px; }
  .firebase-auth-title { font-size: 30px !important; }
  .auth-separator { margin-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .firebase-auth-card, .auth-social-row button, .firebase-auth-submit, .discover-page .home-barbers-row > .home-place-card { transition: none !important; animation: none !important; }
}

/* Dedicated live categories: keep every kind of local shop in the same swipeable card rail. */
.discover-page .category-live-section .home-place-row {
  display:flex!important; flex-direction:row!important; flex-wrap:nowrap!important; gap:12px!important;
  width:100%; overflow-x:auto!important; overflow-y:hidden!important; padding:2px 2px 10px!important;
  scroll-snap-type:x proximity!important; overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch;
  scrollbar-width:none!important; touch-action:pan-x;
}
.discover-page .category-live-section .home-place-row::-webkit-scrollbar { display:none!important; }
.discover-page .category-live-section .home-place-row>.home-place-card {
  display:block!important; flex:0 0 218px!important; width:218px!important; min-width:218px!important;
  padding:6px!important; border:1px solid rgba(20,22,26,.08)!important; border-radius:17px!important;
  background:#fff!important; box-shadow:0 9px 26px rgba(20,22,26,.045)!important; scroll-snap-align:start!important;
}
.discover-page .category-live-section .home-place-media { aspect-ratio:1.14/1!important; border-radius:13px!important; overflow:hidden!important; }
.discover-page .category-live-section .home-place-copy { padding:9px 6px 6px!important; }
.discover-page .category-live-section .home-place-copy strong { display:block; font-size:12px!important; }
.discover-page .category-live-section .home-place-copy small { display:flex; align-items:center; gap:4px; font-size:9px!important; }
.discover-page .category-live-section .section-view-all { white-space:nowrap; }

/* Shop detail: modest tab readability bump without changing the main headings/body copy. */
.shop-detail .detail-tab { font-size:11px!important; letter-spacing:-.01em; }
@media (max-width:820px) { .shop-detail .detail-tab { font-size:10px!important; } }

/* Related shops: editorial image-left, details-right cards. */
.related-shops-section { max-width:1240px; margin:26px auto 48px; padding:0 clamp(14px,3vw,36px); }
.related-shops-section[hidden] { display:none!important; }
.related-shops-head { display:flex; justify-content:space-between; align-items:end; gap:18px; margin-bottom:14px; }
.related-shops-head .eyebrow { display:block; margin-bottom:6px; color:#a66b19; font-size:9px; font-weight:900; letter-spacing:.16em; }
.related-shops-head h2 { margin:0; color:#191a1e; font:800 clamp(22px,2.4vw,30px)/1.06 var(--display,Outfit,sans-serif); letter-spacing:-.045em; }
.related-shops-head p { margin:6px 0 0; color:#83858b; font-size:12px; }
.related-shops-head>a { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; color:#33353a; font-size:11px; font-weight:800; }
.related-shops-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.related-shop-card { display:grid; grid-template-columns:126px minmax(0,1fr); gap:14px; min-width:0; padding:9px; border:1px solid rgba(23,24,28,.08); border-radius:19px; background:#fff; box-shadow:0 8px 24px rgba(23,24,28,.035); color:inherit; text-decoration:none; transition:transform .18s ease,box-shadow .18s ease; }
.related-shop-card:hover { transform:translateY(-2px); box-shadow:0 13px 28px rgba(23,24,28,.08); }
.related-shop-image { position:relative; display:block; width:100%; min-height:132px; overflow:hidden; border-radius:13px; background:#f1eee7; }
.related-shop-image img { width:100%; height:100%; min-height:132px; object-fit:cover; }
.related-shop-image>i { position:absolute; left:7px; top:7px; padding:5px 7px; border-radius:999px; background:rgba(255,255,255,.94); color:#202126; font-size:9px; font-style:normal; font-weight:900; }
.related-shop-copy { display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding:4px 2px 2px 0; }
.related-shop-copy>small { color:#9b702b; font-size:8px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.related-shop-copy>strong { margin-top:5px; color:#1b1c20; font-size:15px; font-weight:800; line-height:1.2; letter-spacing:-.025em; }
.related-shop-location { display:flex; align-items:center; gap:4px; margin-top:7px; color:#81838a; font-size:10px; }
.related-shop-location .icon { width:13px; height:13px; }
.related-shop-copy p { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:7px 0 8px; color:#777980; font-size:10px; line-height:1.45; }
.related-shop-bottom { display:flex; justify-content:space-between; align-items:center; gap:8px; width:100%; margin-top:auto; padding-top:8px; border-top:1px solid rgba(23,24,28,.07); }
.related-shop-bottom>b { color:#1e2024; font-size:10px; white-space:nowrap; }
.related-shop-bottom>i { display:inline-flex; align-items:center; gap:3px; color:#9a5a0a; font-size:9px; font-style:normal; font-weight:900; white-space:nowrap; }
.related-shop-bottom .icon { width:13px; height:13px; }
@media(max-width:900px) { .related-shops-list { grid-template-columns:1fr; } .related-shops-section { margin:18px auto 36px; } }
@media(max-width:560px) {
 .related-shops-head { align-items:flex-start; }
 .related-shops-head h2 { font-size:22px; }
 .related-shops-head p { font-size:11px; }
 .related-shops-head>a { padding-top:18px; font-size:10px; }
 .related-shop-card { grid-template-columns:104px minmax(0,1fr); gap:11px; border-radius:16px; padding:7px; }
 .related-shop-image,.related-shop-image img { min-height:126px; }
 .related-shop-copy>strong { font-size:13px; }
 .related-shop-copy p { font-size:9px; }
 .related-shop-bottom>b { font-size:9px; }
}

/* Reference-inspired booking modal: warm ivory canvas, white booking controls and orange actions. */
.appointment-modal[hidden] { display:none!important; }
.appointment-modal:not([hidden]) { display:flex!important; position:fixed!important; inset:0!important; z-index:10040!important; align-items:center!important; justify-content:center!important; padding:22px!important; background:rgba(29,31,35,.42)!important; backdrop-filter:blur(9px)!important; -webkit-backdrop-filter:blur(9px)!important; }
.appointment-dialog { position:relative!important; width:min(1080px,calc(100vw - 36px))!important; max-width:1080px!important; max-height:min(92dvh,920px)!important; overflow:auto!important; overscroll-behavior:contain; margin:auto!important; padding:24px!important; border:1px solid rgba(255,255,255,.92)!important; border-radius:26px!important; background:#fffdf8!important; box-shadow:0 28px 90px rgba(14,17,21,.24)!important; color:#17181c!important; scrollbar-width:thin; scrollbar-color:#ddd8ce transparent; }
.appointment-modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:18px; }
.appointment-kicker { display:inline-flex; align-items:center; gap:7px; color:#555963; font-size:9px; font-weight:900; letter-spacing:.15em; }
.appointment-kicker i { display:block; width:8px; height:8px; border-radius:50%; background:#f69a0a; box-shadow:0 0 0 4px rgba(246,154,10,.12); }
.appointment-modal-head h2 { margin:9px 0 5px; font:800 clamp(23px,2.3vw,30px)/1.04 var(--display,Outfit,sans-serif); letter-spacing:-.05em; }
.appointment-modal-head p { margin:0; color:#797b82; font-size:11px; line-height:1.5; }
.appointment-close { display:grid; place-items:center; flex:0 0 auto; width:39px; height:39px; border:1px solid rgba(20,22,26,.08); border-radius:13px; background:#fff; color:#282a2e; font-size:25px; line-height:1; cursor:pointer; box-shadow:0 4px 12px rgba(20,22,26,.04); }
.booking-modal-layout { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr); gap:15px; align-items:stretch; }
.booking-modal-layout[hidden],.booking-confirmed-state[hidden] { display:none!important; }
.booking-form-column,.booking-schedule-column { min-width:0; border:1px solid rgba(24,26,30,.07); border-radius:20px; padding:15px; }
.booking-form-column { background:#fff; }
.booking-schedule-column { background:#faf7f0; }
.booking-shop-summary { display:grid; grid-template-columns:54px minmax(0,1fr); align-items:center; gap:11px; padding-bottom:13px; margin-bottom:13px; border-bottom:1px solid rgba(24,26,30,.07); }
.booking-shop-summary>img { width:54px; height:54px; object-fit:cover; border-radius:15px; background:#f0ece2; }
.booking-shop-summary>div { min-width:0; }
.booking-shop-summary strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#191a1e; font-size:13px; font-weight:900; }
.booking-shop-summary span { display:block; margin-top:4px; color:#7d7f85; font-size:9px; }
.booking-shop-summary small { display:flex; align-items:center; gap:9px; margin-top:5px; color:#777980; font-size:8px; }
.booking-shop-summary small b { color:#b56a09; }
.booking-shop-summary small i { font-style:normal; }
.booking-section-head { display:flex; justify-content:space-between; align-items:end; gap:12px; margin:8px 0 9px; }
.booking-section-head>div { display:grid; gap:4px; }
.booking-step-label { color:#a86b17; font-size:8px; font-weight:900; letter-spacing:.13em; }
.booking-section-head h3 { margin:0; font-size:14px; line-height:1.2; font-weight:900; letter-spacing:-.025em; }
.booking-section-head>span { padding-bottom:1px; color:#85878d; font-size:9px; white-space:nowrap; }
.booking-date-strip { display:flex; gap:7px; overflow:auto; padding:2px 1px 7px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.booking-date-strip::-webkit-scrollbar { display:none; }
.booking-date-chip { display:flex; flex:0 0 52px; min-height:68px; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:1px solid #ece9e2; border-radius:14px; background:#fff; color:#777a81; cursor:pointer; }
.booking-date-chip span { font-size:8px; font-weight:700; }
.booking-date-chip strong { color:#25262a; font-size:17px; line-height:1; font-weight:900; }
.booking-date-chip small { font-size:8px; }
.booking-date-chip.is-active { border-color:#ef9208; background:#f79a0b; color:#fff; box-shadow:0 7px 16px rgba(231,132,5,.2); }
.booking-date-chip.is-active strong { color:#fff; }
.booking-slots-section { margin-top:7px; }
.booking-time-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.booking-time-option { min-height:37px; padding:8px 5px; border:1px solid #e9e7e1; border-radius:11px; background:#fff; color:#34363b; font-size:10px; font-weight:800; cursor:pointer; transition:background .16s,border-color .16s,transform .16s; }
.booking-time-option:hover:not(:disabled) { transform:translateY(-1px); border-color:#e9a13c; }
.booking-time-option.is-active { border-color:#df8a15; background:#fff0d8; color:#a85b00; box-shadow:inset 0 0 0 1px rgba(236,143,12,.12); }
.booking-time-option:disabled { color:#c5c6ca; background:#f3f3f2; border-color:#f0f0ef; text-decoration:line-through; cursor:not-allowed; }
.booking-form-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px; }
.booking-field { display:flex; flex-direction:column; gap:6px; min-width:0; color:#42444a; font-size:9px; font-weight:800; }
.booking-field>span { display:flex; align-items:center; gap:6px; }
.booking-field>span small { color:#a2a4aa; font-size:8px; font-weight:500; }
.booking-field input,.booking-field select,.booking-field textarea { width:100%; min-width:0; min-height:40px; border:1px solid #e9e7e1; border-radius:11px; outline:none; background:#fff; padding:10px 11px; color:#24252a; font:500 10px/1.35 var(--font-body,'DM Sans',sans-serif); }
.booking-field textarea { min-height:53px; resize:vertical; }
.booking-field input:focus,.booking-field select:focus,.booking-field textarea:focus { border-color:#eaa243; box-shadow:0 0 0 3px rgba(244,153,14,.11); }
.booking-service-field,.booking-note-field { grid-column:1/-1; }
.booking-reminder-toggle { display:flex; align-items:center; gap:10px; margin-top:13px; padding:10px; border:1px solid rgba(25,27,31,.06); border-radius:13px; background:#fffdf9; }
.booking-reminder-icon { display:grid; place-items:center; flex:0 0 auto; width:31px; height:31px; border-radius:10px; background:#fff0db; color:#ba6b09; }
.booking-reminder-copy { display:grid; gap:3px; flex:1; min-width:0; }
.booking-reminder-copy strong { color:#26272b; font-size:9px; }
.booking-reminder-copy small { color:#97999f; font-size:8px; }
.booking-switch { position:relative; width:35px; height:20px; flex:0 0 auto; }
.booking-switch input { position:absolute; width:1px; height:1px; opacity:0; }
.booking-switch i { position:absolute; inset:0; border-radius:999px; background:#d8d9dc; cursor:pointer; transition:background .18s; }
.booking-switch i:after { content:""; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.14); transition:transform .18s; }
.booking-switch input:checked+i { background:#f59a0b; }
.booking-switch input:checked+i:after { transform:translateX(15px); }
.booking-switch input:focus-visible+i { outline:3px solid rgba(245,154,11,.25); }
.booking-confirm-btn { display:flex; width:100%; align-items:center; justify-content:space-between; gap:10px; min-height:46px; margin-top:12px; padding:0 16px; border:0; border-radius:13px; background:linear-gradient(100deg,#f6a000,#fb7614); box-shadow:0 8px 20px rgba(227,124,10,.22); color:#fff; font-size:11px; font-weight:900; cursor:pointer; }
.booking-confirm-btn:disabled { opacity:.62; cursor:wait; }
.booking-form-disclaimer { margin:8px 2px 0; color:#a1a2a6; font-size:8px; line-height:1.45; }
.booking-calendar-card { padding:13px; border:1px solid rgba(25,27,31,.07); border-radius:17px; background:#fff; box-shadow:0 7px 20px rgba(26,28,32,.03); }
.booking-calendar-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.booking-calendar-heading>div:first-child>span { display:block; color:#8b8d93; font-size:8px; font-weight:800; letter-spacing:.1em; }
.booking-calendar-heading h3 { margin:4px 0 0; color:#1d1e22; font:800 18px/1 var(--display,Outfit,sans-serif); letter-spacing:-.035em; }
.booking-calendar-heading>div:last-child { display:flex; gap:6px; }
.booking-calendar-heading button { display:grid; place-items:center; width:30px; height:30px; border:1px solid #efede7; border-radius:50%; background:#fff; color:#55575e; font-size:20px; cursor:pointer; }
.booking-calendar-heading button:disabled { opacity:.3; cursor:not-allowed; }
.booking-calendar-weekdays,.booking-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; }
.booking-calendar-weekdays { margin-bottom:6px; }
.booking-calendar-weekdays span { text-align:center; color:#a0a2a8; font-size:8px; font-weight:700; }
.booking-calendar-grid { align-items:center; }
.booking-calendar-blank { min-height:31px; }
.booking-calendar-day { position:relative; min-width:0; height:31px; border:0; border-radius:9px; background:transparent; color:#33353a; font-size:9px; font-weight:700; cursor:pointer; }
.booking-calendar-day.is-active { background:#f69a0a; color:#fff; box-shadow:0 5px 12px rgba(229,130,9,.19); }
.booking-calendar-day.is-today:not(.is-active):after { content:""; position:absolute; left:50%; bottom:3px; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:#17ab82; }
.booking-calendar-day:disabled { color:#c9cacf; cursor:not-allowed; }
.booking-selection-card { display:grid; gap:5px; margin-top:10px; padding:12px; border:1px solid rgba(25,27,31,.06); border-radius:14px; background:#fff; }
.booking-selection-card>span,.booking-upcoming-head h3 { color:#898b91; font-size:8px; font-weight:900; letter-spacing:.1em; }
.booking-selection-card>strong { color:#232429; font-size:11px; }
.booking-selection-card>small { color:#777980; font-size:9px; }
.booking-selection-card>div { margin-top:2px; color:#9b620f; font-size:9px; font-weight:800; }
.booking-upcoming-card { margin-top:12px; }
.booking-upcoming-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.booking-upcoming-head h3 { margin:0; color:#303137; font-size:12px; letter-spacing:-.01em; }
.booking-upcoming-head a { color:#a55a0b; font-size:9px; font-weight:900; }
.booking-upcoming-item { display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:8px; margin-top:7px; padding:9px; border:1px solid rgba(20,22,26,.06); border-left:3px solid #f3a014; border-radius:13px; background:#fff; }
.booking-upcoming-item.tone-violet { border-left-color:#9470e7; }
.booking-upcoming-item.tone-mint { border-left-color:#30b58c; }
.booking-upcoming-icon { display:grid; place-items:center; width:30px; height:30px; border-radius:10px; background:#fff2dd; color:#b46a09; }
.booking-upcoming-item.tone-violet .booking-upcoming-icon { background:#f1ebff; color:#7c58d1; }
.booking-upcoming-item.tone-mint .booking-upcoming-icon { background:#e4f9f0; color:#168460; }
.booking-upcoming-item>div { display:grid; gap:3px; min-width:0; }
.booking-upcoming-item>div strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#222328; font-size:9px; }
.booking-upcoming-item>div small,.booking-upcoming-time small { color:#8e9096; font-size:7px; }
.booking-upcoming-time { display:grid; gap:4px; text-align:right; white-space:nowrap; }
.booking-upcoming-time b { color:#2b2c31; font-size:8px; }
.booking-upcoming-empty { padding:13px; border:1px dashed #e5e0d5; border-radius:12px; color:#999ba0; font-size:9px; line-height:1.45; background:rgba(255,255,255,.68); }
.booking-side-note { display:flex; gap:9px; margin-top:13px; padding:11px 3px 0; border-top:1px solid rgba(20,22,26,.07); }
.booking-side-note>span { display:grid; place-items:center; flex:0 0 auto; width:29px; height:29px; border-radius:10px; background:#eaf7ef; color:#278558; }
.booking-side-note strong { color:#3e4147; font-size:9px; }
.booking-side-note p { margin:4px 0 0; color:#8b8d93; font-size:8px; line-height:1.5; }
.booking-confirmed-state { padding:26px 10px 10px; text-align:center; }
.booking-confirmed-icon { display:grid; place-items:center; width:58px; height:58px; margin:0 auto 14px; border-radius:50%; background:#e4f8ed; color:#20a768; box-shadow:0 0 0 8px rgba(32,167,104,.07); }
.booking-confirmed-state>.booking-step-label { display:block; margin-top:7px; }
.booking-confirmed-state h3 { margin:10px 0 7px; color:#202126; font:800 25px/1.05 var(--display,Outfit,sans-serif); letter-spacing:-.045em; }
.booking-confirmed-state>p { max-width:540px; margin:0 auto; color:#777a81; font-size:11px; line-height:1.6; }
.booking-confirmed-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; max-width:540px; margin:20px auto; text-align:left; }
.booking-confirmed-details>div { display:grid; gap:5px; padding:12px; border:1px solid #efede7; border-radius:13px; background:#fff; }
.booking-confirmed-details span { color:#9b9da2; font-size:8px; font-weight:700; }
.booking-confirmed-details strong { color:#2a2b30; font-size:10px; }
.booking-confirmed-details .booking-pending-status { color:#a96308; }
.booking-confirmed-actions { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
.booking-confirm-done { min-height:42px; padding:0 28px; border:0; border-radius:12px; background:#f49a0b; color:#fff; font-size:10px; font-weight:900; cursor:pointer; }
.booking-confirmed-actions>a { display:inline-flex; align-items:center; gap:6px; min-height:42px; padding:0 15px; border:1px solid #ece8df; border-radius:12px; background:#fff; color:#393b41; font-size:10px; font-weight:900; }
@media(max-width:780px) {
 .appointment-modal:not([hidden]) { align-items:stretch!important; padding:0!important; background:#fffdf8!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; }
 .appointment-dialog { width:100%!important; max-width:none!important; max-height:100dvh!important; height:100dvh!important; border:0!important; border-radius:0!important; padding:calc(17px + env(safe-area-inset-top,0px)) 14px calc(18px + env(safe-area-inset-bottom,0px))!important; box-shadow:none!important; }
 .appointment-modal-head { margin-bottom:13px; padding-right:43px; }
 .appointment-modal-head h2 { font-size:25px; }
 .appointment-modal-head p { font-size:10px; }
 .appointment-close { position:absolute; top:calc(16px + env(safe-area-inset-top,0px)); right:13px; width:37px; height:37px; }
 .booking-modal-layout { grid-template-columns:1fr; gap:11px; }
 .booking-form-column,.booking-schedule-column { padding:12px; border-radius:17px; }
 .booking-schedule-column { display:grid; grid-template-columns:1fr; gap:0; }
 .booking-calendar-heading h3 { font-size:17px; }
 .booking-calendar-day { height:29px; }
 .booking-side-note { margin-top:10px; }
 .booking-confirmed-state { padding:28px 2px 10px; }
 .booking-confirmed-state h3 { font-size:23px; }
}
@media(max-width:430px) {
 .appointment-dialog { padding-left:11px!important; padding-right:11px!important; }
 .booking-form-column,.booking-schedule-column { padding:10px; }
 .booking-shop-summary { grid-template-columns:47px minmax(0,1fr); gap:9px; }
 .booking-shop-summary>img { width:47px; height:47px; }
 .booking-time-grid { gap:5px; }
 .booking-time-option { min-height:35px; font-size:9px; }
 .booking-date-chip { flex-basis:47px; min-height:64px; }
 .booking-form-fields { gap:8px; }
 .booking-field input,.booking-field select,.booking-field textarea { font-size:10px; }
 .booking-confirmed-details { gap:6px; }
}

/* The home search modal is the global search: one query across shops, services and products. */
.search-modal-scopes { display:flex; align-items:center; gap:6px; overflow-x:auto; padding:1px 0 8px; margin-top:12px; scrollbar-width:none; }
.search-modal-scopes::-webkit-scrollbar { display:none; }
.search-modal-scopes button { flex:0 0 auto; min-height:31px; padding:0 13px; border:1px solid rgba(23,24,28,.09); border-radius:999px; background:#fff; color:#73757c; font-size:10px; font-weight:800; cursor:pointer; }
.search-modal-scopes button.is-active { border-color:#202126; background:#202126; color:#fff; }
.global-search-result { display:grid!important; grid-template-columns:74px minmax(0,1fr) 15px!important; gap:11px!important; align-items:center!important; padding:8px!important; border-radius:14px!important; }
.global-search-result .search-result-image { display:block!important; width:74px!important; height:74px!important; min-height:74px!important; border-radius:11px!important; overflow:hidden!important; background:#f1eee7!important; }
.global-search-result .search-result-image img { display:block!important; width:100%!important; height:100%!important; object-fit:cover!important; }
.global-search-result .global-product-image img { object-fit:contain!important; padding:5px!important; mix-blend-mode:multiply; }
.global-search-result .global-service-image { display:grid!important; place-items:center!important; background:#fff0d9!important; color:#b46c10!important; font-size:24px!important; font-weight:900!important; }
.global-search-result .search-result-copy { display:flex!important; flex-direction:column!important; align-items:flex-start!important; min-width:0!important; gap:3px!important; }
.global-search-result .global-result-type { color:#a36b18!important; font-size:7px!important; font-weight:900!important; letter-spacing:.13em!important; }
.global-search-result .search-result-copy>strong { display:block!important; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#25262a!important; font-size:11px!important; font-weight:900!important; }
.global-search-result .search-result-copy>small:not(.global-result-type) { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#8c8e95!important; font-size:8px!important; }
.global-search-result .search-result-services { margin-top:2px!important; color:#32343a!important; font-size:8px!important; }
.global-search-result .search-result-services i { color:inherit!important; font-style:normal!important; font-weight:900!important; }
.global-search-result .search-result-arrow { align-self:center!important; font-size:14px!important; }
@media(max-width:560px) {
 .search-modal-scopes { gap:5px; margin-top:10px; }
 .search-modal-scopes button { min-height:30px; padding:0 11px; font-size:9px; }
 .global-search-result { grid-template-columns:62px minmax(0,1fr) 13px!important; gap:9px!important; padding:7px!important; }
 .global-search-result .search-result-image { width:62px!important; height:62px!important; min-height:62px!important; }
 .global-search-result .search-result-copy>strong { font-size:10px!important; }
}