/**
 * Khoy Daily Martyr Plugin - Liquid Adaptive Scoped Stylesheet
 * 
 * @package KhoyDailyMartyr
 * @version 1.4.0
 * Fully responsive across ANY column width via:
 * 1. CSS Container Queries (without self-referencing selector bugs)
 * 2. High-performance Flexbox wrapping boundaries
 * 3. Automatic JavaScript ResizeObserver class fallback (.kdm-is-compact)
 */

/* ==========================================================================
   Root Container
   ========================================================================== */
.kdm-martyr-card {
  --kdm-bg-primary: #0D1B2A;
  --kdm-bg-secondary: #1F242D;
  --kdm-gold-primary: #C5A059;
  --kdm-gold-light: #E2BE76;
  --kdm-gold-hover: #D8B36E;
  --kdm-gold-glow: rgba(197, 160, 89, 0.22);
  --kdm-border-gold: rgba(197, 160, 89, 0.28);
  --kdm-text-pure: #FFFFFF;
  --kdm-text-primary: #F1F5F9;
  --kdm-text-secondary: #CBD5E1;
  --kdm-text-muted: #94A3B8;
  --kdm-shadow-ambient: 0 12px 30px -6px rgba(0, 0, 0, 0.5);

  /* Modern Container Query root */
  container-type: inline-size;
  container-name: kdmcard;

  direction: rtl;
  text-align: right;
  width: 100%;
  max-width: 1216px;
  margin: 0 auto;
  box-sizing: border-box;
  font-family: Vazirmatn, "Vazir", "IRANSans", "Shabnam", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Tahoma, sans-serif;
  color: var(--kdm-text-primary);
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

/* Universal internal box-sizing reset */
.kdm-martyr-card *,
.kdm-martyr-card *::before,
.kdm-martyr-card *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-width: 0;
}

/* Main Outer Wrapper */
.kdm-martyr-card .kdm-card-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.5rem;
  background: linear-gradient(135deg, var(--kdm-bg-primary) 0%, #152233 45%, var(--kdm-bg-secondary) 100%);
  border: 1px solid var(--kdm-border-gold);
  border-radius: 18px;
  padding: 1.5rem;
  box-shadow: var(--kdm-shadow-ambient), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.kdm-martyr-card:hover .kdm-card-inner {
  border-color: rgba(197, 160, 89, 0.45);
  box-shadow: var(--kdm-shadow-ambient), 0 0 25px rgba(197, 160, 89, 0.12);
}

.kdm-martyr-card .kdm-bg-decoration {
  position: absolute;
  top: -40px;
  left: -40px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(197, 160, 89, 0.1) 0%, rgba(197, 160, 89, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

/* ==========================================================================
   Portrait Column
   ========================================================================== */
.kdm-martyr-card .kdm-col-portrait {
  flex: 0 0 190px;
  width: 190px;
  max-width: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
  margin: 0 auto;
}

.kdm-martyr-card .kdm-portrait-frame {
  width: 100%;
  aspect-ratio: 3 / 4;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid var(--kdm-border-gold);
  background: #09121C;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45), 0 0 15px var(--kdm-gold-glow);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.kdm-martyr-card .kdm-portrait-frame:hover {
  transform: translateY(-2px);
  border-color: var(--kdm-gold-primary);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.55), 0 0 20px rgba(197, 160, 89, 0.35);
}

.kdm-martyr-card .kdm-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.4s ease;
}

.kdm-martyr-card .kdm-portrait-frame:hover .kdm-portrait-img {
  transform: scale(1.03);
}

/* Corner Accents */
.kdm-martyr-card .kdm-frame-corner {
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: var(--kdm-gold-primary);
  pointer-events: none;
  z-index: 2;
}
.kdm-martyr-card .kdm-frame-corner-tr { top: 5px; right: 5px; border-top: 2px solid var(--kdm-gold-primary); border-right: 2px solid var(--kdm-gold-primary); }
.kdm-martyr-card .kdm-frame-corner-tl { top: 5px; left: 5px; border-top: 2px solid var(--kdm-gold-primary); border-left: 2px solid var(--kdm-gold-primary); }
.kdm-martyr-card .kdm-frame-corner-br { bottom: 5px; right: 5px; border-bottom: 2px solid var(--kdm-gold-primary); border-right: 2px solid var(--kdm-gold-primary); }
.kdm-martyr-card .kdm-frame-corner-bl { bottom: 5px; left: 5px; border-bottom: 2px solid var(--kdm-gold-primary); border-left: 2px solid var(--kdm-gold-primary); }

.kdm-martyr-card .kdm-portrait-caption {
  margin-top: 0.65rem;
  text-align: center;
  width: 100%;
}

.kdm-martyr-card .kdm-portrait-honorific {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--kdm-gold-primary);
  margin-bottom: 0.15rem;
  display: block;
}

.kdm-martyr-card .kdm-portrait-fullname {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--kdm-text-pure);
  line-height: 1.35;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   Content Column (For Wide Viewports)
   ========================================================================== */
.kdm-martyr-card .kdm-col-content {
  /* Minimum 380px boundary forces wrapping whenever container is < 640px! */
  flex: 1 1 380px;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
}

/* Top Meta Bar */
.kdm-martyr-card .kdm-meta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.kdm-martyr-card .kdm-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: linear-gradient(135deg, rgba(197, 160, 89, 0.22) 0%, rgba(197, 160, 89, 0.08) 100%);
  color: var(--kdm-gold-light);
  border: 1px solid var(--kdm-gold-primary);
  padding: 0.28rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(197, 160, 89, 0.15);
}

.kdm-martyr-card .kdm-pill-badge svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
  flex-shrink: 0;
}

.kdm-martyr-card .kdm-badge-martyrdom {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.25) 0%, rgba(197, 160, 89, 0.15) 100%);
  border-color: #EF4444;
  color: #FECACA;
}

