/* INESS ACCORDION POLISH UX-5A 20260916 */


/* ==================================================
   SHARED RHYTHM
   ================================================== */

.app-orders-list,
.app-appointments-list {
  gap:
    9px;
}


.app-order-card,
.app-appointment-card {
  border:
    1px solid
    rgba(78, 60, 49, .075);

  border-radius:
    16px;

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

  box-shadow:
    none;
}


/* ==================================================
   ORDERS — SUMMARY
   ================================================== */

.app-order-summary {
  min-height:
    0;

  padding:
    14px 14px;

  border-radius:
    16px;
}


.app-order-summary__top {
  align-items:
    baseline;

  gap:
    12px;
}


.app-order-number {
  color:
    #332d29;

  font-family:
    var(--font-ui);

  font-size:
    13px;

  font-weight:
    760;
}


.app-order-total {
  color:
    #211d1a;

  font-family:
    var(--font-ui);

  font-size:
    14px;

  font-weight:
    800;

  white-space:
    nowrap;
}


.app-order-date {
  margin-top:
    3px;

  color:
    #837870;

  font-size:
    10.5px;
}


.app-order-badges {
  margin-top:
    9px;

  gap:
    6px;
}


.app-order-badge {
  min-height:
    24px;

  padding:
    4px 8px;

  border-radius:
    999px;

  font-size:
    9.5px;

  font-weight:
    700;

  letter-spacing:
    .01em;
}


.app-order-badge[data-tone="warm"] {
  background:
    #f5efe9;

  color:
    #765f50;
}


.app-order-badge[data-tone="positive"] {
  background:
    #edf3ee;

  color:
    #57715c;
}


.app-order-badge[data-tone="danger"] {
  background:
    #f7eded;

  color:
    #875858;
}


.app-order-summary__bottom {
  margin-top:
    10px;

  padding-top:
    9px;

  border-top:
    1px solid
    rgba(78, 60, 49, .065);

  color:
    #7c716a;

  font-size:
    10.5px;
}


/* ==================================================
   ORDERS — DETAILS
   ================================================== */

.app-order-details {
  display:
    grid;

  grid-template-rows:
    0fr;

  opacity:
    0;

  transition:
    grid-template-rows .2s
      cubic-bezier(.22,.8,.32,1),
    opacity .14s ease;
}


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

  opacity:
    1;
}


.app-order-details__inner {
  min-height:
    0;

  overflow:
    hidden;

  padding:
    0 14px;
}


.app-order-card.is-open
.app-order-details__inner {
  padding-bottom:
    14px;
}


.app-order-products {
  padding-top:
    12px;

  border-top:
    1px solid
    rgba(78, 60, 49, .065);
}


.app-order-product {
  padding:
    10px 0;

  border-bottom:
    1px solid
    rgba(78, 60, 49, .055);
}


.app-order-product:last-child {
  border-bottom:
    0;
}


.app-order-product__name {
  font-size:
    12.5px;

  font-weight:
    720;
}


.app-order-product__meta {
  margin-top:
    3px;

  color:
    #867b73;

  font-size:
    10.5px;
}


.app-order-product__price {
  font-size:
    11.5px;

  font-weight:
    720;
}


.app-order-final {
  margin-top:
    10px;

  padding-top:
    10px;

  border-top:
    1px solid
    rgba(78, 60, 49, .075);
}


.app-order-chevron {
  width:
    26px;

  height:
    26px;

  border-radius:
    9px;

  background:
    #f4f0ec;

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


.app-order-card.is-open
.app-order-chevron {
  background:
    #ece5df;
}


/* ==================================================
   APPOINTMENTS — SUMMARY
   ================================================== */

.app-appointment-card {
  border-radius:
    16px;
}


.app-appointment-summary {
  min-height:
    0;

  padding:
    14px;

  border-radius:
    16px;
}


.app-appointment-summary__date {
  min-width:
    54px;
}


.app-appointment-day {
  color:
    #887d75;

  font-family:
    var(--font-ui);

  font-size:
    9.5px;

  font-weight:
    750;

  letter-spacing:
    .04em;

  text-transform:
    uppercase;
}


.app-appointment-time {
  margin-top:
    2px;

  color:
    #241f1c;

  font-family:
    var(--font-ui);

  font-size:
    16px;

  font-weight:
    800;

  line-height:
    1.05;
}


.app-appointment-service {
  color:
    #302a27;

  font-family:
    var(--font-ui);

  font-size:
    13px;

  font-weight:
    760;

  line-height:
    1.25;
}


.app-appointment-meta {
  margin-top:
    7px;

  gap:
    6px;
}


.app-appointment-badge {
  min-height:
    23px;

  padding:
    4px 8px;

  border-radius:
    999px;

  font-size:
    9.5px;

  font-weight:
    700;
}


.app-appointment-duration {
  color:
    #847970;

  font-size:
    10px;
}


.app-appointment-summary__side {
  gap:
    7px;
}


.app-appointment-price {
  color:
    #4a423d;

  font-family:
    var(--font-ui);

  font-size:
    11.5px;

  font-weight:
    720;
}


.app-appointment-chevron {
  width:
    26px;

  height:
    26px;

  border-radius:
    9px;

  background:
    #f4f0ec;

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


.app-appointment-card.is-open
.app-appointment-chevron {
  background:
    #ece5df;
}


/* ==================================================
   APPOINTMENTS — DETAILS
   ================================================== */

.app-appointment-details {
  display:
    grid;

  grid-template-rows:
    0fr;

  opacity:
    0;

  transition:
    grid-template-rows .2s
      cubic-bezier(.22,.8,.32,1),
    opacity .14s ease;
}


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

  opacity:
    1;
}


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

  overflow:
    hidden;

  padding:
    0 14px;
}


.app-appointment-card.is-open
.app-appointment-details__inner {
  padding-bottom:
    14px;
}


.app-appointment-detail-row {
  padding:
    10px 0;

  border-top:
    1px solid
    rgba(78, 60, 49, .06);
}


.app-appointment-detail-row span,
.app-appointment-comment span {
  color:
    #8a7e76;

  font-size:
    9.5px;

  font-weight:
    700;

  text-transform:
    uppercase;

  letter-spacing:
    .06em;
}


.app-appointment-detail-row strong {
  margin-top:
    4px;

  color:
    #332d29;

  font-size:
    12px;

  font-weight:
    700;
}


.app-appointment-comment {
  padding-top:
    10px;

  border-top:
    1px solid
    rgba(78, 60, 49, .06);
}


.app-appointment-comment p {
  margin-top:
    5px;

  color:
    #5f5650;

  font-size:
    11.5px;

  line-height:
    1.45;
}


/* ==================================================
   SECTION TITLES
   ================================================== */

.app-orders-section__title,
.app-appointments-section__title {
  margin-bottom:
    10px;

  font-family:
    var(--font-ui);

  font-size:
    20px;

  font-weight:
    780;

  letter-spacing:
    -.025em;
}


/* ==================================================
   REDUCED MOTION
   ================================================== */

@media (prefers-reduced-motion: reduce) {

  .app-order-details,
  .app-appointment-details,
  .app-order-chevron,
  .app-appointment-chevron {
    transition:
      none !important;
  }
}