/* ===== DOA UI (upgrade style selaras video.css) ===== */

.doa-search .input-group-text {
  background: linear-gradient(
    135deg,
    rgba(15,118,110,.08),
    rgba(34,197,94,.08)
  );
  border: 1px solid rgba(148,163,184,.35);
  border-radius: .9rem;
  box-shadow: 0 4px 12px rgba(15,23,42,.13);
  transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
}

.doa-search .input-group-text:focus-within {
  border-color: rgba(11,122,117,.55);
  box-shadow: 0 0 0 1px rgba(11,122,117,.38), 0 6px 18px rgba(15,23,42,.22);
}

body.dark-mode .doa-search .input-group-text {
  background: linear-gradient(
    135deg,
    rgba(15,23,42,.92),
    rgba(30,64,175,.65)
  );
  border-color: rgba(148,163,184,.35);
  box-shadow: 0 4px 14px rgba(0,0,0,.5);
}

/* chips filter doa */
.doa-chips {
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  padding-bottom: .25rem;
  padding-top: .1rem;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.doa-chips::-webkit-scrollbar {
  height: 4px;
}

.doa-chips::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(148,163,184,.6);
}

body.dark-mode .doa-chips::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,.9);
}

.doa-chip {
  border: 1px solid rgba(148,163,184,.2);
  background: linear-gradient(
    135deg,
    rgba(248,250,252,1),
    rgba(226,232,240,1)
  );
  border-radius: 999px;
  padding: .35rem .75rem;
  font-size: .7rem;
  white-space: nowrap;
  color: #0f172a;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(15,23,42,.12);
  transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
}

.doa-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15,23,42,.18);
  border-color: rgba(11,122,117,.32);
}

body.dark-mode .doa-chip {
  background: linear-gradient(
    135deg,
    rgba(15,23,42,.9),
    rgba(30,41,59,.95)
  );
  color: #e2e8f0;
  border-color: rgba(148,163,184,.35);
  box-shadow: 0 3px 10px rgba(0,0,0,.55);
}

.doa-chip.active {
  background: linear-gradient(135deg, var(--color-primary), #22c55e);
  color: #fff;
  box-shadow: 0 8px 22px rgba(11,122,117,.45);
  border-color: transparent;
  transform: translateY(-1px);
}

body.dark-mode .doa-chip.active {
  background: linear-gradient(135deg, #22c55e, #0ea5e9);
  box-shadow: 0 10px 26px rgba(0,0,0,.65);
}

/* list doa */
.doa-list {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

/* kartu doa pakai gradient + accent bar + animasi */
.doa-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(148,163,184,.12);
  border-radius: .85rem;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
  overflow: hidden;
  position: relative;
  transition: all .28s cubic-bezier(0.4, 0, 0.2, 1);
  animation: fadeInUp-surah .45s ease backwards;
}

.doa-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), #22c55e);
  opacity: .75;
}

.doa-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(15,23,42,.13);
  border-color: rgba(11,122,117,.3);
}

body.dark-mode .doa-card {
  background: linear-gradient(
    135deg,
    rgba(30,41,59,.72),
    rgba(15,23,42,.78)
  );
  border-color: rgba(148,163,184,.18);
  box-shadow: 0 12px 30px rgba(0,0,0,.55);
}

/* head kartu doa */
.doa-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  padding: .55rem .6rem .45rem;
}

.doa-card-title {
  font-weight: 700;
  font-size: .78rem;
  line-height: 1.2;
  color: #0f172a;
}

body.dark-mode .doa-card-title {
  color: #f1f5f9;
}

.doa-card-actions {
  display: flex;
  gap: .3rem;
}

/* tombol action doa (mirip ayah-btn) */
.doa-btn {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: .75rem;
  background: linear-gradient(135deg, #f8fafc, #e5e7eb);
  display: grid;
  place-items: center;
  font-size: .7rem;
  color: #0f172a;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(15,23,42,.10);
  transition: all .22s cubic-bezier(0.4, 0, 0.2, 1);
}

.doa-btn:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, var(--color-primary), #0d9488);
  color: #fff;
  border-color: rgba(11,122,117,.4);
  box-shadow: 0 6px 16px rgba(15,23,42,.18);
}

body.dark-mode .doa-btn {
  background: linear-gradient(
    135deg,
    rgba(30,41,59,.85),
    rgba(15,23,42,.9)
  );
  color: #e2e8f0;
  border-color: rgba(148,163,184,.28);
  box-shadow: 0 3px 10px rgba(0,0,0,.55);
}

.doa-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

body.dark-mode .doa-btn:focus-visible {
  outline-color: #5eead4;
}

/* body kartu doa */
.doa-card-body {
  padding: .45rem .65rem .6rem;
  display: none;
}

.doa-card-body.show {
  display: block;
  animation: fadeInUp-surah .35s ease;
}

/* arabic doa mengikuti style qur'an */
.doa-arab {
  font-family: "LPMQ Isep Misbah", serif;
  direction: rtl;
  text-align: justify;
  font-size: clamp(1.3rem, 1.25rem + 0.3vw, 1.6rem);
  line-height: clamp(2.1rem, 2.3rem + 0.4vw, 2.5rem);
  margin-bottom: .35rem;
  white-space: normal;
  color: #020617;
}

body.dark-mode .doa-arab {
  color: #e5e7eb;
}

/* latin & terjemah */
.doa-latin {
  font-size: .68rem;
  color: var(--color-text-muted);
  margin-bottom: .25rem;
}

body.dark-mode .doa-latin {
  color: #9ca3af;
}

.doa-indo {
  font-size: .7rem;
  color: var(--color-text);
}

body.dark-mode .doa-indo {
  color: #e5e7eb;
}

/* mobile */
@media (max-width: 540px) {
  .doa-card-head {
    flex-wrap: wrap;
  }
  .doa-card-actions {
    gap: .25rem;
  }
}

/* hide via settings (satu grup dengan quran) */
body.hide-latin .doa-latin {
  display: none !important;
}

body.hide-translation .doa-indo {
  display: none !important;
}