/**
 * QuoteMaker.lk — Canva-Grade Reusable Decorative Design System
 * 100% Inline Vector SVG & CSS Elements for High-End Quotations
 * Guaranteed crisp vector output in Browser Preview, html2pdf, and Native Print
 */

:root {
  --accent-color: #2563EB;
  --accent-light: rgba(37, 99, 235, 0.07);
  --accent-subtle: rgba(37, 99, 235, 0.035);
  --accent-border: rgba(37, 99, 235, 0.22);
  --accent-dark: #1D4ED8;
  --quote-ink: #0F172A;
  --quote-slate: #475569;
  --quote-muted: #94A3B8;
  --quote-bg: #FFFFFF;
}

/* Base sheet reset to isolate decorations */
.quote-sheet {
  position: relative;
  background-color: #FFFFFF;
  color: var(--quote-ink);
  overflow: hidden;
  box-sizing: border-box;
  border: none;
}

/* Non-blocking background decoration layer */
.quote-decorations-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* Actual quotation business content layer (always sits above decorations) */
.quote-content-layer {
  position: relative;
  z-index: 1;
}

/* SVG Rendering Quality Control */
.quote-decor-svg {
  display: block;
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
  pointer-events: none;
}

/* Absolute Positioning Utilities for Components */
.decor-pos-top-right {
  position: absolute;
  top: 0;
  right: 0;
}

.decor-pos-top-left {
  position: absolute;
  top: 0;
  left: 0;
}

.decor-pos-bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
}

.decor-pos-bottom-left {
  position: absolute;
  bottom: 0;
  left: 0;
}

.decor-pos-center-right {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

/* -------------------------------------------------------------
   Component 1: Diagonal Corner Shape Styles
   ------------------------------------------------------------- */
.decor-diagonal-corner {
  line-height: 0;
}

/* -------------------------------------------------------------
   Component 2: Rounded Corner Blob Styles
   ------------------------------------------------------------- */
.decor-rounded-blob {
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

/* -------------------------------------------------------------
   Component 3 & 4: Circle Accents & Outlined Circles
   ------------------------------------------------------------- */
.decor-circle-cluster {
  position: absolute;
  pointer-events: none;
}

/* -------------------------------------------------------------
   Component 5: Dot Pattern Styles
   ------------------------------------------------------------- */
.decor-dot-pattern {
  opacity: 0.6;
}

/* -------------------------------------------------------------
   Component 6: Wave Shape Styles
   ------------------------------------------------------------- */
.decor-wave-shape {
  width: 100%;
  line-height: 0;
}

/* -------------------------------------------------------------
   Component 7: Thin Divider Line Styles
   ------------------------------------------------------------- */
.decor-thin-divider {
  width: 100%;
  margin: 14px 0;
}

/* -------------------------------------------------------------
   Component 8: Geometric Ribbon Styles
   ------------------------------------------------------------- */
.decor-ribbon-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  position: relative;
  z-index: 1;
}

/* -------------------------------------------------------------
   Component 9: Quotation Icon Styles
   ------------------------------------------------------------- */
.decor-quote-watermark {
  position: absolute;
  user-select: none;
  pointer-events: none;
  line-height: 1;
}

/* -------------------------------------------------------------
   Component 10: Abstract Background Shape Styles
   ------------------------------------------------------------- */
.decor-abstract-bg {
  position: absolute;
  pointer-events: none;
}

/* -------------------------------------------------------------
   THREE DISTINCT HEADER STYLES
   ------------------------------------------------------------- */

/* Style 1: Corporate Geometric Header */
.header-corporate-geometric {
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 12px;
}

.corp-geo-header-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.95fr;
  gap: 16px;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}

.corp-geo-meta-card {
  background: #FFFFFF;
  border: 1.5px solid var(--accent-border, #CBD5E1);
  border-left: 3.5px solid var(--accent-color, #2563EB);
  border-radius: 6px;
  padding: 9px 14px;
  position: relative;
  z-index: 5;
  text-align: left;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

/* Style 2: Modern Rounded Header */
.header-modern-rounded {
  position: relative;
  background: linear-gradient(180deg, var(--accent-subtle, #F8FAFC) 0%, rgba(255, 255, 255, 0.4) 100%);
  border: 1px solid var(--accent-border, #E2E8F0);
  border-radius: 10px;
  padding: 14px 18px 12px;
  margin-bottom: 12px;
  overflow: hidden;
}

.modern-rounded-header-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  z-index: 2;
}

.modern-pill-badge {
  display: inline-block;
  padding: 3px 10px;
  font-size: 0.70rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--accent-light, #EFF6FF);
  color: var(--accent-color, #2563EB);
  border: 1px solid var(--accent-border, #BFDBFE);
  border-radius: 9999px;
  margin-bottom: 4px;
}

/* Style 3: Creative Editorial Header */
.header-creative-editorial {
  position: relative;
  padding: 6px 0 12px 0;
  margin-bottom: 12px;
  border-bottom: 1px solid #E2E8F0;
}

.editorial-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 16px;
}

.editorial-title-wrap {
  position: relative;
  display: inline-block;
}

.editorial-main-title {
  font-family: 'Manrope', 'Plus Jakarta Sans', sans-serif;
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--quote-ink, #0F172A);
  position: relative;
  z-index: 1;
}

.editorial-accent-bar {
  width: 36px;
  height: 3px;
  background-color: var(--accent-color, #2563EB);
  border-radius: 2px;
  margin-top: 6px;
}

.editorial-meta-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 8px 14px;
  background: var(--accent-subtle, #F8FAFC);
  border-left: 3px solid var(--accent-color, #2563EB);
  border-radius: 0 6px 6px 0;
  margin-top: 8px;
}

.editorial-meta-col {
  display: flex;
  flex-direction: column;
}

.editorial-meta-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--quote-slate, #64748B);
  margin-bottom: 2px;
}

.editorial-meta-val {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--quote-ink, #0F172A);
}

/* -------------------------------------------------------------
   Header Icon Selector Tool Toolbar Controls
   ------------------------------------------------------------- */
.icon-selector-group {
  display: inline-flex;
  align-items: center;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: 7px;
  padding: 2px;
  gap: 2px;
}

.btn-header-icon {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  font-size: 0.74rem;
  font-weight: 600;
  color: #475569;
  background: transparent;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
}

.btn-header-icon svg {
  display: block;
  opacity: 0.75;
}

.btn-header-icon:hover {
  color: #0F172A;
  background: rgba(255, 255, 255, 0.6);
}

.btn-header-icon.active {
  color: var(--accent-color, #2563EB);
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-weight: 700;
}

.btn-header-icon.active svg {
  opacity: 1;
  fill: var(--accent-color, #2563EB);
}

/* Print Specific Rendering Adjustments */
@media print {
  .quote-decorations-layer {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .quote-decor-svg {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .corp-geo-meta-card,
  .header-modern-rounded,
  .editorial-meta-row {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}