:root{
  --dhf-radius: 14px;
}
.dhf-wrap{
  background: var(--dhf-bg);
  color: var(--dhf-text);
  font-family: var(--dhf-font-ui);
  padding: 24px 10px;
}
.dhf-header{
  max-width: 1180px;
  margin: 0 auto 18px;
}
.dhf-title{
  text-align:center;
  font-size: 28px;
  font-weight: 650;
  margin: 0 0 14px;
}
.dhf-tester{
  /* match list/card width for a consistent layout */
  max-width: 1180px;
  margin: 0 auto 14px;
}
.dhf-tester-title{
  text-align:center;
  font-size: 18px;
  font-weight: 650;
  margin-bottom: 10px;
}
.dhf-input{
  width: 100%;
  border: 1px solid var(--dhf-border);
  border-radius: var(--dhf-radius);
  padding: 12px 14px;
  font-size: 16px;
  font-family: var(--dhf-font-tester);
  background: var(--dhf-tester-bg);
  color: var(--dhf-tester-text);
  -webkit-text-stroke: var(--dhf-font-outline-width) var(--dhf-font-outline-color);
  text-stroke: var(--dhf-font-outline-width) var(--dhf-font-outline-color);
  outline: none;
}
.dhf-input:focus{
  border-color: color-mix(in srgb, var(--dhf-accent) 55%, var(--dhf-border));
}
.dhf-controls{
  max-width: 1180px;
  margin: 0 auto 14px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
  justify-content: center;
}
.dhf-control-group{
  display:flex;
  gap: 8px;
  padding: 4px;
  border: 1px solid var(--dhf-border);
  border-radius: var(--dhf-radius);
  background: var(--dhf-card-bg);
}
.dhf-btn{
  appearance:none;
  border: 1px solid var(--dhf-border);
  background: var(--dhf-btn-bg);
  color: var(--dhf-btn-text);
  border-radius: var(--dhf-radius);
  padding: 8px 10px;
  display:flex;
  gap: 8px;
  align-items:center;
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease;
  font-family: var(--dhf-font-ui);
  font-size: 18px;
  line-height: 1;
}
.dhf-btn svg{ display:block; }
.dhf-btn:hover{
  background: var(--dhf-btn-hover);
}
.dhf-btn.is-active{
  border-color: color-mix(in srgb, var(--dhf-accent) 45%, var(--dhf-border));
}
.dhf-btn-text{ font-weight: 600; letter-spacing: .2px; }

/* When the library is in RTL (Dhivehi/Thaana) mode, use a Thaana-friendly font for control labels */
.dhf-wrap[data-dir="rtl"] .dhf-btn-text,
.dhf-wrap[data-dir="rtl"] .dhf-slider span,
.dhf-wrap[data-dir="rtl"] .dhf-color span{
  font-family: var(--dhf-font-label);
}

.dhf-wrap[data-dir="rtl"] .dhf-title,
.dhf-wrap[data-dir="rtl"] .dhf-tester-title,
.dhf-wrap[data-dir="rtl"] .dhf-name,
.dhf-wrap[data-dir="rtl"] .dhf-weights,
.dhf-wrap[data-dir="rtl"] .dhf-author,
.dhf-wrap[data-dir="rtl"] .dhf-action-btn{
  font-family: var(--dhf-font-label);
}

.dhf-sliders{
  display:flex;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--dhf-border);
  border-radius: var(--dhf-radius);
  background: var(--dhf-card-bg);
  align-items:center;
  flex-wrap: wrap;
}
.dhf-slider{
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: 18px;
  color: var(--dhf-muted);
  font-weight: 600;
}
.dhf-range{
  width: 140px;
}

.dhf-color-controls{
  display:flex;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--dhf-border);
  border-radius: var(--dhf-radius);
  background: var(--dhf-card-bg);
  align-items:center;
  flex-wrap: wrap;
}
.dhf-color{
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: 16px;
  color: var(--dhf-muted);
  font-weight: 600;
}
.dhf-color input[type="color"]{
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--dhf-border);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
}
.dhf-color input[type="color"]::-webkit-color-swatch-wrapper{ padding: 0; }
.dhf-color input[type="color"]::-webkit-color-swatch{ border: 0; border-radius: 999px; }
.dhf-color input[type="color"]::-moz-color-swatch{ border: 0; border-radius: 999px; }
.dhf-color .dhf-outline{
  width: 100px;
}

.dhf-list{
  max-width: 1180px;
  margin: 0 auto;
}
.dhf-item{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap: 18px;
  padding: 18px 14px;
  border: 1px solid var(--dhf-item-border, var(--dhf-border));
  border-radius: var(--dhf-radius);
  background: var(--dhf-item-bg, var(--dhf-card-bg));
  align-items:center;
  margin: 0 0 14px;
}

