/* Typography and Content Styles */
@import url('style.css');


/* Css for page.php */
.page-container {
  padding: 15px;
}

/* ===============================
   ✨ Content Body Typography
   Generic styles for post content
   =============================== */

/* Change placeholder color */
.conTnt ::placeholder {
  color: var(--text-muted);
  opacity: 1;
  /* For Firefox */
}

.conTnt blockquote,
.conTnt dd,
.conTnt dl,
.conTnt dt,
.conTnt fieldset,
.conTnt figure,
.conTnt h1,
.conTnt h2,
.conTnt h3,
.conTnt h4,
.conTnt h5,
.conTnt h6,
.conTnt hr,
.conTnt iframe,
.conTnt legend,
.conTnt li,
.conTnt ol,
.conTnt p,
.conTnt pre,
.conTnt textarea,
.conTnt ul {
  margin: 0;
  padding: 0;
  border: 0;
}

.conTnt p {
  margin: 16px 0;
  color: var(--text-primary);
}

.conTnt h1,
.conTnt h2,
.conTnt h3,
.conTnt h4,
.conTnt h5,
.conTnt h6 {
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
}

.conTnt h1 {
  font-size: 42px;
  margin-bottom: 20px;
  line-height: 1.2em;
  font-weight: 400;
  text-transform: none;
}

.conTnt h2 {
  font-size: 35px;
  margin-bottom: 20px;
  line-height: 1.2em;
  font-weight: 400;
  text-transform: none;
}

.conTnt h3 {
  font-size: 29px;
  margin-bottom: 20px;
  line-height: 1.2em;
  font-weight: 400;
  text-transform: none;
}

.conTnt h4 {
  font-size: 24px;
}

.conTnt h5 {
  font-size: 20px;
}

.conTnt ul,
.conTnt ol {
  margin: 16px;
  padding-left: 30px;
}

.conTnt li {
  margin-bottom: 8px;
  font-size: 16px;
  color: var(--text-primary);
}

.conTnt a {
  color: var(--primary-color);
  text-decoration: underline;
  transition: all 0.2s ease;
}

.conTnt a:hover {
  color: var(--primary-hover);
}

.conTnt blockquote {
  border-left: 4px solid var(--primary-color);
  padding: 16px 20px;
  margin: 15px 0;
  font-style: italic;
  color: var(--text-primary);
  background: var(--bg-secondary);
  font-size: 14px;
  position: relative;
  border-radius: 0 8px 8px 0;
}

.conTnt blockquote:before {
  content: "\201C";
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 4em;
  font-family: Georgia, serif;
  color: var(--primary-color);
  line-height: 1;
  opacity: .4;
}

.conTnt blockquote p {
  margin: 0;
}

.conTnt blockquote cite {
  display: block;
  margin-top: 15px;
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
  font-style: normal;
}

.conTnt blockquote cite:before {
  content: "— ";
}

.conTnt hr {
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border-color), transparent);
  margin: 30px 0;
}

.conTnt code {
  font-family: var(--fontB, 'Consolas', 'Monaco', 'Courier New', monospace);
  background-color: var(--bg-secondary);
  color: #1D9BF0;
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 0.9em;
}

.conTnt pre {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 15px;
  margin: 20px 0;
  overflow-x: auto;
  display: block;
}

.conTnt pre code {
  background: none;
  padding: 0;
  color: var(--text-primary);
  white-space: pre;
  font-size: 13px;
}

.conTnt table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 16px;
  table-layout: auto;
}

/* Specific layout for editor to handle UI overlays correctly */
.custom-text-editor-content table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 16px;
  table-layout: fixed;
}

.conTnt table th,
.conTnt table td,
.custom-text-editor-content table th,
.custom-text-editor-content table td {
  padding: 12px 15px;
  border: 1px solid var(--border-color);
  min-width: 150px;
  position: relative;
  text-align: center;
}

/* Responsive table wrapper */
.conTnt .table-wrapper,
.custom-text-editor-content .table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 20px 0;
}

