/* =========================
   SERVICES PAGE
   ========================= */

    /* Make sections consistent with your global spacing */
    .services-page-hero {
        padding-top: 100px;
        padding-bottom: 70px;
    }

    /* Service cards */
    .service-card {
        background: #fff;
        border-radius: 12px;
        padding: 26px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
        height: 100%;
        border: 1px solid rgba(0, 0, 0, 0.05);
        transition: 0.25s;
    }

    .service-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    }

    .service-icon img {
        width: 56px;
        height: 56px;
        object-fit: contain;
        border-radius: 12px;
        margin-bottom: 14px;
    }

    .service-title {
        font-weight: 800;
        margin-bottom: 10px;
    }

    .service-features {
        margin: 14px 0 0;
        padding-left: 0;
        list-style: none;
        display: grid;
        gap: 8px;
    }

    .service-features li::before {
        content: "✔";
        margin-right: 8px;
        color: #2f80ed;
    }

    /* How it works */
    .works-section {
        padding: 90px 0;
        background: #0f172a;
    }

    .works-section .section-title,
    .works-section .section-title .title,
    .works-section .section-title p,
    .works-section .sub-title {
        color: rgba(255, 255, 255, 0.9);
    }

    .work-step {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.10);
        border-radius: 12px;
        padding: 26px;
        height: 100%;
    }

    .step-number {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border-radius: 12px;
        font-weight: 900;
        color: #fff;
        background: linear-gradient(135deg, rgba(47, 128, 237, 1), rgba(167, 119, 227, 1));
        margin-bottom: 12px;
    }

    .work-title {
        color: #fff;
        font-weight: 900;
    }

    /* Benefits */
    .benefits-section {
        padding-top: 100px;
        padding-bottom: 70px;
    }

    .benefit-card {
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: 12px;
        padding: 22px;
        height: 100%;
        box-shadow: 0 5px 18px rgba(0, 0, 0, 0.04);
    }

    .benefit-title {
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 900;
        margin-bottom: 10px;
    }

    .benefit-title img {
        width: 26px;
        height: 26px;
        object-fit: contain;
    }

    /* CTA */
    .cta-gradient {
        padding: 80px 0;
        background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
    }

    .cta-title {
        color: #fff;
        margin-bottom: 14px;
        font-weight: 900;
    }

    .cta-text {
        color: rgba(255, 255, 255, 0.9);
        max-width: 600px;
        margin: 0;
    }

    .btn-cta {
        background: #fff !important;
        color: #6e8efb !important;
        font-weight: 800;
        border-radius: 10px;
        padding: 12px 18px;
    }
    

/* =========================================================
   API DOCUMENTATION (documentation.php)
   Place in: assets/css/custom.css
   ========================================================= */

/* Make Docs page spacing like Services (not stuck to topbar) */
.api-docs {
  padding-top: 140px !important;
  padding-bottom: 90px !important;
  background: var(--tg-section-background);
}

@media (max-width: 991px) {
  .api-docs {
    padding-top: 110px !important;
  }
}

/* Card wrapper */
.docs-content {
  background: #0f1220;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 40px;
  border-radius: 14px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.50);
}

/* Mobile padding */
@media (max-width: 767px) {
  .docs-content {
    padding: 20px;
  }
}

/* Headings */
.docs-content h1,
.docs-content h2,
.docs-content h3,
.docs-content h4 {
  margin-top: 30px;
  margin-bottom: 18px;
  color: rgba(255, 255, 255, 0.92);
}

.docs-content h1 {
  margin-top: 0;
  font-size: 44px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.5px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

@media (max-width: 991px) {
  .docs-content h1 {
    font-size: 32px;
  }
}

/* Accent headings */
.docs-content h2 {
  font-size: 26px;
  font-weight: 900;
  color: var(--tg-primary-color);
}

.docs-content h3 {
  font-size: 20px;
  font-weight: 800;
}

.docs-content h4 {
  font-size: 16px;
  font-weight: 800;
}

/* Text */
.docs-content p,
.docs-content li {
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.8;
}

/* Links */
.docs-content a {
  color: var(--tg-secondary-color);
  font-weight: 600;
  text-decoration: none;
}

.docs-content a:hover {
  color: var(--tg-primary-color);
}

/* Inline code */
.docs-content code {
  color: #ffd38a;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 2px 6px;
  border-radius: 7px;
}

/* Docs section separation */
.docs-section + .docs-section {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Endpoint card */
.endpoint-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-left: 4px solid var(--tg-secondary-color);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 30px;
}

/* Endpoint header */
.endpoint-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.method {
  padding: 6px 12px;
  border-radius: 10px;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.2px;
}

.method.post {
  background: var(--tg-secondary-color);
  color: #ffffff;
}

.endpoint-header code {
  font-size: 16px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
  padding: 6px 10px;
  border-radius: 10px;
}

/* Alert (Base URL) – premium dark style */
.api-docs .alert-info {
  background: rgba(25, 113, 255, 0.12) !important;
  border: 1px solid rgba(25, 113, 255, 0.30) !important;
  border-left: 4px solid var(--tg-secondary-color) !important;
  color: rgba(255, 255, 255, 0.90) !important;
  border-radius: 12px;
}

.api-docs .alert-info h4 {
  margin-top: 0;
  color: #ffffff !important;
}

/* Params table */
.params-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.params-table th,
.params-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.params-table th {
  color: #ffffff;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.06);
}

.params-table td {
  color: rgba(255, 255, 255, 0.78);
}

/* Code blocks */
.code-block {
  background: #0b0e19;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  padding: 16px;
  overflow-x: auto;
  margin-bottom: 20px;
}

.code-block pre {
  margin: 0;
  color: rgba(255, 255, 255, 0.90);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 14px;
  line-height: 1.65;
  white-space: pre;
}

/* Best practices grid */
.best-practices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  margin-bottom: 30px;
}

.practice-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-left: 4px solid var(--tg-primary-color);
  padding: 20px;
  border-radius: 14px;
}

.practice-card h4 {
  margin-top: 0;
  color: var(--tg-primary-color);
}

@media (max-width: 767px) {
  .best-practices {
    grid-template-columns: 1fr;
  }
}