.kdm-martyr-card .kdm-badge-birth {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(197, 160, 89, 0.15) 100%);
  border-color: #10B981;
  color: #A7F3D0;
}

.kdm-martyr-card .kdm-cemetery-coords {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--kdm-text-muted);
  font-size: 0.8rem;
  font-weight: 400;
}

.kdm-martyr-card .kdm-cemetery-coords svg {
  width: 14px;
  height: 14px;
  color: var(--kdm-gold-primary);
  flex-shrink: 0;
}

/* Primary Headline */
.kdm-martyr-card .kdm-headline {
  color: var(--kdm-text-pure);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Biographical Line */
.kdm-martyr-card .kdm-bio-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  color: var(--kdm-text-secondary);
  font-size: 0.86rem;
  margin-bottom: 0.9rem;
  line-height: 1.5;
}

.kdm-martyr-card .kdm-bio-item {
  display: inline-flex;
  align-items: center;
}

.kdm-martyr-card .kdm-bio-label {
  color: var(--kdm-gold-light);
  font-weight: 600;
  margin-left: 0.3rem;
}

.kdm-martyr-card .kdm-bio-dot {
  color: var(--kdm-gold-primary);
  opacity: 0.6;
  font-size: 1rem;
  user-select: none;
}

/* Quote Box */
.kdm-martyr-card .kdm-quote-box {
  background: rgba(13, 27, 42, 0.65);
  border-right: 3px solid var(--kdm-gold-primary);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  position: relative;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.kdm-martyr-card .kdm-quote-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.3rem;
}

.kdm-martyr-card .kdm-quote-header svg {
  width: 14px;
  height: 14px;
  fill: var(--kdm-gold-primary);
  opacity: 0.9;
  flex-shrink: 0;
}

.kdm-martyr-card .kdm-quote-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--kdm-gold-light);
}

.kdm-martyr-card .kdm-quote-content {
  font-size: 0.86rem;
  color: var(--kdm-text-secondary);
  line-height: 1.65;
  text-align: justify;
}

.kdm-martyr-card .kdm-quote-mark {
  color: var(--kdm-gold-primary);
  font-weight: bold;
  font-size: 1rem;
  display: inline-block;
  padding: 0 0.15rem;
}

/* Action Buttons Bar */
.kdm-martyr-card .kdm-actions-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-top: auto;
}

.kdm-martyr-card .kdm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.55rem 1.1rem;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none !important;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  line-height: 1;
}

.kdm-martyr-card .kdm-btn-primary {
  background: linear-gradient(135deg, var(--kdm-gold-primary) 0%, var(--kdm-gold-light) 100%);
  color: #0B141E !important;
  border: 1px solid var(--kdm-gold-light);
  box-shadow: 0 3px 10px rgba(197, 160, 89, 0.3);
}

.kdm-martyr-card .kdm-btn-primary:hover {
  background: linear-gradient(135deg, var(--kdm-gold-hover) 0%, #F5D38E 100%);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(197, 160, 89, 0.45);
  color: #070D14 !important;
}

.kdm-martyr-card .kdm-btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  color: var(--kdm-text-primary) !important;
  border: 1px solid var(--kdm-border-gold);
  backdrop-filter: blur(4px);
}

.kdm-martyr-card .kdm-btn-secondary:hover {
  background: rgba(197, 160, 89, 0.15);
  border-color: var(--kdm-gold-primary);
  color: var(--kdm-gold-light) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.kdm-martyr-card .kdm-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  flex-shrink: 0;
}

/* ==========================================================================
   COMPACT / ADAPTIVE MODE (When placed in Elementor columns < 650px)
   Applied automatically by Container Query, JS Observer, or layout class!
   ========================================================================== */