.conTnt table th,
.custom-text-editor-content table th {
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

/* Global Typography Rules */

button,
input,
optgroup,
select,
textarea {
  font-family: var(--fontB);
}

html {
  scrollbar-gutter: stable;
  /* Reserve space globally to prevent layout jumps */
}

/* Global scrollbar styling */
::-webkit-scrollbar {
  width: 4px;
  /* Slightly wider for better visibility */
  height: 4px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb, #ccc);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover, #999);
  cursor: pointer;
}

/* Utility classes */
.text-decoration-none {
  text-decoration: none;
}

/* Placeholder image styles for posts */
.placeholder-image {
  width: 100%;
  height: 100%;
  background-color: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

.placeholder-image-two {
  width: 100%;
  height: 100%;
  background-color: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
}

.placeholder-image-two svg,
.post-featured-image-placeholder svg {
  width: 45px;
  height: 45px;
  stroke: var(--text-primary);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .1;
}

.placeholder-image svg {
  width: 30px;
  height: 30px;
  stroke: var(--text-primary);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .1;
}

/* ===============================
   Section Title Utility Class (secTtl)
   =============================== */
.secTtl {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: var(--text-primary);
  font-weight: 500;
  margin: 0 0 16px 0;
}

.secTtl::after {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background-color: var(--border-color);
  margin-left: 12px;
}

select {
  appearance: none;

  @supports (appearance: base-select) {

    &,
    &::picker(select) {
      appearance: base-select;
      /* no animation */
    }
  }
}

/* UA that supports base-select picker APIs */
@supports (appearance: base-select) {

  select {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--text-secondary);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    position: relative;
    /* for pseudo fallback */
  }

  select img {
    width: 30px;
    line-height: 1;
  }

  /* picker icon (color follows var) */
  select::picker-icon {
    content: "";
    width: 18px;
    height: 18px;
    background-color: var(--text-secondary);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80A8 8 0 0 1 53.66 90.34L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E") center / contain no-repeat;
    /* keep only transform transition for icon rotation */
    transition: transform 0.18s ease;
    transform-origin: center;
  }

  /* rotate icon when open (icon only) */
  select:open::picker-icon {
    transform: rotate(180deg);
  }

  /* -----------------------------
     IMPORTANT: Remove transitions for picker panel so options hide instantly
     ----------------------------- */
  select::picker(select) {
    padding: 0;
    margin-top: 5px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    border-radius: 12px;
    box-shadow: var(--box-shadow);
  }

  /* Option styles (no transitions) */
  select option {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-weight: var(--font-weight-normal);
    font-size: 14px;
  }

  /* Keep simple hover visual but no animated transition */
  select option:where(:hover, :focus, :active) {
    background: var(--bg-secondary);
    color: var(--text-primary);
  }

  select option:checked,
  select option[selected] {
    background: var(--bg-secondary);
    color: var(--text-primary);
  }

  /* hide native checkmark if UA supports it */
  select option::checkmark {
    display: none;
  }

  select selectedcontent {
    display: flex;
    align-items: center;
    gap: 10px;
  }


}

/* Global Material Design Checkbox - Enhanced UI */
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: transparent;
  flex-shrink: 0;
  vertical-align: middle;
}

input[type="checkbox"]:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  transform: scale(1.05);
}

input[type="checkbox"]:checked::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--primary-color);
  border-radius: 12px;
  opacity: 0.15;
  transform: scale(1.5);
  animation: checkbox-ripple 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 6px;
  width: 4px;
  height: 10px;
  border: solid white;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0);
  animation: checkbox-check 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
}

input[type="checkbox"]:hover {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(16, 131, 252, 0.1);
}

input[type="checkbox"]:active {
  transform: scale(0.95);
}

input[type="checkbox"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(16, 131, 252, 0.1);
}

input[type="checkbox"]:focus:not(:focus-visible) {
  box-shadow: none;
}

input[type="checkbox"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  border-color: var(--border-color);
}

input[type="checkbox"]:disabled:hover {
  border-color: var(--border-color);
  box-shadow: none;
}

/* Checkbox animations */
@keyframes checkbox-check {
  0% {
    transform: rotate(45deg) scale(0);
    opacity: 0;
  }

  50% {
    transform: rotate(45deg) scale(1.2);
    opacity: 1;
  }

  100% {
    transform: rotate(45deg) scale(1);
    opacity: 1;
  }
}

@keyframes checkbox-ripple {
  0% {
    transform: scale(1);
    opacity: 0.15;
  }

  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

/* Utility classes */

/* ===========================================
   BUTTON SYSTEM - Reusable Button Classes
   =========================================== */

/* Button Group */
.button-group {
  display: flex;
  gap: 12px;
  justify-content: flex-start;
}

/* Base Button Styles */
.btn-primary,
.btn-secondary,
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: var(--font-weight-normal);
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}

