:root{
  --sage:#768771;
  --sage-dark:#566551;
  --sage-deep:#33402f;
  --sage-soft:#edf2ea;

  --ivory:#f7f4ee;
  --paper:#fffdf9;
  --white:#ffffff;

  --text:#283027;
  --muted:#7a8077;

  --line:#e6dfd4;
  --line-dark:#d9d1c5;

  --danger:#ad5c5c;

  --shadow:
    0 10px 34px rgba(45,54,43,.065);

  --shadow-hover:
    0 18px 48px rgba(45,54,43,.11);

  --ease:
    cubic-bezier(.22,.8,.2,1);
}


*{
  box-sizing:border-box;
}


html{
  scroll-behavior:smooth;
}


body{
  margin:0;

  min-height:100vh;

  color:var(--text);

  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(118,135,113,.10),
      transparent 31%
    ),
    var(--ivory);

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  -webkit-font-smoothing:antialiased;
}


button,
input,
select,
textarea{
  font:inherit;
}


button{
  cursor:pointer;
}


button:disabled{
  cursor:not-allowed;
  opacity:.5;
}


/* ============================================================
   HEADER
   ============================================================ */

header{
  height:62px;

  padding:
    0 clamp(18px,4.5vw,68px);

  position:sticky;
  top:0;
  z-index:100;

  display:flex;
  align-items:center;
  justify-content:space-between;

  border-bottom:
    1px solid rgba(230,223,212,.9);

  background:
    rgba(255,253,249,.88);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}


#home{
  display:flex;
  align-items:center;
  gap:8px;

  padding:0;

  border:0;
  background:transparent;

  color:var(--text);
}


#home img{
  width:32px;
  height:32px;

  object-fit:contain;
}


#home strong{
  display:block;

  font:
    500 19px/1
    Georgia,
    serif;
}


#home small{
  display:block;

  margin-top:3px;

  color:var(--sage);

  font-size:7px;
  font-weight:900;

  letter-spacing:.18em;
}


.header-note{
  display:flex;
  align-items:center;
  gap:7px;

  color:var(--muted);

  font-size:10px;
}


.header-note::before{
  content:"";

  width:6px;
  height:6px;

  border-radius:50%;

  background:#789472;

  box-shadow:
    0 0 0 4px
    rgba(120,148,114,.10);
}


/* ============================================================
   PAGE WIDTH
   ============================================================ */

.hero,
.container,
.detail{
  width:
    min(
      1120px,
      calc(100% - 36px)
    );

  margin-left:auto;
  margin-right:auto;
}


/* ============================================================
   HERO
   ============================================================ */

.hero{
  padding:
    46px 0
    31px;

  animation:
    pageIn .42s
    var(--ease)
    both;
}


.hero-label{
  display:inline-flex;
  align-items:center;
  gap:6px;

  padding:
    6px 10px;

  border-radius:999px;

  background:
    var(--sage-soft);

  color:
    var(--sage-dark);

  font-size:9px;
  font-weight:850;

  letter-spacing:.08em;
}


.hero-label::before{
  content:"";

  width:5px;
  height:5px;

  border-radius:50%;

  background:
    var(--sage);
}


.hero h1{
  max-width:620px;

  margin:
    15px 0
    9px;

  font:
    500
    clamp(28px,3.4vw,40px)
    /1.08
    Georgia,
    "Times New Roman",
    serif;

  letter-spacing:-.025em;
}


.hero p{
  max-width:560px;

  margin:0;

  color:var(--muted);

  font-size:13px;
  line-height:1.6;
}


/* ============================================================
   SEARCH
   ============================================================ */

.search{
  max-width:620px;

  margin-top:21px;

  padding:6px;

  display:flex;
  align-items:center;
  gap:6px;

  border:
    1px solid var(--line);

  border-radius:14px;

  background:#fff;

  box-shadow:
    0 5px 18px rgba(45,54,43,.045);

  transition:
    box-shadow .18s,
    border-color .18s;
}


