/* ==========================================================================
   Persian Decorative Elements — Visible, Elegant, Cultural
   ========================================================================== */

/* ---------- 8-Pointed Star Background ---------- */
.persian-pattern-bg { position: relative; }
.persian-pattern-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%2332127a' stroke-width='0.5' opacity='0.8'%3E%3Cpolygon points='30,2 34,20 52,12 42,26 58,30 42,34 52,48 34,40 30,58 26,40 8,48 18,34 2,30 18,26 8,12 26,20'/%3E%3Ccircle cx='30' cy='30' r='6'/%3E%3Ccircle cx='30' cy='30' r='12' stroke-dasharray='3,3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 60px 60px;
  background-repeat: repeat;
}
.persian-pattern-bg > * { position: relative; z-index: 1; }

/* ---------- Section Dividers ---------- */
.persian-divider { display: block; width: 100%; height: 80px; pointer-events: none; position: relative; overflow: hidden; }
.persian-divider--up {
  background: linear-gradient(to bottom, transparent, var(--color-bg-primary));
  position: relative;
}
.persian-divider--up::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 10%, var(--color-accent) 50%, transparent 90%);
  opacity: 0.4;
}
.persian-divider--down {
  background: linear-gradient(to top, transparent, rgba(50,18,122,0.03));
}

/* ---------- Geometric Border Strip ---------- */
.persian-border {
  display: block;
  width: 100%;
  height: 20px;
  pointer-events: none;
  background-repeat: repeat-x;
  background-position: center;
  background-size: 40px 20px;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'%3E%3Cg fill='none' stroke='%23d99058' stroke-width='0.8'%3E%3Cpath d='M0,10 L10,0 L20,10 L10,20Z'/%3E%3Cpath d='M20,10 L30,0 L40,10 L30,20Z'/%3E%3Ccircle cx='10' cy='10' r='2' fill='%23d99058' opacity='0.4'/%3E%3Ccircle cx='30' cy='10' r='2' fill='%23d99058' opacity='0.4'/%3E%3Cline x1='0' y1='10' x2='40' y2='10' stroke-opacity='0.2'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Corner Ornaments ---------- */
.persian-corner { position: relative; }
.persian-corner::before,
.persian-corner::after {
  content: '';
  position: absolute;
  width: 48px;
  height: 48px;
  opacity: 0.25;
  pointer-events: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none'%3E%3Cpath d='M0,0 L0,20 Q0,0 20,0Z' fill='%2332127a' opacity='0.15'/%3E%3Cpath d='M0,0 Q15,4 4,15' stroke='%23d99058' stroke-width='1.5'/%3E%3Cpath d='M0,0 Q25,6 6,25' stroke='%2332127a' stroke-width='0.8'/%3E%3Ccircle cx='8' cy='8' r='2.5' fill='%23d99058' opacity='0.6'/%3E%3Ccircle cx='3' cy='3' r='1.5' fill='%2332127a' opacity='0.4'/%3E%3C/g%3E%3C/svg%3E");
}
.persian-corner::before { top: -4px; left: -4px; }
.persian-corner::after { bottom: -4px; right: -4px; transform: rotate(180deg); }

/* ---------- Persian Frame ---------- */
.persian-frame {
  position: relative;
  padding: 2.5rem;
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
  border: 1px solid rgba(217,144,88,0.25);
  box-shadow: 0 0 0 4px rgba(217,144,88,0.06), 0 0 0 8px rgba(50,18,122,0.03);
}
.persian-frame::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(50,18,122,0.12);
  border-radius: inherit;
  pointer-events: none;
}
.persian-frame::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px dashed rgba(217,144,88,0.15);
  border-radius: inherit;
  pointer-events: none;
}

/* ---------- Hero Pattern ---------- */
.hero-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.hero-pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='0.6'%3E%3Cpolygon points='60,8 67,35 90,18 78,42 108,48 78,54 90,78 67,62 60,92 53,62 30,78 42,54 12,48 42,42 30,18 53,35'/%3E%3Ccircle cx='60' cy='48' r='10'/%3E%3Ccircle cx='60' cy='48' r='20' stroke-dasharray='4,4'/%3E%3Cpath d='M60,0 L60,8 M60,92 L60,120 M0,48 L12,48 M108,48 L120,48'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
  background-repeat: repeat;
}
.hero-pattern::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(217,144,88,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(28,57,187,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at center, transparent 20%, rgba(26,26,46,0.5) 100%);
}

/* ---------- Section Ornament ---------- */
.section-ornament {
  display: block;
  width: 120px;
  height: 24px;
  margin: 0.5rem auto 1.5rem;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='24' viewBox='0 0 120 24'%3E%3Cg fill='none'%3E%3Cline x1='0' y1='12' x2='40' y2='12' stroke='%23d99058' stroke-width='1' opacity='0.5'/%3E%3Cline x1='80' y1='12' x2='120' y2='12' stroke='%23d99058' stroke-width='1' opacity='0.5'/%3E%3Cpolygon points='60,2 68,12 60,22 52,12' fill='none' stroke='%23d99058' stroke-width='1.5'/%3E%3Cpolygon points='60,6 64,12 60,18 56,12' fill='%23d99058' opacity='0.3'/%3E%3Ccircle cx='60' cy='12' r='2' fill='%23d99058' opacity='0.7'/%3E%3Ccircle cx='42' cy='12' r='1.5' fill='%23d99058' opacity='0.4'/%3E%3Ccircle cx='78' cy='12' r='1.5' fill='%23d99058' opacity='0.4'/%3E%3Ccircle cx='46' cy='12' r='1' fill='%2332127a' opacity='0.3'/%3E%3Ccircle cx='74' cy='12' r='1' fill='%2332127a' opacity='0.3'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Decorative accent line ---------- */
.accent-line {
  display: block;
  width: 60px;
  height: 3px;
  margin: 1rem auto;
  background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
  border-radius: 2px;
}