/* ===========================================
   SEPARATOR/DIVIDER COMPONENT
   Horizontal rule variants
   =========================================== */

.block-separator {
  border: none;
  margin: 20px 0;
}

/* Thin line - default */
.block-separator-thin {
  border-top: 1px solid #e0e0e0;
}

/* Medium line */
.block-separator-medium {
  border-top: 2px solid #ddd;
}

/* Thick line */
.block-separator-thick {
  border-top: 3px solid #ccc;
}

/* Dashed */
.block-separator-dashed {
  border-top: 1px dashed #ccc;
}

/* Dotted */
.block-separator-dotted {
  border-top: 2px dotted #ddd;
}

/* Gradient fade */
.block-separator-fade,
.block-separator-gradient {
  height: 1px;
  background: linear-gradient(to right, transparent, #ddd 20%, #ddd 80%, transparent);
}

/* Double line */
.block-separator-double {
  border-top: 3px double #ddd;
}

/* Spacer only (no visible line) */
.block-separator-space {
  height: 60px;
}

/* Centered short line */
.block-separator-short {
  width: 60px;
  margin-left: auto;
  margin-right: auto;
  border-top: 2px solid #333;
}

/* Margin variants */
.block-separator.sep-margin-sm { margin: 20px 0; }
.block-separator.sep-margin-md { margin: 40px 0; }
.block-separator.sep-margin-lg { margin: 60px 0; }
.block-separator.sep-margin-xl { margin: 80px 0; }