.search:focus-within{
  border-color:#b8c3b3;

  box-shadow:
    0 0 0 4px rgba(118,135,113,.07),
    0 7px 22px rgba(45,54,43,.055);
}


/* ============================================================
   INPUTS
   ============================================================ */

input,
select,
textarea{
  width:100%;

  border:
    1px solid var(--line);

  border-radius:10px;

  background:#fff;

  color:var(--text);

  outline:none;

  transition:
    border-color .16s,
    box-shadow .16s;
}


input,
select{
  height:42px;

  padding:
    0 12px;

  font-size:11px;
}


textarea{
  min-height:74px;

  padding:
    11px 12px;

  resize:vertical;

  font-size:11px;
}


.search input{
  height:40px;

  border:0;

  background:transparent;

  box-shadow:none;
}


input:focus,
select:focus,
textarea:focus{
  border-color:#aab8a5;

  box-shadow:
    0 0 0 3px
    rgba(118,135,113,.075);
}


/* ============================================================
   BUTTON
   ============================================================ */

.btn{
  min-height:40px;

  padding:
    0 14px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:
    1px solid var(--line);

  border-radius:10px;

  background:#fff;

  color:var(--text);

  font-size:10px;
  font-weight:800;

  transition:
    transform .17s var(--ease),
    box-shadow .17s,
    background .17s,
    border-color .17s;
}


.btn:hover:not(:disabled){
  transform:
    translateY(-1px);

  box-shadow:
    0 6px 16px
    rgba(45,54,43,.07);
}


.primary{
  border-color:
    var(--sage);

  background:
    var(--sage);

  color:#fff;

  box-shadow:
    0 5px 14px
    rgba(86,101,81,.16);
}


.primary:hover:not(:disabled){
  border-color:
    var(--sage-dark);

  background:
    var(--sage-dark);
}


/* ============================================================
   SALONS HEADING
   ============================================================ */

.title{
  margin:
    3px 0
    14px;
}


.title h2{
  margin:0;

  font:
    500 25px/1.2
    Georgia,
    serif;
}


.title p{
  margin:
    5px 0 0;

  color:var(--muted);

  font-size:11px;
}


/* ============================================================
   SALON GRID
   ============================================================ */

.grid{
  display:grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(285px,340px)
    );

  gap:15px;

  justify-content:start;

  padding-bottom:62px;
}


.card,
.panel{
  overflow:hidden;

  border:
    1px solid var(--line);

  border-radius:17px;

  background:
    rgba(255,253,249,.98);

  box-shadow:
    var(--shadow);
}


.card{
  min-height:275px;

  display:flex;
  flex-direction:column;

  opacity:0;

  animation:
    cardIn .42s
    var(--ease)
    forwards;

  transition:
    transform .2s var(--ease),
    border-color .2s,
    box-shadow .2s;
}


.card:nth-child(2){
  animation-delay:.04s;
}

.card:nth-child(3){
  animation-delay:.08s;
}

.card:nth-child(4){
  animation-delay:.12s;
}

.card:nth-child(5){
  animation-delay:.16s;
}


.card:hover{
  transform:
    translateY(-3px);

  border-color:
    var(--line-dark);

  box-shadow:
    var(--shadow-hover);
}


/* ============================================================
   SALON CARD COVER
   ============================================================ */

.cover{
  height:105px;

  position:relative;

  display:grid;
  place-items:center;

  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      #edf2e9,
      #f4eee6
    );
}


.cover::before{
  content:"";

  position:absolute;

  width:150px;
  height:150px;

  right:-57px;
  top:-80px;

  border:
    1px solid
    rgba(118,135,113,.12);

  border-radius:50%;
}


.logo{
  width:62px;
  height:62px;

  position:relative;
  z-index:2;

  display:grid;
  place-items:center;

  overflow:hidden;

  border:
    1px solid rgba(255,255,255,.92);

  border-radius:19px;

  background:#fff;

  color:var(--sage-dark);

  box-shadow:
    0 8px 20px
    rgba(45,54,43,.10);

  font:
    500 21px Georgia,
    serif;

  transition:
    transform .22s var(--ease);
}