.dhf-item:first-child{ border: 1px solid var(--dhf-item-border, var(--dhf-border)); }
.dhf-meta{ padding-left: 4px; }
.dhf-name{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
}
.dhf-font-title{ font-size: 16px; font-weight: 700; }
.dhf-badge{
  background: var(--dhf-badge-bg);
  color: var(--dhf-badge-text);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 999px;
  letter-spacing: .4px;
}
.dhf-weights{ color: var(--dhf-muted); margin-top: 4px; font-size: 13px; }
.dhf-author{ color: var(--dhf-muted); margin-top: 4px; font-size: 13px; }
.dhf-actions{ margin-top: 12px; display:flex; gap: 10px; flex-wrap:wrap; }
.dhf-action-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 92px;
  padding: 10px 14px;
  background: var(--dhf-btn-bg);
  color: var(--dhf-btn-text);
  border: 1px solid var(--dhf-border);
  border-radius: var(--dhf-radius);
  text-decoration:none;
  font-weight: 650;
  font-size: 13px;
  transition: background .15s ease;
}
.dhf-action-btn:hover{
  background: var(--dhf-btn-hover);
}
.dhf-preview{
  color: var(--dhf-preview-text, var(--dhf-tester-text));
  -webkit-text-stroke: var(--dhf-font-outline-width) var(--dhf-font-outline-color);
  text-stroke: var(--dhf-font-outline-width) var(--dhf-font-outline-color);
  font-size: var(--dhf-default-font-size, 25px);
  line-height: var(--dhf-default-line-height, 48px);
  letter-spacing: var(--dhf-default-letter-spacing, 0px);
  padding-right: 8px;
}

/* Safe defaults (before JS initializes) */
.dhf-wrap[data-dir="rtl"] .dhf-preview,
.dhf-wrap[data-dir="rtl"] .dhf-input{
  direction: rtl;
  text-align: right;
}
.dhf-wrap[data-dir="ltr"] .dhf-preview,
.dhf-wrap[data-dir="ltr"] .dhf-input{
  direction: ltr;
  text-align: left;
}

.dhf-list[data-layout="grid"]{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.dhf-list[data-layout="grid"] .dhf-item{
  grid-template-columns: 1fr;
  border: 1px solid var(--dhf-item-border, var(--dhf-border));
  border-radius: var(--dhf-radius);
  padding: 16px;
}
.dhf-list[data-layout="grid"] .dhf-preview{
  color: var(--dhf-preview-text, var(--dhf-tester-text));
  -webkit-text-stroke: var(--dhf-font-outline-width) var(--dhf-font-outline-color);
  text-stroke: var(--dhf-font-outline-width) var(--dhf-font-outline-color);
  padding: 10px 6px 0;
  border-top: 1px solid var(--dhf-item-border, var(--dhf-border));
}
.dhf-list[data-layout="grid"] .dhf-meta{ padding: 0; }

@media (max-width: 980px){
  .dhf-item{ grid-template-columns: 1fr; }
  .dhf-list[data-layout="grid"]{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .dhf-range{ width: 120px; }
  .dhf-list[data-layout="grid"]{ grid-template-columns: 1fr; }
}

.dhf-single{ max-width: 980px; margin: 0 auto; }
.dhf-single-head{ text-align:center; margin-bottom: 14px; }
.dhf-single-title{ font-family: var(--dhf-font-ui); font-size: 34px; margin: 0; }
.dhf-single-sub{ color: var(--dhf-muted); font-weight: 600; font-size: 14px; margin-top: 6px; }
.dhf-single-preview{ border:1px solid var(--dhf-border); border-radius:16px; padding: 18px; background: var(--dhf-card-bg); margin-top: 14px; }
.dhf-single-content{ margin-top: 18px; font-family: var(--dhf-font-ui); }



/* === Card Layout Swap: Info LEFT, Preview RIGHT (force LTR layout, keep RTL preview) === */
.dhf-item{ direction:ltr; }
.dhf-meta{
  text-align:left;
  font-family: Arial, Helvetica, sans-serif;
}
.dhf-meta *{
  font-family: Arial, Helvetica, sans-serif;
}
.dhf-preview{
  direction: rtl;
  text-align: right;
}


/* === Mobile card order + RTL alignment fix (mobile only) === */
@media (max-width: 640px){
  /* Put preview on top, meta (name/author/weight/buttons) under it */
  .dhf-item{
    display: grid;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "preview"
      "meta";
  }
  .dhf-preview{ grid-area: preview; }
  .dhf-meta{ grid-area: meta; }

  /* RTL + right align for name/author/weight on mobile only */
  .dhf-meta{
    direction: rtl !important;
    text-align: right !important;
  }
  .dhf-name{ justify-content: flex-end; }
  .dhf-font-title{ display:block; text-align:right !important; }
  .dhf-weights, .dhf-author{ text-align:right !important; }


  /* Stronger title row alignment: make the row full-width so justify-content works */
  .dhf-name{
    width: 100% !important;
    justify-content: flex-end !important;
    text-align: right !important;
  }
  .dhf-font-title{
    display: inline-block !important;
    text-align: right !important;
  }

  /* Buttons under meta, aligned to the right, full width if needed */
  .dhf-actions{ justify-content: flex-end; }
  .dhf-action-btn{ width: 100%; justify-content: center; }
}