/* account layout (shared by orders / favorites / addresses) */
.ac-side {
  background: #fff;
  border-radius: 28px;
  padding: 1.2rem;
  position: sticky;
  top: 96px;
}

.ac-user {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  border-bottom: 1px dashed var(--clay);
  margin-bottom: 0.8rem;
}

.ac-user b {
  display: block;
  font-family: "Aref Ruqaa", serif;
  font-size: 1.2rem;
  color: var(--lapis);
  line-height: 1.4;
}

.ac-user small {
  color: var(--muted);
}

.ac-nav {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.ac-nav a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.9rem;
  border-radius: 16px;
  color: var(--ink);
  transition:
    background 0.2s,
    color 0.2s;
}

.ac-nav a i {
  color: var(--turq);
  font-size: 1.1rem;
}

.ac-nav a em {
  margin-inline-start: auto;
  font-style: normal;
  background: var(--paper);
  border-radius: 12px;
  padding: 0 0.55rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.ac-nav a:hover {
  background: var(--sand);
}

.ac-nav a.on {
  background: var(--ink);
  color: var(--lime);
}

.ac-nav a.on i {
  color: var(--lime);
}

.ac-nav a.on em {
  background: rgba(255, 255, 255, 0.15);
  color: var(--lime);
}

.ac-out {
  margin-top: 0.6rem;
  width: 100%;
  border: 0;
  background: none;
  display: flex;
  gap: 0.6rem;
  align-items: center;
  padding: 0.65rem 0.9rem;
  color: var(--pink);
  border-radius: 16px;
}

.ac-out:hover {
  background: #fff0ff;
}

.ac-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem 1rem;
  margin-bottom: 1.1rem;
}

.ac-head h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--lapis);
  margin: 0;
}

.ac-tools {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.ac-count {
  color: var(--muted);
  margin-bottom: 1rem;
}

.demo-note {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 1.2rem;
}

.demo-note i {
  color: var(--turq);
}

.ac-bar {
  display: none;
}

@media (max-width: 991px) {
  .ac-side {
    position: static;
    padding: 0.9rem;
  }

  .ac-user {
    padding-bottom: 0.7rem;
    margin-bottom: 0.6rem;
  }

  .ac-nav {
    flex-direction: row;
    overflow-x: auto;
    gap: 0.4rem;
    padding-bottom: 0.2rem;
    scrollbar-width: none;
  }

  .ac-nav::-webkit-scrollbar {
    display: none;
  }

  .ac-bar {
    display: block;
    position: relative;
    height: 6px;
    margin-top: 0.5rem;
    background: var(--sand);
    border-radius: 10px;
  }

  .ac-bar i {
    position: absolute;
    top: 0;
    height: 100%;
    background: var(--turq);
    border-radius: 10px;
  }

  .ac-nav a {
    white-space: nowrap;
    flex: none;
    padding: 0.5rem 1rem;
  }

  .ac-out {
    width: auto;
    margin-top: 0.4rem;
    padding: 0.4rem 0.9rem;
  }
}

/* orders.html — page styles */
.o-tabs {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap
}

.o-tabs .chip small {
  opacity: .7
}

.o-card {
  background: #fff;
  border-radius: 28px;
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.1rem;
  box-shadow: 0 8px 24px rgba(59, 36, 23, .06)
}

.o-head {
  display: grid;
  grid-template-columns: repeat(3, auto) 1fr;
  gap: .6rem 1.8rem;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px dashed var(--clay)
}

.o-head small {
  display: block;
  color: var(--muted);
  font-size: .78rem
}

.o-head b {
  font-size: 1rem
}

.o-head em {
  font-style: normal;
  font-weight: 400;
  font-size: .8rem
}

.o-badge {
  justify-self: end;
  border-radius: 30px;
  padding: .2rem .95rem;
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap
}

.o-badge.s0 {
  background: #ffe6a6
}

.o-badge.s1 {
  background: #c9d6f2
}

.o-badge.s2 {
  background: #d8ffae
}

.o-badge.s3 {
  background: var(--turq);
  color: #fff
}

.o-thumbs {
  display: flex;
  gap: .6rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 1rem 0
}

.o-thumbs .o-th {
  width: 58px
}

.o-more {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--sand);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: .85rem
}

.o-track {
  display: flex;
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  position: relative
}

.o-track::before,
.o-track::after {
  content: "";
  position: absolute;
  top: 16px;
  inset-inline-start: 12.5%;
  height: 4px;
  border-radius: 2px
}

.o-track::before {
  width: 75%;
  background: var(--sand)
}

.o-track::after {
  width: calc(75% * var(--f, 0));
  background: var(--lime);
  transition: width 1.3s cubic-bezier(.3, 1, .4, 1)
}

.o-track li {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  color: var(--muted);
  text-align: center
}

.o-track li b {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--sand);
  display: grid;
  place-items: center;
  font-size: .8rem;
  color: var(--muted)
}

.o-track li.done b {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--ink)
}

.o-track li.done,
.o-track li.cur {
  color: var(--ink);
  font-weight: 500
}

.o-track li.cur b {
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
  animation: pulse 1.8s infinite
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 76, 255, .5)
  }

  70%,
  100% {
    box-shadow: 0 0 0 12px rgba(255, 76, 255, 0)
  }
}

.o-actions {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap
}

.o-actions .btn {
  padding: .55rem 1.3rem;
  font-size: .9rem
}

.o-actions .btn i {
  display: inline-block;
  transition: transform .3s
}

.o-actions [aria-expanded="true"] i {
  transform: rotate(180deg)
}

.o-det {
  padding-top: 1.2rem;
  margin-top: 1.2rem;
  border-top: 2px dashed var(--clay)
}

.o-det h4 {
  font-family: 'Aref Ruqaa', serif;
  font-size: 1.2rem;
  color: var(--lapis)
}

.o-det p {
  color: var(--muted);
  margin: 0;
  font-size: .92rem
}

.od-it {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: .8rem;
  align-items: center;
  padding: .5rem 0;
  border-bottom: 1px dashed var(--clay)
}

.od-it .ci-th {
  width: 52px
}

.od-it a {
  font-family: 'Aref Ruqaa', serif;
  font-size: 1.1rem;
  color: var(--lapis)
}

.od-it a:hover {
  color: var(--pink)
}

.od-it small {
  display: block;
  color: var(--muted)
}

.o-sums {
  background: var(--paper);
  border-radius: 20px;
  padding: .8rem 1.1rem;
  margin-top: 1rem
}

.o-sums div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .3rem 0;
  font-size: .92rem
}

.o-sums .good {
  color: #1b7f3a
}

.o-sums .tot {
  border-top: 1px dashed var(--clay);
  margin-top: .3rem;
  padding-top: .6rem;
  font-weight: 700;
  font-size: 1.05rem
}

@media(max-width:767px) {
  .o-head {
    grid-template-columns: 1fr 1fr
  }

  .o-badge {
    grid-column: 1/-1;
    justify-self: start
  }

  .o-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    width: 100%;
    padding-bottom: .2rem
  }

  .o-tabs .chip {
    white-space: nowrap;
    flex: none
  }
}

@media(max-width:575px) {
  .o-card {
    padding: 1rem;
    border-radius: 22px
  }

  .o-track li {
    font-size: .68rem
  }

  .o-track li b {
    width: 30px;
    height: 30px
  }

  .o-track::before,
  .o-track::after {
    top: 13px
  }

  .o-actions .btn {
    flex: 1 1 100%
  }

  .o-thumbs .o-th {
    width: 50px
  }
}