@container kdmcard (max-width: 650px) {
  .kdm-card-inner {
    flex-direction: column !important;
    align-items: center !important;
    padding: 1.15rem !important;
    gap: 1rem !important;
  }

  .kdm-col-portrait {
    flex: 0 0 auto !important;
    width: 140px !important;
    max-width: 140px !important;
    margin: 0 auto !important;
  }

  .kdm-portrait-frame {
    border-radius: 12px !important;
  }

  .kdm-col-content {
    width: 100% !important;
    flex: 1 1 auto !important;
  }

  .kdm-meta-bar {
    width: 100% !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .kdm-headline {
    font-size: 1.15rem !important;
    text-align: center !important;
    margin-bottom: 0.4rem !important;
  }

  .kdm-bio-line {
    justify-content: center !important;
    text-align: center !important;
    font-size: 0.82rem !important;
    margin-bottom: 0.75rem !important;
  }

  .kdm-quote-box {
    padding: 0.65rem 0.85rem !important;
    margin-bottom: 0.85rem !important;
  }

  .kdm-quote-content {
    font-size: 0.84rem !important;
  }

  .kdm-actions-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }

  .kdm-actions-bar .kdm-btn-primary {
    grid-column: 1 / -1 !important;
  }

  .kdm-actions-bar .kdm-btn-secondary,
  .kdm-actions-bar .kdm-btn-poster {
    grid-column: span 1 !important;
  }

  .kdm-btn {
    width: 100% !important;
    padding: 0.6rem 0.65rem !important;
    font-size: 0.82rem !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .kdm-share-bar {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0.65rem !important;
    width: 100% !important;
  }

  .kdm-share-title {
    justify-content: center !important;
  }

  .kdm-share-btns {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.4rem !important;
    width: 100% !important;
  }
}

/* Bulletproof class fallback (.kdm-is-compact) triggered by JS / Layout setting */
.kdm-martyr-card.kdm-is-compact .kdm-card-inner,
.kdm-martyr-card.kdm-layout-stacked .kdm-card-inner {
  flex-direction: column !important;
  align-items: center !important;
  padding: 1.15rem !important;
  gap: 1rem !important;
}

.kdm-martyr-card.kdm-is-compact .kdm-col-portrait,
.kdm-martyr-card.kdm-layout-stacked .kdm-col-portrait {
  flex: 0 0 auto !important;
  width: 140px !important;
  max-width: 140px !important;
  margin: 0 auto !important;
}

.kdm-martyr-card.kdm-is-compact .kdm-col-content,
.kdm-martyr-card.kdm-layout-stacked .kdm-col-content {
  width: 100% !important;
  flex: 1 1 auto !important;
}

.kdm-martyr-card.kdm-is-compact .kdm-meta-bar,
.kdm-martyr-card.kdm-layout-stacked .kdm-meta-bar {
  width: 100% !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.kdm-martyr-card.kdm-is-compact .kdm-headline,
.kdm-martyr-card.kdm-layout-stacked .kdm-headline {
  font-size: 1.15rem !important;
  text-align: center !important;
  margin-bottom: 0.4rem !important;
}

.kdm-martyr-card.kdm-is-compact .kdm-bio-line,
.kdm-martyr-card.kdm-layout-stacked .kdm-bio-line {
  justify-content: center !important;
  text-align: center !important;
  font-size: 0.82rem !important;
  margin-bottom: 0.75rem !important;
}

.kdm-martyr-card.kdm-is-compact .kdm-quote-box,
.kdm-martyr-card.kdm-layout-stacked .kdm-quote-box {
  padding: 0.65rem 0.85rem !important;
  margin-bottom: 0.85rem !important;
}

.kdm-martyr-card.kdm-is-compact .kdm-quote-content,
.kdm-martyr-card.kdm-layout-stacked .kdm-quote-content {
  font-size: 0.84rem !important;
}

.kdm-martyr-card.kdm-is-compact .kdm-actions-bar,
.kdm-martyr-card.kdm-layout-stacked .kdm-actions-bar {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.5rem !important;
  width: 100% !important;
}

.kdm-martyr-card.kdm-is-compact .kdm-actions-bar .kdm-btn-primary,
.kdm-martyr-card.kdm-layout-stacked .kdm-actions-bar .kdm-btn-primary {
  grid-column: 1 / -1 !important;
}

.kdm-martyr-card.kdm-is-compact .kdm-actions-bar .kdm-btn-secondary,
.kdm-martyr-card.kdm-is-compact .kdm-actions-bar .kdm-btn-poster,
.kdm-martyr-card.kdm-layout-stacked .kdm-actions-bar .kdm-btn-secondary,
.kdm-martyr-card.kdm-layout-stacked .kdm-actions-bar .kdm-btn-poster {
  grid-column: span 1 !important;
}

.kdm-martyr-card.kdm-is-compact .kdm-btn,
.kdm-martyr-card.kdm-layout-stacked .kdm-btn {
  width: 100% !important;
  padding: 0.6rem 0.65rem !important;
  font-size: 0.82rem !important;
  text-align: center !important;
  justify-content: center !important;
}

.kdm-martyr-card.kdm-is-compact .kdm-share-bar,
.kdm-martyr-card.kdm-layout-stacked .kdm-share-bar {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 0.65rem !important;
  width: 100% !important;
}

.kdm-martyr-card.kdm-is-compact .kdm-share-title,
.kdm-martyr-card.kdm-layout-stacked .kdm-share-title {
  justify-content: center !important;
}

.kdm-martyr-card.kdm-is-compact .kdm-share-btns,
.kdm-martyr-card.kdm-layout-stacked .kdm-share-btns {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  width: 100% !important;
}

/* Smartphone & Compact Narrow (< 440px) */
@container kdmcard (max-width: 440px) {
  .kdm-card-inner {
    padding: 0.95rem !important;
  }
  .kdm-actions-bar {
    grid-template-columns: 1fr !important;
  }
  .kdm-actions-bar .kdm-btn-primary,
  .kdm-actions-bar .kdm-btn-secondary,
  .kdm-actions-bar .kdm-btn-poster {
    grid-column: auto !important;
  }
  .kdm-meta-bar {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.4rem !important;
    text-align: center !important;
  }
  .kdm-share-btns {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.35rem !important;
  }
  .kdm-share-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 0.38rem 0.2rem !important;
    font-size: 0.72rem !important;
  }
  .kdm-share-btn svg {
    width: 12px !important;
    height: 12px !important;
  }
}

.kdm-martyr-card.kdm-is-compact[data-width="tiny"] .kdm-actions-bar,
.kdm-martyr-card.kdm-layout-stacked[data-width="tiny"] .kdm-actions-bar {
  grid-template-columns: 1fr !important;
}
.kdm-martyr-card.kdm-is-compact[data-width="tiny"] .kdm-actions-bar .kdm-btn-primary,
.kdm-martyr-card.kdm-is-compact[data-width="tiny"] .kdm-actions-bar .kdm-btn-secondary,
.kdm-martyr-card.kdm-is-compact[data-width="tiny"] .kdm-actions-bar .kdm-btn-poster {
  grid-column: auto !important;
}
.kdm-martyr-card.kdm-is-compact[data-width="tiny"] .kdm-meta-bar {
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.4rem !important;
}
.kdm-martyr-card.kdm-is-compact[data-width="tiny"] .kdm-share-btns {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0.35rem !important;
}
.kdm-martyr-card.kdm-is-compact[data-width="tiny"] .kdm-share-btn {
  width: 100% !important;
  justify-content: center !important;
  padding: 0.38rem 0.2rem !important;
  font-size: 0.72rem !important;
}

/* Extra Small Phone (< 340px) */
@container kdmcard (max-width: 340px) {
  .kdm-col-portrait {
    width: 110px !important;
    max-width: 110px !important;
  }
  .kdm-share-btns {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Direct Media Queries for viewports without container queries */
@media (max-width: 650px) {
  .kdm-martyr-card .kdm-card-inner {
    flex-direction: column;
    align-items: center;
    padding: 1.15rem;
    gap: 1rem;
  }
  .kdm-martyr-card .kdm-col-portrait {
    flex: 0 0 auto;
    width: 140px;
    max-width: 140px;
    margin: 0 auto;
  }
  .kdm-martyr-card .kdm-col-content {
    width: 100%;
    flex: 1 1 auto;
  }
  .kdm-martyr-card .kdm-headline {
    font-size: 1.15rem;
    text-align: center;
  }
  .kdm-martyr-card .kdm-bio-line {
    justify-content: center;
    text-align: center;
  }
  .kdm-martyr-card .kdm-actions-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    width: 100%;
  }
  .kdm-martyr-card .kdm-actions-bar .kdm-btn-primary {
    grid-column: 1 / -1;
  }
  .kdm-martyr-card .kdm-actions-bar .kdm-btn-secondary,
  .kdm-martyr-card .kdm-actions-bar .kdm-btn-poster {
    grid-column: span 1;
  }
  .kdm-martyr-card .kdm-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .kdm-martyr-card .kdm-share-bar {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.65rem;
  }
  .kdm-martyr-card .kdm-share-title {
    justify-content: center;
  }
  .kdm-martyr-card .kdm-share-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
  }
}

@media (max-width: 440px) {
  .kdm-martyr-card .kdm-card-inner {
    padding: 0.95rem;
  }
  .kdm-martyr-card .kdm-actions-bar {
    grid-template-columns: 1fr;
  }
  .kdm-martyr-card .kdm-actions-bar .kdm-btn-primary,
  .kdm-martyr-card .kdm-actions-bar .kdm-btn-secondary,
  .kdm-martyr-card .kdm-actions-bar .kdm-btn-poster {
    grid-column: auto;
  }
  .kdm-martyr-card .kdm-meta-bar {
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
  }
  .kdm-martyr-card .kdm-share-btns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
  }
  .kdm-martyr-card .kdm-share-btn {
    width: 100%;
    justify-content: center;
    padding: 0.38rem 0.2rem;
    font-size: 0.72rem;
  }
}