/* Primary Button - Filled style */
.btn-primary {
  background-color: var(--primary-color);
  color: #ffffff;
  border-color: var(--primary-color);
}

.btn-primary:hover {
  transform: translateY(-1px);
  background: var(--text-primary);
  color: var(--bg-primary);
  border-color: var(--text-primary);
}

.btn-primary:active {
  transform: scale(0.98);
}

.btn-primary:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.25);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  pointer-events: none;
  border-color: transparent;
}

/* Secondary Button - Outline style */
.btn-secondary {
  background-color: transparent;
  color: var(--text-primary);
  border-color: var(--text-primary);
}

.btn-secondary:hover {
  border-color: var(--primary-hover);
  color: var(--primary-hover);
  transform: translateY(-1px);
}

.btn-secondary:active {
  background-color: rgba(var(--primary-color-rgb), 0.15);
  transform: scale(0.98);
}

.btn-secondary:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.15);
}

.btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

/* Danger Button - Destructive actions */
.btn-danger {
  background-color: #dc3545;
  color: #fff;
  border-color: #dc3545;
}

.btn-danger:hover {
  background-color: #bb2d3b;
  border-color: #b02a37;
  transform: translateY(-1px);
}

.btn-danger:active {
  transform: scale(0.98);
}

.btn-danger:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
}

.btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

/* Button Radius Variants */
.btn-radius {
  border-radius: 50px;
}

.btn-radius-4 {
  border-radius: 50px;
}

/* Button Size Variants */
.btn-sm {
  padding: 6px 14px;
  font-size: 12px;
}

.btn-lg {
  padding: 10px 14px;
}

.btn-padding-two {
  padding: 8px 12px;
}

.btn-padding-three {
  padding: 8px 16px;
}

/* Tertiary/Text button variant */
.btn-text {
  background-color: transparent;
  color: var(--primary-color);
  box-shadow: none;
  padding: 8px 16px;
  border: none;
  border-radius: 50px;
}

.btn-text:hover {
  background-color: rgba(var(--primary-color-rgb), 0.08);
  box-shadow: none;
}

.btn-text:active {
  background-color: rgba(var(--primary-color-rgb), 0.15);
}

.btn-text:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-text-danger {
  color: #ef4444;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  font-size: 15px;
}

/* Button Icon Support */
.btn-primary svg,
.btn-secondary svg,
.btn-text svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn-sm svg {
  width: 16px;
  height: 16px;
}

.btn-lg svg {
  width: 20px;
  height: 20px;
}

/* Icon buttons - circular */
.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50px;
  gap: 0;
}

.btn-icon.btn-sm {
  width: 32px;
  height: 32px;
}

.btn-icon.btn-lg {
  width: 48px;
  height: 48px;
}

/* Action Buttons - for tables/cards (edit, view, delete) */
.action-btn {
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 12px;
  gap: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
  font-weight: var(--font-weight-medium);
  line-height: 1.3125;
  border: none;
  cursor: pointer;
}

.action-btn-edit {
  background-color: rgba(16, 131, 252, 0.15);
  color: #1083fc;
}

.action-btn-edit:hover {
  background-color: rgba(16, 131, 252, 0.25);
}

.action-btn-view {
  background-color: rgba(108, 117, 125, 0.15);
  color: #6c757d;
}

.action-btn-view:hover {
  background-color: rgba(108, 117, 125, 0.25);
}

.action-btn-delete {
  background-color: rgba(220, 53, 69, 0.15);
  color: #dc3545;
}

.action-btn-delete:hover {
  background-color: rgba(220, 53, 69, 0.25);
}

.action-btn svg {
  width: 16px;
  height: 16px;
}

/* Full-width action button */
.action-btn-full {
  width: 100%;
}

/* ==========================
   FORM ELEMENTS
   ========================== */

/* Form Layout */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 15px;
}

.form-grid.full-width {
  grid-template-columns: 1fr;
}

