/* ============================================================================
   RavText — Template Picker
   ----------------------------------------------------------------------------
   The "סגנון" button in the header opens a popover with style cards.
   Replaces the legacy ☀/🌙 toggle (which is hidden by JS).
   ============================================================================ */

.rt-tp-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 1px solid var(--border, #D4DCE8);
  border-radius: 6px;
  color: var(--txt, #1F2937);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  height: 32px;
  cursor: pointer;
  transition: all .15s ease;
  position: relative;
}
.rt-tp-btn:hover {
  background: var(--btn-h, rgba(0,0,0,0.04));
  border-color: var(--gold, #888);
}
.rt-tp-btn .rt-tp-swatch {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2c5aa0 0%, #185ABD 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
  flex-shrink: 0;
}
.rt-tp-btn .rt-tp-caret { font-size: 10px; color: var(--muted, #888) }

/* swatch per active template (data-tpl on the button) */
.rt-tp-btn[data-tpl="light"] .rt-tp-swatch,
.rt-tp-btn[data-tpl=""] .rt-tp-swatch {
  background: linear-gradient(135deg, #2563EB 0%, #185ABD 60%, #1E4078 100%);
}
.rt-tp-btn[data-tpl="dark"] .rt-tp-swatch {
  background: linear-gradient(135deg, #0F172A 0%, #1F2E54 100%);
  box-shadow: inset 0 0 0 1px rgba(212,175,55,0.4);
}
.rt-tp-btn[data-tpl="word-style"] .rt-tp-swatch {
  background: linear-gradient(95deg, #DC6B5C 0%, #C75D7A 60%, #8A3D67 100%);
}
.rt-tp-btn[data-tpl="judaica"] .rt-tp-swatch {
  background: linear-gradient(135deg, #0E0A06 0%, #C9A35B 100%);
}

/* ============================================================================
   POPOVER
   ============================================================================ */
.rt-tp-pop {
  position: fixed;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(15,20,25,0.06),
    0 18px 48px -16px rgba(15,20,25,0.25);
  padding: 16px;
  z-index: 9999;
  width: 620px;
  max-width: calc(100vw - 32px);
  display: none;
  flex-direction: column;
  gap: 12px;
  direction: rtl;
}
.rt-tp-pop.open { display: flex; animation: rt-tp-fade .18s ease-out }
@keyframes rt-tp-fade {
  from { opacity: 0; transform: translateY(-4px) }
  to   { opacity: 1; transform: translateY(0) }
}

.rt-tp-pop-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.rt-tp-pop-head h4 {
  margin: 0;
  font-family: "Frank Ruhl Libre", "David Libre", serif;
  font-weight: 700;
  font-size: 18px;
  color: #0F1419;
  letter-spacing: -0.005em;
}
.rt-tp-pop-head small {
  font-family: "Fraunces", "Heebo", serif;
  font-style: italic;
  font-size: 12px;
  color: #6B7280;
}

/* template card grid — 4 cards */
.rt-tp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 720px) {
  .rt-tp-grid { grid-template-columns: repeat(2, 1fr) }
}

.rt-tp-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all .15s ease;
  position: relative;
}
.rt-tp-card:hover {
  border-color: #C7CDD6;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -12px rgba(15,20,25,0.15);
}
.rt-tp-card.cur {
  border-color: #2563EB;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.18);
}
.rt-tp-card .rt-tp-preview {
  height: 96px;
  position: relative;
  overflow: hidden;
}
.rt-tp-card .rt-tp-meta {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rt-tp-card .rt-tp-name {
  font-family: "Frank Ruhl Libre", serif;
  font-weight: 700;
  font-size: 14px;
  color: #0F1419;
}
.rt-tp-card .rt-tp-desc {
  font-family: "Fraunces", "Heebo", serif;
  font-style: italic;
  font-size: 11.5px;
  color: #6B7280;
  line-height: 1.45;
}
.rt-tp-card .rt-tp-current {
  position: absolute;
  top: 8px; left: 8px;
  background: #2563EB;
  color: #fff;
  font-family: "Heebo", sans-serif;
  font-weight: 600;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  display: none;
}
.rt-tp-card.cur .rt-tp-current { display: inline-block }

/* ============================================================================
   PREVIEW THUMBNAILS
   ============================================================================ */

/* light — blue (default) */
.rt-tp-prev-light {
  background: linear-gradient(180deg, #F7F4ED, #F1EEE7);
}
.rt-tp-prev-light::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 18px;
  background: linear-gradient(180deg, #FFFFFF, #FBFAF6);
  border-bottom: 1px solid #E6E1D5;
}
.rt-tp-prev-light .rt-tp-page {
  position: absolute; top: 24px; left: 12px; right: 12px; height: 62px;
  background: #FFFFFF;
  border-radius: 4px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 4px 12px -4px rgba(15,20,25,0.12);
  background-image:
    linear-gradient(180deg, transparent 8px, #E6E1D5 8px, #E6E1D5 9px, transparent 9px),
    linear-gradient(180deg, transparent 16px, #E6E1D5 16px, #E6E1D5 17px, transparent 17px),
    linear-gradient(180deg, transparent 24px, #E6E1D5 24px, #E6E1D5 25px, transparent 25px);
}
.rt-tp-prev-light::after {
  content: ""; position: absolute; bottom: 8px; left: 12px;
  width: 28px; height: 10px; border-radius: 999px;
  background: linear-gradient(95deg, #2563EB, #185ABD, #1E4078);
}

/* dark — navy classic */
.rt-tp-prev-dark {
  background: linear-gradient(180deg, #0F172A, #15203A);
}
.rt-tp-prev-dark::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 18px;
  background: #15203A;
  border-bottom: 1px solid #1F2E54;
}
.rt-tp-prev-dark .rt-tp-page {
  position: absolute; top: 24px; left: 12px; right: 12px; height: 62px;
  background: #15203A;
  border: 1px solid #1F2E54;
  border-radius: 4px;
  background-image:
    linear-gradient(180deg, transparent 8px, #2A3D6E 8px, #2A3D6E 9px, transparent 9px),
    linear-gradient(180deg, transparent 16px, #2A3D6E 16px, #2A3D6E 17px, transparent 17px),
    linear-gradient(180deg, transparent 24px, #2A3D6E 24px, #2A3D6E 25px, transparent 25px);
}
.rt-tp-prev-dark::after {
  content: ""; position: absolute; bottom: 8px; left: 12px;
  width: 28px; height: 10px; border-radius: 999px;
  background: linear-gradient(135deg, #D4AF37 0%, #FFC130 100%);
}

/* word-style — coral on cream */
.rt-tp-prev-word {
  background: linear-gradient(180deg, #F7F4ED, #F1EEE7);
}
.rt-tp-prev-word::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 18px;
  background: linear-gradient(180deg, #FFFFFF, #FBFAF6);
  border-bottom: 1px solid #E6E1D5;
}
.rt-tp-prev-word .rt-tp-page {
  position: absolute; top: 24px; left: 12px; right: 12px; height: 62px;
  background: #FFFFFF;
  border-radius: 4px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 4px 12px -4px rgba(199,93,122,0.18);
  background-image:
    linear-gradient(180deg, transparent 8px, #E6E1D5 8px, #E6E1D5 9px, transparent 9px),
    linear-gradient(180deg, transparent 16px, #E6E1D5 16px, #E6E1D5 17px, transparent 17px),
    linear-gradient(180deg, transparent 24px, #E6E1D5 24px, #E6E1D5 25px, transparent 25px);
}
.rt-tp-prev-word::after {
  content: ""; position: absolute; bottom: 8px; left: 12px;
  width: 28px; height: 10px; border-radius: 999px;
  background: linear-gradient(95deg, #DC6B5C, #C75D7A, #8A3D67);
}

/* judaica — dark ink with vellum */
.rt-tp-prev-judaica {
  background: linear-gradient(180deg, #15100A, #1E1810);
}
.rt-tp-prev-judaica::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 16px;
  background: linear-gradient(180deg, #15100A, #1E1810);
  border-bottom: 1px solid rgba(201,163,91,0.35);
}
.rt-tp-prev-judaica .rt-tp-page {
  position: absolute; top: 22px; left: 12px; right: 12px; height: 64px;
  background: linear-gradient(180deg, #FCF7E8, #F7EFD8);
  border: 1px solid #C9B98F;
  background-image:
    linear-gradient(180deg, transparent 8px, #C9B98F 8px, #C9B98F 9px, transparent 9px),
    linear-gradient(180deg, transparent 16px, #C9B98F 16px, #C9B98F 17px, transparent 17px),
    linear-gradient(180deg, transparent 24px, #C9B98F 24px, #C9B98F 25px, transparent 25px);
}
.rt-tp-prev-judaica::after {
  content: "✦"; position: absolute; top: 0; left: 0; right: 0; text-align: center;
  font-size: 9px; color: #C9A35B; line-height: 16px;
}

/* ============================================================================
   THEME ADAPTATIONS
   ============================================================================ */

/* Picker on dark theme — adjust contrast */
body:not(.light-theme):not(.template-judaica) .rt-tp-btn {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
  color: #E2E8F0;
}
body:not(.light-theme):not(.template-judaica) .rt-tp-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.22);
}
body:not(.light-theme):not(.template-judaica) .rt-tp-pop {
  background: #15203A;
  border-color: #1F2E54;
  color: #E2E8F0;
}
body:not(.light-theme):not(.template-judaica) .rt-tp-pop-head h4 { color: #FFFFFF }
body:not(.light-theme):not(.template-judaica) .rt-tp-pop-head small { color: #94A3B8 }
body:not(.light-theme):not(.template-judaica) .rt-tp-card {
  background: #1F2E54;
  border-color: #2A3D6E;
}
body:not(.light-theme):not(.template-judaica) .rt-tp-card .rt-tp-name { color: #FFFFFF }
body:not(.light-theme):not(.template-judaica) .rt-tp-card .rt-tp-desc { color: #94A3B8 }
body:not(.light-theme):not(.template-judaica) .rt-tp-card.cur {
  border-color: #D4AF37;
  box-shadow: 0 0 0 2px rgba(212,175,55,0.18);
}
body:not(.light-theme):not(.template-judaica) .rt-tp-card.cur .rt-tp-current {
  background: #D4AF37; color: #0F172A;
}

/* Picker on Judaica template */
body.template-judaica .rt-tp-btn {
  background: rgba(255,255,255,0.04);
  border-color: rgba(201,163,91,0.22);
  color: #F7EFD8;
}
body.template-judaica .rt-tp-btn:hover {
  background: rgba(201,163,91,0.10);
  border-color: #C9A35B;
}
body.template-judaica .rt-tp-pop {
  background: linear-gradient(180deg, #FCF7E8, #F7EFD8);
  border: 1px solid #C9B98F;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.6);
}
body.template-judaica .rt-tp-pop-head h4 { color: #15100A }
body.template-judaica .rt-tp-pop-head small { color: #3A2F22 }
body.template-judaica .rt-tp-card {
  background: rgba(255,255,255,0.4);
  border-color: #C9B98F;
}
body.template-judaica .rt-tp-card.cur {
  border-color: #8E6A2A;
  box-shadow: 0 0 0 2px rgba(201,163,91,0.30);
}
body.template-judaica .rt-tp-card.cur .rt-tp-current {
  background: linear-gradient(180deg, #C9A35B, #8E6A2A);
  color: #15100A;
}

/* On Word-style — accent ring uses coral */
body.template-word-style .rt-tp-card.cur {
  border-color: #DC6B5C;
  box-shadow: 0 0 0 2px rgba(220,107,92,0.18);
}
body.template-word-style .rt-tp-card.cur .rt-tp-current {
  background: linear-gradient(95deg, #DC6B5C, #C75D7A, #8A3D67);
}