@media (max-width: 340px) {
  .kdm-martyr-card .kdm-col-portrait {
    width: 110px;
    max-width: 110px;
  }
  .kdm-martyr-card .kdm-share-btns {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   MODULE 1: Interactive 30-Juz Collective Quran Khatm
   ========================================================================== */
.shohada-khatm-container {
	direction: rtl;
	text-align: right;
	background: linear-gradient(145deg, #0F1D2F 0%, #152438 100%);
	border: 1px solid rgba(197, 160, 89, 0.35);
	border-radius: 18px;
	padding: 24px;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
	color: #F8FAFC;
	font-family: inherit;
	margin: 25px 0;
	position: relative;
	overflow: hidden;
	container-type: inline-size;
	container-name: shohadakhatm;
	box-sizing: border-box;
}

.shohada-khatm-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	border-bottom: 1px solid rgba(197, 160, 89, 0.2);
	padding-bottom: 18px;
	margin-bottom: 20px;
}

.shohada-khatm-title-wrap {
	display: flex;
	align-items: center;
	gap: 14px;
}

.shohada-khatm-icon-badge {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(197, 160, 89, 0.2) 0%, rgba(197, 160, 89, 0.05) 100%);
	border: 1px solid #C5A059;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #E2BE76;
	flex-shrink: 0;
	box-shadow: 0 4px 12px rgba(197, 160, 89, 0.15);
}

.shohada-khatm-title {
	margin: 0 0 4px 0;
	font-size: 1.15rem;
	font-weight: 800;
	color: #E2BE76;
	letter-spacing: -0.3px;
}

.shohada-khatm-subtitle {
	font-size: 0.82rem;
	color: #94A3B8;
	display: block;
}

.shohada-khatm-round-badge {
	background: rgba(197, 160, 89, 0.12);
	border: 1px solid #C5A059;
	border-radius: 24px;
	padding: 6px 16px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #E2BE76;
	font-size: 0.88rem;
	font-weight: 700;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.shohada-khatm-round-badge .round-label {
	color: #CBD5E1;
	font-weight: 500;
}

.shohada-khatm-progress-section {
	margin-bottom: 24px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 12px;
	padding: 14px 18px;
}

.shohada-khatm-progress-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.85rem;
	margin-bottom: 10px;
	color: #CBD5E1;
}

.shohada-khatm-progress-meta .progress-percentage {
	color: #E2BE76;
	font-weight: 700;
}

.shohada-khatm-progress-track {
	height: 10px;
	background: rgba(0, 0, 0, 0.35);
	border-radius: 20px;
	overflow: hidden;
	position: relative;
	box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
}

.shohada-khatm-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #C5A059 0%, #F59E0B 50%, #10B981 100%);
	border-radius: 20px;
	transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
}

.shohada-khatm-progress-glow {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	animation: shohadaShimmer 2.5s infinite;
}

@keyframes shohadaShimmer {
	0% { transform: translateX(100%); }
	100% { transform: translateX(-100%); }
}

.shohada-khatm-notice {
	padding: 12px 16px;
	border-radius: 10px;
	margin-bottom: 18px;
	font-size: 0.88rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 10px;
	animation: shohadaFadeIn 0.3s ease;
}

.shohada-khatm-notice.notice-success {
	background: rgba(16, 185, 129, 0.15);
	border: 1px solid #10B981;
	color: #6EE7B7;
}

.shohada-khatm-notice.notice-error {
	background: rgba(239, 68, 68, 0.15);
	border: 1px solid #EF4444;
	color: #FCA5A5;
}

.shohada-khatm-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
	margin-bottom: 20px;
}

@media (max-width: 992px) {
	.shohada-khatm-grid {
		grid-template-columns: repeat(5, 1fr);
	}
}

@media (max-width: 768px) {
	.shohada-khatm-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}
}