.card:hover .logo{
  transform:
    scale(1.035);
}


.logo img{
  width:100%;
  height:100%;

  object-fit:cover;
}


/* ============================================================
   CARD BODY
   ============================================================ */

.card-body{
  flex:1;

  padding:
    15px 16px 10px;
}


.card h3{
  margin:
    0 0 7px;

  font:
    500 18px/1.2
    Georgia,
    serif;
}


.meta{
  display:flex;
  align-items:center;
  gap:5px;

  margin-top:5px;

  color:var(--muted);

  font-size:9px;
  line-height:1.45;
}


.preview{
  margin-top:10px;

  color:
    var(--sage-dark);

  font-size:9px;
  line-height:1.5;

  display:
    -webkit-box;

  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;

  overflow:hidden;
}


.card-foot{
  padding:
    0 16px 15px;

  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}


.small{
  color:var(--muted);

  font-size:8px;
  line-height:1.45;
}


/* ============================================================
   SALON DETAIL
   ============================================================ */

.detail{
  padding:
    22px 0
    62px;

  animation:
    pageIn .4s
    var(--ease)
    both;
}


.back{
  margin-bottom:12px;
}


.org-head{
  padding:
    22px 24px;

  display:flex;
  align-items:center;
  gap:18px;

  border-radius:20px;

  background:
    linear-gradient(
      135deg,
      #fffdf9,
      #f6f8f4
    );
}


.org-head .logo{
  width:78px;
  height:78px;

  flex:
    0 0 78px;

  border-radius:23px;

  font-size:26px;
}


.org-head h1{
  margin:
    0 0 7px;

  font:
    500
    clamp(25px,3vw,36px)
    /1.1
    Georgia,
    serif;
}


/* ============================================================
   SERVICE + BOOKING LAYOUT
   ============================================================ */

.layout{
  margin-top:15px;

  display:grid;

  grid-template-columns:
    minmax(0,1.15fr)
    minmax(320px,.7fr);

  gap:15px;

  align-items:start;
}


.panel-title{
  padding:
    14px 16px;

  border-bottom:
    1px solid var(--line);
}


.panel-title h2{
  margin:0;

  font:
    500 20px/1.2
    Georgia,
    serif;
}


.panel-body{
  padding:15px;
}


/* ============================================================
   SERVICE
   ============================================================ */

.service{
  padding:
    11px 12px;

  margin-bottom:7px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  border:
    1px solid var(--line);

  border-radius:11px;

  background:#fff;

  transition:
    transform .16s var(--ease),
    border-color .16s,
    background .16s;
}


.service:hover{
  transform:
    translateX(2px);

  border-color:#d7d0c5;
}


.service.active{
  border-color:#aab8a5;

  background:
    linear-gradient(
      90deg,
      #f0f4ed,
      #fff
    );

  box-shadow:
    inset 3px 0 0
    var(--sage);
}


.service strong{
  font-size:11px;
}


.service small{
  display:block;

  margin-top:3px;

  color:var(--muted);

  font-size:8px;
}


.price{
  min-width:96px;

  text-align:right;
}


.price strong{
  font-size:12px;
}


.old{
  color:#999;

  font-size:8px;

  text-decoration:line-through;
}


/* ============================================================
   BOOKING
   ============================================================ */

.booking{
  position:sticky;

  top:77px;

  border-radius:19px;
}


.field{
  margin-bottom:11px;
}


.field label{
  display:block;

  margin-bottom:5px;

  color:#505a4e;

  font-size:9px;
  font-weight:800;
}


.summary{
  margin-bottom:12px;

  padding:
    10px 11px;

  border:
    1px solid #e0e7dc;

  border-radius:10px;

  background:
    #f2f5f0;

  color:#596456;

  font-size:9px;
  line-height:1.6;
}


.summary strong{
  color:
    var(--sage-deep);
}


/* ============================================================
   FREE SLOTS
   ============================================================ */

.slots{
  display:grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:5px;

  max-height:275px;

  overflow:auto;

  padding:1px;

  scrollbar-width:thin;

  scrollbar-color:
    #bec7ba transparent;
}