.form-group {
  margin-bottom: 16px;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

/* Form Labels */
.form-label {
  font-size: 13px;
  font-weight: var(--font-weight-normal);
  color: var(--text-primary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.3125;
}

.form-label svg {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
}

.form-label .text-danger {
  color: #ef4444;
}

/* Form Controls - Inputs & Textareas */
.form-control,
.form-select {
  background-color: var(--bg-secondary);
  border: 1px solid transparent;
  color: var(--text-primary);
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  line-height: 1.3125;
  transition: all 0.2s ease;
}

.form-control::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}

.form-control:hover {
  background-color: var(--bg-primary);
  border-color: var(--border-color);
}

.form-control:focus {
  outline: none;
  background-color: var(--bg-primary);
  border-color: var(--primary-color);
}

/* Textareas */
textarea.form-control {
  min-height: 120px;
  resize: vertical;
  line-height: 1.5;
}

/* Disabled State */
.form-control:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--bg-secondary);
}



/* ===========================================
   SKELETON LOADING SYSTEM
   =========================================== */

.skeleton {
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}

.skeleton-shimmer {
  background: var(--bg-tertiary);
}

.skeleton-line {
  height: 12px;
  background: var(--bg-tertiary);
  border-radius: 12px;
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
}

.skeleton-line::after {
  display: none;
}

.skeleton-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  position: relative;
  overflow: hidden;
}

.skeleton-avatar::after {
  display: none;
}

.skeleton-rect {
  width: 100%;
  height: 100%;
  background: var(--bg-tertiary);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.skeleton-rect::after {
  display: none;
}

.skeleton-icon {
  width: 20px;
  height: 20px;
  border-radius: 12px;
  background: var(--bg-tertiary);
  position: relative;
  overflow: hidden;
}

.skeleton-icon::after {
  display: none;
}

/* Specific Skeleton Adaptations */
.post-item.skeleton .post-body {
  padding-top: 8px;
}

.post-item.skeleton .skeleton-avatar {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.post-item.skeleton .publisher-info {
  display: flex !important;
  align-items: center;
  gap: 8px;
}

.post-item.skeleton .title-line {
  height: 18px;
  margin-top: 10px;
}

.post-item.skeleton .post-image {
  width: 85px;
  height: 85px;
  flex-shrink: 0;
  border-radius: 12px;
}

.post-item.skeleton .post-actions {
  gap: 8px;
}

.post-item.skeleton .skeleton-icon {
  width: 24px;
  height: 24px;
}



/* Spinner Loading */
.loading-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid var(--bg-tertiary);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: spinner-rotate 0.8s linear infinite;
  margin: 0 auto;
}

@keyframes spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

/* Ad System Disabled */

/* Home SEO Section Styling */
.home-seo-extra {
  border: 1px solid var(--border-color);
  padding: 15px !important;
  border-radius: 12px;
  margin-top: 30px;
  background-color: var(--bg-primary);
}

.seo-title {
  margin-top: 0;
  font-size: 22px;
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin-bottom: 12px;
}

.seo-paragraph {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: 15px;
}

.home-faq-section {
  margin-top: 15px;
  border-top: 1px solid var(--border-color);
}

.faq-main-title {
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  margin-bottom: 15px;
  color: var(--text-primary);
  margin-top: 15px;
}



/* ===============================
   Special Links Box
   =============================== */

:root {
  --stepPurple: #1976d2;
}

.conTnt .specMn {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin: 16px 0;
  overflow-x: auto;
}

.conTnt .specMn:first-child {
  margin-top: 0;
}

.conTnt .specMn:last-child {
  margin-bottom: 0;
}

.conTnt .specMn h1,
.conTnt .specMn h2,
.conTnt .specMn h3 {
  background: var(--primary-color);
  color: #ffffff;
  margin: 0 !important;
  padding: 8px 16px;
  text-align: center;
  font-weight: 600;
}

.conTnt .specMn h1 {
  font-size: 20px;
}

.conTnt .specMn h2 {
  font-size: 18px;
}

.conTnt .specMn h3 {
  font-size: 16px;
}

.conTnt .specMn p {
  padding: 0 16px;
}

/* List layout inside specLinks (using divs) */
.conTnt .linkList {
  display: flex;
  flex-direction: column;
}

.conTnt .linkRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid #d4c983;
  text-align: left;
  gap: 10px;
  background: #fdf09e;
  color: #08102b;
}

.conTnt .linkRow:last-child {
  border-bottom: none;
}

/* Button-like styling for anchor tags inside specLinks */
.conTnt .linkRow a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--stepPurple);
  color: #ffffff;
  font-size: 14px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.2s ease;
  white-space: nowrap;
  border: 0;
}