@media (max-width: 480px) {
	.shohada-khatm-container {
		padding: 16px 12px !important;
		border-radius: 14px !important;
	}
	.shohada-khatm-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding-bottom: 14px;
	}
	.shohada-khatm-round-badge {
		align-self: flex-start;
	}
	.shohada-khatm-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}
}

@media (max-width: 340px) {
	.shohada-khatm-container {
		padding: 12px 8px !important;
	}
	.shohada-khatm-grid {
		gap: 6px;
	}
}

@container shohadakhatm (max-width: 992px) {
	.shohada-khatm-grid {
		grid-template-columns: repeat(5, 1fr);
	}
}

@container shohadakhatm (max-width: 720px) {
	.shohada-khatm-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}
}

@container shohadakhatm (max-width: 480px) {
	.shohada-khatm-container {
		padding: 16px 12px !important;
		border-radius: 14px !important;
	}
	.shohada-khatm-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding-bottom: 14px;
	}
	.shohada-khatm-round-badge {
		align-self: flex-start;
	}
	.shohada-khatm-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}
}

@container shohadakhatm (max-width: 340px) {
	.shohada-khatm-container {
		padding: 12px 8px !important;
	}
	.shohada-khatm-grid {
		gap: 6px;
	}
}

.shohada-juz-card {
	appearance: none;
	-webkit-appearance: none;
	background: rgba(26, 39, 54, 0.7);
	border: 1px solid rgba(197, 160, 89, 0.25);
	border-radius: 12px;
	padding: 12px 8px;
	cursor: pointer;
	transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	text-align: center;
	color: inherit;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
	outline: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.shohada-juz-card:focus-visible {
	box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.5);
}

.shohada-juz-card .juz-inner {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.shohada-juz-card .juz-number-circle {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 0.95rem;
	transition: all 0.2s ease;
}

.shohada-juz-card .juz-name {
	font-size: 0.78rem;
	font-weight: 600;
	white-space: nowrap;
}

.shohada-juz-card .juz-status-badge {
	font-size: 0.68rem;
	padding: 2px 8px;
	border-radius: 10px;
	font-weight: 600;
	transition: all 0.2s ease;
}

.shohada-juz-card.juz-available {
	border-color: rgba(197, 160, 89, 0.35);
}

.shohada-juz-card.juz-available .juz-number-circle {
	background: rgba(197, 160, 89, 0.12);
	color: #E2BE76;
	border: 1px solid rgba(197, 160, 89, 0.4);
}

.shohada-juz-card.juz-available .juz-name {
	color: #F1F5F9;
}

.shohada-juz-card.juz-available .juz-status-badge {
	background: rgba(197, 160, 89, 0.15);
	color: #E2BE76;
	border: 1px solid rgba(197, 160, 89, 0.3);
}

.shohada-juz-card.juz-available:hover {
	transform: translateY(-3px);
	border-color: #E2BE76;
	background: rgba(30, 48, 68, 0.9);
	box-shadow: 0 8px 20px rgba(197, 160, 89, 0.2);
}

.shohada-juz-card.juz-available:hover .juz-number-circle {
	background: #C5A059;
	color: #0D1B2A;
}

.shohada-juz-card.juz-taken {
	background: rgba(15, 23, 42, 0.4);
	border-color: rgba(148, 163, 184, 0.15);
	cursor: not-allowed;
	opacity: 0.55;
	box-shadow: none;
}

.shohada-juz-card.juz-taken .juz-number-circle {
	background: rgba(148, 163, 184, 0.1);
	color: #64748B;
	border: 1px solid rgba(148, 163, 184, 0.2);
}

.shohada-juz-card.juz-taken .juz-name {
	color: #64748B;
}

.shohada-juz-card.juz-taken .juz-status-badge {
	background: rgba(148, 163, 184, 0.1);
	color: #94A3B8;
	border: 1px solid rgba(148, 163, 184, 0.2);
}

.shohada-juz-card.juz-mine {
	background: linear-gradient(135deg, rgba(6, 78, 59, 0.8) 0%, rgba(16, 185, 129, 0.3) 100%);
	border-color: #10B981;
	box-shadow: 0 0 16px rgba(16, 185, 129, 0.35);
}

.shohada-juz-card.juz-mine .juz-number-circle {
	background: #10B981;
	color: #FFFFFF;
	border: 1px solid #34D399;
}

.shohada-juz-card.juz-mine .juz-name {
	color: #FFFFFF;
	font-weight: 700;
}

.shohada-juz-card.juz-mine .juz-status-badge {
	background: #065F46;
	color: #6EE7B7;
	border: 1px solid #10B981;
}

.shohada-juz-card.juz-loading {
	pointer-events: none;
	position: relative;
}

.shohada-juz-card.juz-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22px;
	height: 22px;
	margin: -11px 0 0 -11px;
	border: 2px solid #E2BE76;
	border-top-color: transparent;
	border-radius: 50%;
	animation: shohadaSpin 0.7s linear infinite;
}

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

.shohada-khatm-footer {
	border-top: 1px solid rgba(197, 160, 89, 0.15);
	padding-top: 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 0.8rem;
	color: #94A3B8;
}

.shohada-khatm-legend {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.shohada-khatm-legend .legend-item {
	display: flex;
	align-items: center;
	gap: 6px;
}

.legend-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	display: inline-block;
}

.dot-available {
	background: #E2BE76;
	box-shadow: 0 0 6px rgba(226, 190, 118, 0.5);
}

.dot-taken {
	background: #64748B;
}

.dot-mine {
	background: #10B981;
	box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
}

.shohada-khatm-help {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #CBD5E1;
}

/* ==========================================================================
   MODULE 2: Real-time Salawat Counter
   ========================================================================== */