.slot{
  min-height:45px;

  padding:
    6px 4px;

  border:
    1px solid var(--line);

  border-radius:9px;

  background:#fff;

  color:var(--text);

  transition:
    transform .15s var(--ease),
    border-color .15s,
    background .15s;
}


.slot:hover{
  transform:
    translateY(-1px);

  border-color:
    #aab8a5;

  background:
    #f7f9f6;
}


.slot strong,
.slot small{
  display:block;
}


.slot strong{
  font-size:10px;
}


.slot small{
  margin-top:2px;

  overflow:hidden;

  color:var(--muted);

  font-size:7px;

  white-space:nowrap;
  text-overflow:ellipsis;
}


.slot.active{
  border-color:
    var(--sage);

  background:
    var(--sage-soft);

  box-shadow:
    0 0 0 2px
    rgba(118,135,113,.08);
}


/* ============================================================
   SUCCESS
   ============================================================ */

.success{
  padding:
    25px 10px;

  text-align:center;

  animation:
    successIn .35s
    var(--ease);
}


.success-mark{
  width:47px;
  height:47px;

  margin:
    0 auto 12px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:
    var(--sage);

  color:#fff;

  font-size:19px;

  box-shadow:
    0 9px 24px
    rgba(86,101,81,.19);
}


.success h2{
  margin:
    0 0 9px;

  font:
    500 22px
    Georgia,
    serif;
}


.success p{
  margin:
    4px 0;

  color:var(--muted);

  font-size:10px;
}


/* ============================================================
   LOADING / EMPTY / TOAST
   ============================================================ */

.empty,
.loading{
  padding:
    32px 12px;

  text-align:center;

  color:var(--muted);

  font-size:10px;
}


.loading::before{
  content:"";

  width:21px;
  height:21px;

  margin:
    0 auto 10px;

  display:block;

  border:
    2px solid #dce2d9;

  border-top-color:
    var(--sage);

  border-radius:50%;

  animation:
    spin .7s
    linear infinite;
}


#toast{
  position:fixed;

  right:18px;
  bottom:18px;

  z-index:200;

  max-width:340px;

  padding:
    11px 14px;

  border-radius:10px;

  background:
    rgba(40,49,38,.97);

  color:#fff;

  font-size:10px;

  box-shadow:
    0 12px 36px
    rgba(35,43,34,.20);

  animation:
    toastIn .22s
    var(--ease);
}


#toast.error{
  background:
    var(--danger);
}


/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes pageIn{
  from{
    opacity:0;

    transform:
      translateY(6px);
  }

  to{
    opacity:1;

    transform:none;
  }
}


@keyframes cardIn{
  from{
    opacity:0;

    transform:
      translateY(10px);
  }

  to{
    opacity:1;

    transform:none;
  }
}


@keyframes successIn{
  from{
    opacity:0;

    transform:
      scale(.98);
  }

  to{
    opacity:1;

    transform:
      scale(1);
  }
}


@keyframes toastIn{
  from{
    opacity:0;

    transform:
      translateY(7px);
  }

  to{
    opacity:1;

    transform:none;
  }
}


@keyframes spin{
  to{
    transform:
      rotate(360deg);
  }
}


@media(
  prefers-reduced-motion:
  reduce
){
  *,
  *::before,
  *::after{
    animation-duration:
      .01ms !important;

    transition-duration:
      .01ms !important;
  }
}


/* ============================================================
   TABLET
   ============================================================ */

@media(max-width:900px){

  .grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }


  .layout{
    grid-template-columns:1fr;
  }


  .booking{
    position:static;
  }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:600px){

  header{
    height:58px;

    padding:
      0 14px;
  }


  .header-note{
    display:none;
  }


  .hero,
  .container,
  .detail{
    width:
      calc(100% - 24px);
  }


  .hero{
    padding:
      34px 0
      25px;
  }


  .hero h1{
    font-size:
      clamp(
        27px,
        9vw,
        34px
      );
  }


  .search{
    display:grid;

    grid-template-columns:1fr;
  }


  .search .btn{
    width:100%;
  }


  .grid{
    grid-template-columns:1fr;
  }


  .card{
    min-height:auto;
  }


  .org-head{
    padding:17px;

    align-items:flex-start;
  }


  .org-head .logo{
    width:62px;
    height:62px;

    flex-basis:62px;

    border-radius:18px;
  }


  .slots{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }


  .service{
    align-items:flex-start;
  }
}