.conTnt .linkRow a::after {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23ffffff'%3E%3Cpath d='M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.conTnt .linkRow a:hover {
  opacity: .9;
  transition: opacity .1s ease;
}

/* ===============================
   Special Bullet List Box
   =============================== */

.conTnt .specBullet {
  list-style: none;
  padding: 15px 20px;
  margin: 0;
}

.conTnt .specBullet li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 10px;
  color: var(--text-primary);
}

.conTnt .specBullet li:last-child {
  margin-bottom: 0;
}

.conTnt .specBullet li::before {
  content: "\2022";
  font-weight: 600;
  font-size: 20px;
  position: absolute;
  left: 0;
}

/* ===============================
   Special Vacancy Table Box (vacTbl)
   =============================== */

/* Sub-heading inside the table wrapper (e.g. For Female Candidates) */
.conTnt .subHead {
  margin: 0px;
  text-align: center;
  color: #127a5b;
  font-weight: 600;
  font-size: 16px;
  padding: 10px !important;
  background: #e4fbeb;
  opacity: 1;
}

/* If subHead is used inside a table cell */
.conTnt td.subHead,
.conTnt th.subHead {
  color: #ef4444;
  font-size: 18px;
  background: rgba(239, 68, 68, .09);
  border-left: none;
  border-right: none;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.conTnt .specMn table.data-table {
  margin: 0;
}

/* ===============================
   Special Note Box (notBox)
   =============================== */
.conTnt .notBox {
  background: #dbeafe !important;
  padding: 10px 16px !important;
  color: #1e3a8a !important;
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  opacity: 1;
}

/* ===============================
   Special Fee / Options Box
   =============================== */

.conTnt .fee-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(48%, 1fr));
  gap: 16px;
  padding: 16px;
}

.conTnt .fee-card {
  flex: 1;
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 16px;
  color: var(--text-primary);
}

.conTnt .fee-title {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
  font-weight: 500;
}

.conTnt .fee-amount {
  display: block;
  font-size: 20px;
  font-weight: 600;
}



/* ===============================
   Special Numbered List Box (specNum)
   =============================== */

.conTnt .specNum {
  padding: 16px 16px 16px 32px;
  margin: 0;
  background: var(--bg-primary);
}

.conTnt .specNum li {
  margin-bottom: 12px;
  padding-left: 5px;
  line-height: 1.6;
  color: var(--text-primary);
  font-size: 16px;
}

.conTnt .specNum li::marker {
  color: #f97316;
  font-weight: 600;
}

.conTnt .specNum li:last-child {
  margin-bottom: 0;
}

/* ===============================
   Special Step/Process Box (specStep)
   =============================== */

.conTnt .specStep {
  list-style: none;
  /* Hide default numbers */
  counter-reset: step-counter;
  /* Initialize counter */
  padding: 0;
  margin: 0;
  background: var(--bg-primary);
}

.conTnt .specStep li {
  counter-increment: step-counter;
  position: relative;
  padding: 16px 16px 16px 60px;
  border-bottom: 1px solid var(--border-color);
  font-weight: 600;
  color: var(--text-primary);
  font-size: 16px;
  background: var(--bg-primary);
  margin: 0;
  /* Faint purple line on extreme left */
}

.conTnt .specStep li:last-child {
  border-bottom: none;
}

.conTnt .specStep li::before {
  content: counter(step-counter) ".";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: transparent;
  color: var(--stepPurple);
  border: 1px solid var(--stepPurple);
  border-radius: 50%;
  text-align: center;
  line-height: 26px;
  font-size: 14px;
  font-weight: 400;
  transition: all 0.3s ease;
}

.conTnt .specStep li:hover::before {
  color: #fff;
  background: var(--stepPurple);
}

.conTnt .mYellow {
  background: #fef9c3 !important;
  color: #854d0e !important;
}

.conTnt .notBox.alert,
.conTnt .mRed {
  background: #fbe4ea !important;
  color: #9c0715 !important;
}

/* ===============================
   FAQ Section Styling
   =============================== */
.specMn details {
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color-light);
  overflow: hidden;
}

.specMn details:last-child {
  margin-bottom: 0;
}

.specMn summary {
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
  /* Hide default triangle */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color 0.2s ease;
  gap: 10px;
}

.specMn summary::-webkit-details-marker {
  display: none;
}

