/* ===== Appointments ===== */

#appClientAppointments{
  width:100%;
  box-sizing:border-box;
}

.app-appointments-section{
  margin-bottom:30px;
}

.app-appointments-section__title{
  margin:
    0 2px 12px;

  font-size:24px;
  line-height:1.15;
}

.app-appointments-list{
  display:grid;
  gap:12px;
}

.app-appointment-card{
  width:100%;
  min-width:0;

  overflow:hidden;

  border:
    1px solid
    rgba(87,70,54,.08);

  border-radius:22px;

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

  box-shadow:
    0 7px 24px
    rgba(52,39,28,.045);
}

.app-appointment-summary{
  appearance:none;

  width:100%;
  min-width:0;

  display:grid;

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

  gap:14px;

  align-items:center;

  padding:17px 18px;

  border:0;
  background:transparent;

  color:inherit;
  font:inherit;
  text-align:left;

  cursor:pointer;
}

.app-appointment-summary__date{
  display:grid;
  gap:2px;

  min-width:74px;
}

.app-appointment-day{
  color:var(--muted);

  font-size:10px;
  font-weight:650;
  line-height:1.2;

  letter-spacing:.08em;
  text-transform:uppercase;
}

.app-appointment-time{
  font-size:28px;
  line-height:1;
  font-weight:600;
}

.app-appointment-summary__body{
  min-width:0;
}

.app-appointment-service{
  display:block;

  min-width:0;

  font-size:15px;
  font-weight:700;
  line-height:1.35;

  overflow-wrap:anywhere;
}

.app-appointment-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;

  margin-top:8px;
}

.app-appointment-badge{
  display:inline-flex;
  align-items:center;

  min-height:26px;

  padding:4px 9px;

  border-radius:999px;

  background:#f1eee9;
  color:#68615a;

  font-size:10px;
  font-weight:650;
}

.app-appointment-badge[data-tone="positive"]{
  background:#e9f0e9;
  color:#45644c;
}

.app-appointment-badge[data-tone="danger"]{
  background:#f4e8e6;
  color:#8a514b;
}

.app-appointment-duration{
  color:var(--muted);
  font-size:11px;
}

.app-appointment-summary__side{
  min-width:0;

  display:grid;
  justify-items:end;
  gap:11px;
}

.app-appointment-price{
  max-width:120px;

  color:#514b45;

  font-size:11px;
  font-weight:650;
  line-height:1.25;

  text-align:right;
}

.app-appointment-chevron{
  display:grid;
  place-items:center;

  width:30px;
  height:30px;

  border-radius:50%;

  background:#f2eee8;
  color:#5d5650;

  transition:
    transform .2s ease,
    background-color .2s ease;
}

.app-appointment-chevron svg{
  width:17px;
  height:17px;
}

.app-appointment-card.is-open
.app-appointment-chevron{
  transform:rotate(180deg);
  background:#ebe4dc;
}

.app-appointment-details{
  display:grid;

  grid-template-rows:0fr;

  transition:
    grid-template-rows
    .24s
    cubic-bezier(.2,.8,.2,1);
}

.app-appointment-card.is-open
.app-appointment-details{
  grid-template-rows:1fr;
}

.app-appointment-details__inner{
  min-height:0;
  overflow:hidden;

  margin:
    0 18px;

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

.app-appointment-detail-row{
  display:grid;

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

  gap:12px;

  padding:13px 0;

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

.app-appointment-detail-row span{
  color:var(--muted);
  font-size:11px;
}

.app-appointment-detail-row strong{
  min-width:0;

  font-size:12px;
  line-height:1.4;

  text-align:right;
  overflow-wrap:anywhere;
}

.app-appointment-comment{
  padding:14px 0 18px;
}

.app-appointment-comment span{
  color:var(--muted);
  font-size:11px;
}

.app-appointment-comment p{
  margin:6px 0 0;

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


/* Очень маленькие устройства */
@media(max-width:359px){

  .app-appointment-summary{
    grid-template-columns:
      64px
      minmax(0,1fr)
      auto;

    gap:10px;

    padding:
      15px 14px;
  }

  .app-appointment-time{
    font-size:24px;
  }

  .app-appointment-price{
    max-width:90px;
    font-size:10px;
  }

  .app-appointment-details__inner{
    margin:
      0 14px;
  }
}


/* Если места совсем мало —
   стоимость уходит вниз внутри body */
@media(max-width:330px){

  .app-appointment-summary{
    grid-template-columns:
      62px
      minmax(0,1fr);
  }

  .app-appointment-summary__side{
    grid-column:
      2 / 3;

    grid-row:
      2;

    justify-items:start;

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

    width:100%;
  }

  .app-appointment-price{
    max-width:none;
    text-align:left;
  }
}


@media(
  prefers-reduced-motion:reduce
){
  .app-appointment-details,
  .app-appointment-chevron{
    transition:none;
  }
}

/* REMOVE LEGACY APPOINTMENT HEADING */

#view-booking
#appClientAppointments:not(:empty)::before{
  content:none !important;
  display:none !important;
}