/* SOREVA BOOK LANGUAGE SWITCH V1 */

.book-header-right{
  display:flex;
  align-items:center;
  gap:18px;
}


.book-language-switch{
  height:30px;

  padding:3px;

  display:flex;
  align-items:center;

  border:
    1px solid var(--line);

  border-radius:999px;

  background:
    rgba(255,255,255,.78);

  box-shadow:
    0 3px 12px
    rgba(45,54,43,.035);
}


.book-language-switch span{
  width:1px;
  height:12px;

  background:
    var(--line);
}


.book-language-switch button{
  min-width:35px;
  height:24px;

  padding:
    0 8px;

  border:0;
  border-radius:999px;

  background:transparent;

  color:
    var(--muted);

  font-size:8px;
  font-weight:900;

  letter-spacing:.07em;

  transition:
    background .18s,
    color .18s,
    transform .18s;
}


.book-language-switch button:hover{
  color:
    var(--sage-dark);
}


.book-language-switch button.active{
  background:
    var(--sage);

  color:#fff;

  box-shadow:
    0 3px 9px
    rgba(86,101,81,.14);
}


@media(max-width:600px){

  .book-header-right{
    gap:7px;
  }


  .book-language-switch{
    height:28px;
  }


  .book-language-switch button{
    min-width:32px;
    height:22px;

    padding:
      0 6px;

    font-size:7px;
  }
}

/* END SOREVA BOOK LANGUAGE SWITCH V1 */


/* ============================================================
   SOREVA BOOK KA / EN SWITCH V2
   ============================================================ */

.book-header-right{
  margin-left:auto;

  display:flex;
  align-items:center;
  gap:16px;
}


.book-language-switch{
  height:31px;

  padding:3px;

  display:flex;
  align-items:center;
  gap:2px;

  border:
    1px solid #e1ddd3;

  border-radius:999px;

  background:
    rgba(255,255,255,.92);

  box-shadow:
    0 3px 12px
    rgba(45,54,43,.04);
}


.book-language-switch span{
  width:1px;
  height:12px;

  background:#e1ddd3;
}


.book-language-switch button{
  min-width:38px;
  height:24px;

  padding:
    0 9px;

  border:0;
  border-radius:999px;

  background:transparent;

  color:#727a70;

  font-size:9px;
  font-weight:900;

  letter-spacing:.07em;

  transition:
    background .18s,
    color .18s,
    box-shadow .18s;
}


.book-language-switch button:hover{
  color:#536250;
}


.book-language-switch button.active{
  background:#74846f;

  color:#fff;

  box-shadow:
    0 3px 9px
    rgba(83,98,80,.16);
}


@media(max-width:600px){

  .book-header-right{
    gap:5px;
  }

  .book-language-switch{
    height:29px;
  }

  .book-language-switch button{
    min-width:34px;
    height:22px;

    padding:0 7px;

    font-size:8px;
  }
}


/* SOREVA BOOK PRODUCTION RESPONSIVE V1 */

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  max-width:100%;
}

img,
svg{
  max-width:100%;
}

button,
a,
input,
select,
textarea{
  touch-action:manipulation;
}

@media(max-width:700px){

  input,
  select,
  textarea{
    font-size:16px !important;
  }

  .btn,
  .slot{
    min-height:44px;
  }

  .card-foot{
    align-items:flex-start;
  }

}

@media(max-width:380px){

  .hero,
  .container,
  .detail{
    width:calc(100% - 18px);
  }

  .slots{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}

/* END SOREVA BOOK PRODUCTION RESPONSIVE V1 */