.shohada-salawat-card {
	direction: rtl;
	text-align: right;
	background: linear-gradient(135deg, #132235 0%, #1A2E44 100%);
	border: 1px solid rgba(197, 160, 89, 0.3);
	border-radius: 16px;
	padding: 20px 24px;
	margin: 20px 0;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
	color: #fff;
	container-type: inline-size;
	container-name: shohadasalawat;
	box-sizing: border-box;
}

.salawat-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.salawat-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: rgba(226, 190, 118, 0.15);
	border: 1px solid #C5A059;
	color: #E2BE76;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.salawat-title {
	margin: 0 0 3px 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: #E2BE76;
}

.salawat-phrase {
	font-size: 0.82rem;
	color: #94A3B8;
	font-family: inherit;
}

.salawat-counter-display {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	background: rgba(0, 0, 0, 0.25);
	border-radius: 12px;
	padding: 14px 18px;
	border: 1px solid rgba(255, 255, 255, 0.05);
}

.counter-number-wrap {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.counter-number {
	font-size: 1.8rem;
	font-weight: 800;
	color: #10B981;
	text-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
	transition: transform 0.15s ease;
}

.counter-number.scale-up {
	transform: scale(1.15);
}

.counter-label {
	font-size: 0.85rem;
	color: #CBD5E1;
}

.salawat-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.btn-salawat-send {
	background: linear-gradient(135deg, #0D1B2A 0%, #162638 100%);
	border: 1px solid #C5A059;
	color: #E2BE76;
	padding: 8px 16px;
	border-radius: 20px;
	font-size: 0.82rem;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.2s ease;
	outline: none;
	position: relative;
	overflow: hidden;
}

.btn-salawat-send:hover {
	background: #C5A059;
	color: #0D1B2A;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(197, 160, 89, 0.3);
}

.btn-salawat-send:active {
	transform: translateY(0);
}

/* User History Chip */
.salawat-user-history {
	margin-top: 14px;
	display: flex;
	justify-content: center;
}

.history-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(16, 185, 129, 0.1);
	border: 1px solid rgba(16, 185, 129, 0.3);
	border-radius: 20px;
	padding: 5px 14px;
	font-size: 0.8rem;
	color: #A7F3D0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	animation: shohadaFadeIn 0.3s ease;
}

.history-chip .history-count {
	color: #34D399;
	font-weight: 800;
	font-size: 0.95rem;
}

/* Floating Particles */
.shohada-salawat-card {
	position: relative;
	overflow: hidden;
}

.salawat-particles-layer {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 50;
}

.floating-salawat-particle {
	position: absolute;
	color: #E2BE76;
	font-weight: 800;
	font-size: 0.85rem;
	text-shadow: 0 0 10px rgba(226, 190, 118, 0.7);
	user-select: none;
	pointer-events: none;
	white-space: nowrap;
	animation: salawatParticleFly 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes salawatParticleFly {
	0% {
		opacity: 1;
		transform: translate(0, 0) scale(0.8);
	}
	40% {
		opacity: 1;
		transform: translate(var(--tx, 0), -40px) scale(1.15);
	}
	100% {
		opacity: 0;
		transform: translate(var(--tx, 0), -90px) scale(0.9);
	}
}

/* Salawat Mobile & Container Queries */
@media (max-width: 520px) {
	.shohada-salawat-card {
		padding: 16px 14px !important;
		border-radius: 14px !important;
	}
	.salawat-header {
		gap: 10px;
		margin-bottom: 12px;
	}
	.salawat-icon {
		width: 36px;
		height: 36px;
	}
	.salawat-title {
		font-size: 0.98rem;
	}
	.salawat-phrase {
		font-size: 0.78rem;
	}
	.salawat-counter-display {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 12px;
		padding: 12px 14px;
	}
	.counter-number-wrap {
		justify-content: center;
		width: 100%;
	}
	.counter-number {
		font-size: 1.6rem;
	}
	.salawat-actions {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 6px;
	}
	.btn-salawat-send {
		width: 100%;
		padding: 8px 4px;
		font-size: 0.8rem;
		text-align: center;
		justify-content: center;
		display: inline-flex;
		align-items: center;
	}
}

@media (max-width: 340px) {
	.salawat-actions {
		grid-template-columns: 1fr;
		gap: 6px;
	}
}

@container shohadasalawat (max-width: 520px) {
	.shohada-salawat-card {
		padding: 16px 14px !important;
		border-radius: 14px !important;
	}
	.salawat-header {
		gap: 10px;
		margin-bottom: 12px;
	}
	.salawat-icon {
		width: 36px;
		height: 36px;
	}
	.salawat-title {
		font-size: 0.98rem;
	}
	.salawat-phrase {
		font-size: 0.78rem;
	}
	.salawat-counter-display {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 12px;
		padding: 12px 14px;
	}
	.counter-number-wrap {
		justify-content: center;
		width: 100%;
	}
	.counter-number {
		font-size: 1.6rem;
	}
	.salawat-actions {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 6px;
	}
	.btn-salawat-send {
		width: 100%;
		padding: 8px 4px;
		font-size: 0.8rem;
		text-align: center;
		justify-content: center;
		display: inline-flex;
		align-items: center;
	}
}

@container shohadasalawat (max-width: 340px) {
	.salawat-actions {
		grid-template-columns: 1fr;
		gap: 6px;
	}
}

/* ==========================================================================
   MODULE 3: Dedicated Audio Player
   ========================================================================== */
.shohada-audio-player {
	direction: rtl;
	text-align: right;
	background: linear-gradient(135deg, #0B1622 0%, #152438 100%);
	border: 1px solid rgba(197, 160, 89, 0.35);
	border-radius: 14px;
	padding: 16px 20px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	color: #fff;
	margin: 20px 0;
	container-type: inline-size;
	container-name: shohadaaudio;
	box-sizing: border-box;
}

.audio-main-row {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 12px;
}

.audio-toggle-btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #C5A059;
	color: #0D1B2A;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: all 0.2s ease;
	outline: none;
	box-shadow: 0 4px 12px rgba(197, 160, 89, 0.3);
}

.audio-toggle-btn:hover {
	transform: scale(1.06);
	background: #E2BE76;
}

.audio-info {
	flex: 1;
	min-width: 0;
}

.audio-title {
	font-size: 0.92rem;
	font-weight: 700;
	color: #F8FAFC;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 2px;
}

.audio-speaker {
	font-size: 0.78rem;
	color: #94A3B8;
}

.audio-time {
	font-size: 0.8rem;
	color: #CBD5E1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.audio-progress-container {
	cursor: pointer;
	padding: 6px 0;
}

.audio-progress-bar {
	height: 6px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 6px;
	position: relative;
	overflow: hidden;
}

.audio-progress-filled {
	height: 100%;
	background: linear-gradient(90deg, #C5A059, #10B981);
	border-radius: 6px;
	transition: width 0.1s linear;
}

/* Audio Text Drawer Accordion */
.audio-drawer-toggle-row {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.btn-audio-text-toggle {
	background: transparent;
	border: 1px dashed rgba(197, 160, 89, 0.4);
	color: #E2BE76;
	border-radius: 8px;
	padding: 6px 12px;
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: all 0.2s ease;
	outline: none;
}

.btn-audio-text-toggle:hover {
	background: rgba(197, 160, 89, 0.12);
	border-style: solid;
	border-color: #C5A059;
}

.btn-audio-text-toggle .drawer-arrow {
	font-size: 0.65rem;
	transition: transform 0.2s ease;
}

.btn-audio-text-toggle.is-open .drawer-arrow {
	transform: rotate(180deg);
}

.audio-text-drawer {
	margin-top: 12px;
	background: rgba(0, 0, 0, 0.28);
	border: 1px solid rgba(197, 160, 89, 0.2);
	border-radius: 10px;
	padding: 14px 16px;
	font-size: 0.86rem;
	line-height: 1.8;
	color: #E2E8F0;
	text-align: justify;
	animation: shohadaFadeIn 0.3s ease;
}

.audio-text-drawer p {
	margin: 0;
}

/* Audio Player Mobile & Container Queries */
@media (max-width: 480px) {
	.shohada-audio-player {
		padding: 14px !important;
		border-radius: 12px !important;
	}
	.audio-main-row {
		gap: 10px;
	}
	.audio-toggle-btn {
		width: 40px;
		height: 40px;
	}
	.audio-title {
		font-size: 0.88rem;
	}
	.audio-speaker {
		font-size: 0.74rem;
	}
	.audio-time {
		font-size: 0.75rem;
	}
	.btn-audio-text-toggle {
		width: 100%;
		justify-content: center;
	}
}

@media (max-width: 340px) {
	.audio-main-row {
		flex-wrap: wrap;
	}
	.audio-time {
		width: 100%;
		text-align: left;
	}
}

@container shohadaaudio (max-width: 480px) {
	.shohada-audio-player {
		padding: 14px !important;
		border-radius: 12px !important;
	}
	.audio-main-row {
		gap: 10px;
	}
	.audio-toggle-btn {
		width: 40px;
		height: 40px;
	}
	.audio-title {
		font-size: 0.88rem;
	}
	.audio-speaker {
		font-size: 0.74rem;
	}
	.audio-time {
		font-size: 0.75rem;
	}
	.btn-audio-text-toggle {
		width: 100%;
		justify-content: center;
	}
}

@container shohadaaudio (max-width: 340px) {
	.audio-main-row {
		flex-wrap: wrap;
	}
	.audio-time {
		width: 100%;
		text-align: left;
	}
}

/* Glassmorphism Confirmation Modal */
.shohada-modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(8, 15, 26, 0.82);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100;
	padding: 20px;
	border-radius: 18px;
	animation: shohadaFadeIn 0.25s ease;
}

.shohada-modal-card {
	background: linear-gradient(145deg, #132235 0%, #1c2e44 100%);
	border: 1px solid rgba(197, 160, 89, 0.45);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(197, 160, 89, 0.15);
	border-radius: 16px;
	padding: 26px 24px;
	max-width: 380px;
	width: 100%;
	text-align: center;
	direction: rtl;
	color: #F8FAFC;
	animation: shohadaScaleUp 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.shohada-modal-icon-badge {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(197, 160, 89, 0.25) 0%, rgba(197, 160, 89, 0.08) 100%);
	border: 1px solid #C5A059;
	color: #E2BE76;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
	box-shadow: 0 4px 16px rgba(197, 160, 89, 0.25);
}

.shohada-modal-title {
	margin: 0 0 8px 0;
	font-size: 1.15rem;
	font-weight: 800;
	color: #E2BE76;
}

.shohada-modal-desc {
	margin: 0 0 20px 0;
	font-size: 0.92rem;
	line-height: 1.6;
	color: #CBD5E1;
}

.shohada-modal-juz-name {
	color: #F59E0B;
	font-weight: 800;
	padding: 2px 6px;
	background: rgba(245, 158, 11, 0.12);
	border-radius: 6px;
	border: 1px solid rgba(245, 158, 11, 0.25);
}

.shohada-modal-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.btn-modal-confirm {
	background: linear-gradient(135deg, #C5A059 0%, #B38F46 100%);
	color: #0D1B2A;
	border: none;
	border-radius: 10px;
	padding: 10px 20px;
	font-weight: 800;
	font-size: 0.9rem;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: all 0.2s ease;
	box-shadow: 0 4px 14px rgba(197, 160, 89, 0.35);
}

.btn-modal-confirm:hover {
	background: #E2BE76;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(197, 160, 89, 0.5);
}

.btn-modal-cancel {
	background: rgba(255, 255, 255, 0.08);
	color: #94A3B8;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 10px;
	padding: 10px 18px;
	font-weight: 600;
	font-size: 0.88rem;
	cursor: pointer;
	transition: all 0.2s ease;
}

.btn-modal-cancel:hover {
	background: rgba(255, 255, 255, 0.15);
	color: #F1F5F9;
}

/* Modal Mobile Refinements */
@media (max-width: 480px) {
	.shohada-modal-card {
		max-width: 92vw;
		padding: 20px 16px;
	}
	.shohada-modal-actions {
		flex-direction: column;
		width: 100%;
		gap: 8px;
	}
	.btn-modal-confirm,
	.btn-modal-cancel {
		width: 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   Poster Generator Button & Social Sharing Bar
   ========================================================================== */
.kdm-martyr-card .kdm-btn-poster {
  background: linear-gradient(135deg, rgba(197, 160, 89, 0.15) 0%, rgba(226, 190, 118, 0.08) 100%);
  color: var(--kdm-gold-light) !important;
  border: 1px dashed var(--kdm-gold-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.kdm-martyr-card .kdm-btn-poster:hover {
  background: linear-gradient(135deg, var(--kdm-gold-primary) 0%, var(--kdm-gold-light) 100%);
  color: #0B141E !important;
  border-style: solid;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(197, 160, 89, 0.4);
}

/* Social Sharing Bar */
.kdm-martyr-card .kdm-share-bar {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px dashed rgba(197, 160, 89, 0.22);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  width: 100%;
}

.kdm-martyr-card .kdm-share-title {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--kdm-gold-light);
}

.kdm-martyr-card .kdm-share-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.kdm-martyr-card .kdm-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.32rem 0.6rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: all 0.2s ease;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--kdm-text-secondary) !important;
  cursor: pointer;
  line-height: 1;
}

.kdm-martyr-card .kdm-share-btn svg {
  flex-shrink: 0;
}

.kdm-martyr-card .kdm-share-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.kdm-martyr-card .kdm-share-eitaa:hover {
  background: rgba(243, 112, 35, 0.2);
  border-color: #F37023;
  color: #FFA46B !important;
}

.kdm-martyr-card .kdm-share-bale:hover {
  background: rgba(0, 166, 147, 0.2);
  border-color: #00A693;
  color: #38E3D0 !important;
}

.kdm-martyr-card .kdm-share-rubika:hover {
  background: rgba(142, 36, 170, 0.25);
  border-color: #AB47BC;
  color: #E1BEE7 !important;
}

.kdm-martyr-card .kdm-share-whatsapp:hover {
  background: rgba(37, 211, 102, 0.2);
  border-color: #25D366;
  color: #70FF9F !important;
}

.kdm-martyr-card .kdm-share-telegram:hover {
  background: rgba(0, 136, 204, 0.2);
  border-color: #0088CC;
  color: #72D0FF !important;
}

.kdm-martyr-card .kdm-share-copy:hover {
  background: rgba(197, 160, 89, 0.2);
  border-color: var(--kdm-gold-primary);
  color: var(--kdm-gold-light) !important;
}

/* ==========================================================================
   HTML5 Canvas Poster Generator Modal
   ========================================================================== */
.kdm-poster-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(6, 12, 19, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  direction: rtl;
  text-align: right;
  font-family: inherit;
}

.kdm-poster-modal.kdm-active {
  opacity: 1;
  pointer-events: auto;
}

.kdm-poster-dialog {
  background: linear-gradient(135deg, #0D1B2A 0%, #172434 100%);
  border: 1px solid rgba(197, 160, 89, 0.4);
  border-radius: 16px;
  max-width: 600px;
  width: 100%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85), 0 0 35px rgba(197, 160, 89, 0.2);
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.kdm-poster-modal.kdm-active .kdm-poster-dialog {
  transform: scale(1);
}

.kdm-poster-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(197, 160, 89, 0.2);
  background: rgba(0, 0, 0, 0.2);
}

.kdm-poster-header h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #E2BE76;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.kdm-poster-close-btn {
  background: transparent;
  border: none;
  color: #94A3B8;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: all 0.2s;
  line-height: 1;
  display: flex;
  align-items: center;
}

.kdm-poster-close-btn:hover {
  color: #FFF;
  background: rgba(255, 255, 255, 0.1);
}

.kdm-poster-body {
  padding: 1.25rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.kdm-poster-tabs {
  display: flex;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.35);
  padding: 4px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.kdm-poster-tab {
  padding: 0.45rem 0.9rem;
  border-radius: 7px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #94A3B8;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.kdm-poster-tab.kdm-tab-active {
  background: #C5A059;
  color: #0B141E;
}

.kdm-poster-canvas-wrap {
  width: 100%;
  max-width: 320px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(197, 160, 89, 0.35);
  background: #0B1522;
  display: flex;
  justify-content: center;
  align-items: center;
}

.kdm-poster-canvas-wrap canvas {
  width: 100%;
  height: auto;
  display: block;
}

.kdm-poster-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.2);
}

/* Poster Modal Mobile Adaptations */
@media (max-width: 480px) {
  .kdm-poster-modal {
    padding: 0.5rem;
  }
  .kdm-poster-dialog {
    max-width: 100%;
    max-height: 94vh;
    border-radius: 12px;
  }
  .kdm-poster-header {
    padding: 0.75rem 1rem;
  }
  .kdm-poster-header h3 {
    font-size: 0.95rem;
  }
  .kdm-poster-body {
    padding: 0.85rem;
    gap: 0.75rem;
  }
  .kdm-poster-canvas-wrap {
    max-width: min(250px, 72vw);
  }
  .kdm-poster-footer {
    padding: 0.75rem 1rem;
    flex-direction: column-reverse;
    gap: 0.5rem;
  }
  .kdm-poster-footer button {
    width: 100% !important;
    justify-content: center !important;
    padding: 0.65rem 1rem !important;
  }
}

@media (max-width: 340px) {
  .kdm-poster-canvas-wrap {
    max-width: min(210px, 68vw);
  }
  .kdm-poster-tab {
    padding: 0.35rem 0.6rem;
    font-size: 0.74rem;
  }
}