/* =============================================================
   Urdu Font Pro — Front-end Stylesheet
   ============================================================= */

/* ---- CSS Custom Properties (defaults; overridden by dynamic CSS) ---- */
:root {
  --ufp-font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif;
  --ufp-font-size: 18px;
  --ufp-line-height: 2.2;
  --ufp-letter-spacing: 0px;
  --ufp-color: #1a1a1a;
  --ufp-accent: #1e6b3c;
  --ufp-quote-bg: #f8f6f2;
  --ufp-quote-border: #c8a84b;
  --ufp-button-bg: #1e6b3c;
  --ufp-button-color: #ffffff;
  --ufp-button-radius: 6px;
}

/* ---- Core Urdu Class ---- */
.urdu,
.ufp-urdu {
  font-family: var(--ufp-font-family);
  font-size: var(--ufp-font-size);
  line-height: var(--ufp-line-height);
  letter-spacing: var(--ufp-letter-spacing);
  color: var(--ufp-color);
  direction: rtl;
  text-align: right;
  unicode-bidi: embed;
  word-wrap: break-word;
  overflow-wrap: break-word;
  /* Improve Nastaliq ligature rendering */
  -webkit-font-feature-settings: "liga" 1, "calt" 1, "kern" 1;
          font-feature-settings: "liga" 1, "calt" 1, "kern" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ---- RTL / LTR helpers ---- */
.ufp-rtl  { direction: rtl; text-align: right; unicode-bidi: embed; }
.ufp-ltr  { direction: ltr; text-align: left;  unicode-bidi: embed; }
[dir="rtl"] { direction: rtl; text-align: right; }

/* ---- Font style variants ---- */
.ufp-nastaliq { font-family: "Noto Nastaliq Urdu", "Gulzar", "Jameel Noori Nastaleeq", serif !important; }
.ufp-naskh    { font-family: "Noto Naskh Arabic", "Scheherazade New", "Amiri", serif !important; }
.ufp-kufic    { font-family: "Reem Kufi", sans-serif !important; }

/* ---- Size utilities ---- */
.ufp-size-sm  { font-size: 14px !important; }
.ufp-size-md  { font-size: 18px !important; }
.ufp-size-lg  { font-size: 24px !important; }
.ufp-size-xl  { font-size: 30px !important; }
.ufp-size-xxl { font-size: 40px !important; }

/* ---- Weight / style utilities ---- */
.ufp-bold   { font-weight: 700 !important; }
.ufp-italic { font-style: italic !important; }

/* ---- Alignment utilities ---- */
.ufp-justify { text-align: justify !important; }
.ufp-center  { text-align: center !important; }

/* ---- Headings ---- */
.ufp-urdu h1, .ufp-urdu h2, .ufp-urdu h3,
.ufp-urdu h4, .ufp-urdu h5, .ufp-urdu h6,
.ufp-heading {
  font-family: var(--ufp-font-family);
  direction: rtl;
  text-align: right;
  font-weight: 700;
  line-height: 2.0;
  color: var(--ufp-color);
}

/* ---- Blockquote ---- */
.ufp-quote,
.ufp-urdu blockquote {
  background: var(--ufp-quote-bg);
  border-right: 5px solid var(--ufp-quote-border);
  border-left: none;
  padding: 1.2em 1.5em 1.2em 1em;
  margin: 1.5em 0;
  border-radius: 4px;
  font-style: italic;
  direction: rtl;
  text-align: right;
}
.ufp-quote cite,
.ufp-urdu blockquote cite {
  display: block;
  margin-top: 0.5em;
  font-size: 0.85em;
  opacity: 0.75;
  font-style: normal;
}

/* ---- Button ---- */
.ufp-button {
  display: inline-block;
  background: var(--ufp-button-bg);
  color: var(--ufp-button-color) !important;
  padding: 0.55em 1.4em;
  border-radius: var(--ufp-button-radius);
  text-decoration: none;
  font-family: var(--ufp-font-family);
  font-size: var(--ufp-font-size);
  line-height: var(--ufp-line-height);
  direction: rtl;
  transition: opacity 0.2s ease, transform 0.15s ease;
  cursor: pointer;
}
.ufp-button:hover { opacity: 0.88; transform: translateY(-1px); }

/* ---- Lists ---- */
.ufp-list,
.ufp-urdu ul,
.ufp-urdu ol {
  direction: rtl;
  text-align: right;
  padding-right: 1.6em;
  padding-left: 0;
  margin: 0.8em 0;
}
.ufp-list li,
.ufp-urdu li { margin-bottom: 0.4em; }

/* ---- Bilingual columns layout ---- */
.ufp-bilingual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}
.ufp-bilingual--reverse .ufp-col--urdu    { order: 2; }
.ufp-bilingual--reverse .ufp-col--english { order: 1; }
.ufp-col--urdu    { direction: rtl; text-align: right; }
.ufp-col--english { direction: ltr; text-align: left;  }
@media (max-width: 680px) {
  .ufp-bilingual { grid-template-columns: 1fr; }
  .ufp-bilingual--reverse .ufp-col--urdu,
  .ufp-bilingual--reverse .ufp-col--english { order: unset; }
}