.specMn summary::after {
  content: "+";
  font-size: 24px;
  line-height: 1;
  color: var(--text-primary);
  transition: transform 0.3s ease;
  font-weight: 400;
}

.specMn details[open] summary::after {
  content: "−";
  transform: rotate(180deg);
}

.specMn details[open] summary {
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color-light);
}

.specMn details>p,
.specMn details>div,
.specMn details>ul,
.specMn details>ol {
  padding: 14px 16px !important;
  margin: 0;
  font-size: 15px;
  color: var(--text-content);
  line-height: 1.6;
}


/* ==========================================================================
   Responsive Media Queries
   ========================================================================== */

/* 2. Tablet Landscape / Small Laptop */
@media (max-width: 1024px) {
  .conTnt table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* 3. Tablet */
@media (max-width: 768px) {

  /* Content & Headings */
  p,
  .conTnt,
  .conTnt p {
    font-size: 15px;
  }

  .conTnt h1 {
    font-size: 1.4rem;
  }

  .conTnt h2 {
    font-size: 1.2rem;
  }

  .conTnt h3 {
    font-size: 1.2rem;
  }

  .conTnt h4 {
    font-size: 1rem;
  }

  .conTnt h5 {
    font-size: .8rem;
  }

  .conTnt h6 {
    font-size: .6rem;
  }

  /* Forms & Buttons */
  select::picker(select) {
    margin-bottom: 5px;
  }

  .form-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .panel-content-actions .btn-content {
    font-size: 12px;
  }

  .btn-primary,
  .btn-secondary {
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    padding: 8px 12px;
  }

  /* Post Skeleton Loader */
  .post-item.skeleton .post-image {
    width: 75px;
    height: 75px;
  }

  .post-item.skeleton .title-line {
    height: 16px;
    margin-top: 8px;
  }

  .post-item.skeleton .skeleton-avatar {
    width: 18px;
    height: 18px;
    margin-right: 8px;
  }

  .post-item.skeleton .skeleton-icon {
    width: 20px;
    height: 20px;
  }

  .post-item.skeleton .post-actions {
    padding-right: 15px;
  }

  /* Home SEO Box */
  .home-seo-extra {
    border: 0;
    border-radius: 12px;
    border-top: 1px solid var(--border-color);
  }
}

/* 4. Mobile */
@media (max-width: 480px) {

  .conTnt p,
  .conTnt h1,
  .conTnt h2,
  .conTnt h3,
  .conTnt h4,
  .conTnt h5,
  .conTnt h6,
  .conTnt>strong,
  .conTnt>b,
  .conTnt blockquote,
  .conTnt pre {
    margin: 16px;
  }

  .conTnt>strong,
  .conTnt>b {
    display: block;
  }

  .conTnt>a {
    display: inline-block;
    margin: 8px 16px;
  }

  .conTnt .specMn p {
    padding: 0;
  }

  .conTnt .specMn {
    border: none !important;
    border-radius: 0 !important;
  }

  .conTnt .specMn h1,
  .conTnt .specMn h2,
  .conTnt .specMn h3,
  .conTnt .specMn h4,
  .conTnt .specMn h5,
  .conTnt .specMn h6,
  .conTnt .subHead {
    text-align: left !important;
    margin: 0 !important;
  }

  .conTnt .fee-cards {
    grid-template-columns: 1fr;
    padding: 15px;
    gap: 12px;
  }


  .conTnt h1 {
    font-size: 1.25rem;
  }

  .conTnt h2 {
    font-size: 1.1rem;
  }

  .conTnt h3 {
    font-size: 1.05rem;
  }

  .specMn summary {
    padding: 12px 14px;
    font-size: 15px;
  }

  .specMn details>p,
  .specMn details>div,
  .specMn details>ul,
  .specMn details>ol {
    padding: 12px 14px;
    font-size: 14px;
  }
}

/* 5. Very Small Mobile */
@media (max-width: 360px) {
  .conTnt h1 {
    font-size: 1.15rem;
  }

  .conTnt h2 {
    font-size: 1rem;
  }

  .conTnt .specStep li {
    padding: 12px 12px 12px 44px;
    font-size: 14px;
  }

  .conTnt .specNum {
    padding: 12px 12px 12px 26px;
  }

  .btn-primary,
  .btn-secondary {
    padding: 6px 10px;
    font-size: 11.5px;
  }
}