/* ---- Dividers ---- */
.ufp-divider { margin: 1.5em 0; }
.ufp-divider--line  { border-top: 1px solid currentColor; opacity: 0.25; }
.ufp-divider--dots  { text-align: center; letter-spacing: 0.5em; }
.ufp-divider--dots::after  { content: "۝ ۝ ۝"; font-size: 1.2em; opacity: 0.4; }
.ufp-divider--wave::after  { content: "﴿ ۞ ﴾"; font-size: 1.3em; opacity: 0.45; text-align: center; display: block; }

/* ---- Widget ---- */
.ufp-widget-text { line-height: var(--ufp-line-height); }

/* ---- Block paragraphs / headings ---- */
.ufp-block-paragraph { margin-bottom: 1.2em; }
.ufp-block-quote { margin: 1.5em 0; }

/* ---- Inline mixed Urdu spans inside English paragraphs ---- */
p .ufp-urdu, li .ufp-urdu {
  display: inline;
  direction: rtl;
  unicode-bidi: embed;
}

/* ---- Selection highlight ---- */
.ufp-urdu ::selection { background: var(--ufp-quote-border); color: #fff; }
.ufp-urdu ::-moz-selection { background: var(--ufp-quote-border); color: #fff; }

/* ---- Accessibility: focus ring for buttons ---- */
.ufp-button:focus-visible {
  outline: 3px solid var(--ufp-accent);
  outline-offset: 2px;
}

/* ---- Reduce motion ---- */
@media (prefers-reduced-motion: reduce) {
  .ufp-button { transition: none; }
}

/* ============================================================
   Front-end Floating Toolbar
   ============================================================ */
#ufp-toolbar {
  position: fixed;
  z-index: 99999;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,.14);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  max-width: 96vw;
  flex-wrap: wrap;
  transition: opacity 0.2s;
}
#ufp-toolbar.ufp-pos-bottom-right { bottom: 20px; right: 20px; }
#ufp-toolbar.ufp-pos-bottom-left  { bottom: 20px; left:  20px; }
#ufp-toolbar.ufp-pos-top-right    { top: 20px;    right: 20px; }
#ufp-toolbar.ufp-pos-top-left     { top: 20px;    left:  20px; }
#ufp-toolbar.ufp-collapsed .ufp-toolbar-controls { display: none; }

.ufp-toolbar-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
  color: #444;
}
.ufp-toolbar-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.ufp-toolbar-controls select,
.ufp-toolbar-controls input[type="range"] { font-size: 12px; }

.ufp-toolbar-label { font-size: 11px; color: #666; white-space: nowrap; }

#ufp-toolbar-font  { max-width: 160px; padding: 3px 5px; border: 1px solid #ccc; border-radius: 4px; }
#ufp-toolbar-size  { width: 80px; }

.ufp-rtl-btn {
  background: #f4f4f4;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 3px 8px;
  cursor: pointer;
  font-size: 11px;
  white-space: nowrap;
}
.ufp-rtl-btn.active { background: #1e6b3c; color: #fff; border-color: #1e6b3c; }

#ufp-wrap-selection {
  background: #fff3e0;
  border-color: #e0a030;
  color: #8a5a00;
  font-weight: 600;
}
#ufp-wrap-selection:hover { background: #ffe6c0; }

.ufp-toolbar-hint {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 8px;
  background: #1a1a1a;
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: 6px;
  max-width: 280px;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}

.ufp-size-display { font-size: 11px; color: #555; min-width: 28px; text-align: center; }

@media (max-width: 480px) {
  #ufp-toolbar { gap: 6px; padding: 8px 10px; }
  #ufp-toolbar-font { max-width: 120px; }
}