﻿html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.fa-youtube:hover {
    color: gray !important;
}

html .bg-secondary-features, html .bg-secondary-features:hover {
    background-color: #5c90c7 !important;
    color: white;
}

.page-header-minimal {
    background: #f8f9fa;
}

.accent-line {
    width: 60px;
    height: 4px;
    margin: 0.5rem auto;
    border-radius: 2px;
}

html[dir="rtl"] .accent-line {
    margin-left: auto;
    margin-right: 0;
}

html[dir="rtl"] .accent-line {
    margin: 0.5rem 0 0.5rem auto; /* top right bottom left */
}

#togglePassword {
    background-color: transparent;
    border-left: none;
    border-color: var(--bs-border-color);
}

    #togglePassword:hover {
        background-color: transparent;
    }

    #togglePassword:focus {
        background-color: transparent;
        box-shadow: none;
    }


.header-nav-top .nav > .nav-item {
    display: flex;
    align-items: center;
}

.header-nav-top .lang-toggle .fi {
    display: inline-block;
    line-height: 1;
    font-size: 1rem; /* tweak: 0.95rem–1.1rem */
    margin-top: 1px; /* tweak: 0–2px to match the user icon */
}

/* Bootstrap default caret */
.lang-switcher .dropdown-toggle::after {
    display: none !important;
}

/* Porto theme caret (pseudo + background) */
.header-nav .lang-switcher > .nav-link::after,
.header-nav .lang-switcher > button::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* If Porto injected an <i> icon */
.lang-switcher i.fa,
.lang-switcher i.fas,
.lang-switcher i.fa-angle-down {
    display: none !important;
}

/* If Porto added a span caret */
.lang-switcher .caret {
    display: none !important;
}

@@media (max-width: 767.98px) {
    #header .header-container {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    #header .header-row {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    background-color: #78a3d1 !important;
    border-color: #78a3d1 !important;
    color: #fff !important;
}

.bg-feature {
    background-color: #1a6b2a;
}

.bg-bugfix {
    background-color: #8b1a1a;
}

.bg-enhancement {
    background-color: #1a3a6b;
}

.bg-info-custom {
    background-color: #1a5c6b;
}

.bg-beta {
    background-color: #8b6914;
}

/* Language toggle vertical alignment */
.lang-switcher .lang-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    line-height: 1;
    padding-top: 0;
    padding-bottom: 0;
}

    .lang-switcher .lang-toggle span {
        display: inline-block;
        line-height: 1;
        transform: translateY(2px); /* micro adjustment */
    }

.lang-toggle span {
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.dropdown-item span:first-child {
    min-width: 32px;
    text-align: center;
}


/* ===== RTL SUPPORT ===== */

html[dir="rtl"] body {
    direction: rtl;
}

html[dir="rtl"] .text-start {
    text-align: right !important;
}

html[dir="rtl"] .text-end {
    text-align: left !important;
}

html[dir="rtl"] .float-left {
    float: right !important;
}

html[dir="rtl"] .float-right {
    float: left !important;
}

html[dir="rtl"] .header-nav .nav > li {
    margin-left: 0 !important;
    margin-right: 1.25rem !important;
}

html[dir="rtl"] body {
    font-family: 'Cairo', sans-serif;
}

html[dir="rtl"] .review-info-wrap p {
    text-align: right;
}

html[dir="rtl"] .list-icons {
    padding-right: 1.5rem; /* create space for icon */
    padding-left: 0;
}

    html[dir="rtl"] .list-icons li {
        position: relative;
        padding-right: 1.5rem; /* space for icon */
        padding-left: 0;
        text-align: right;
    }

        html[dir="rtl"] .list-icons li i {
            position: absolute;
            right: 0; /* move icon to far right */
            left: auto;
            margin: 0;
        }

html[dir="rtl"] .read-more-link i {
    transform: scaleX(-1);
}

html[dir="rtl"] input,
html[dir="rtl"] textarea {
    text-align: right;
}


html .nav-item #themeToggle {
    line-height: 1.4em;
    padding: 0;
}

    html .nav-item #themeToggle i {
        vertical-align: bottom;
    }










/* ================= Dark mode Fix ================= */
/* Carousel bottom section - dark mode */
html.dark .section-below-carousel {
    background-color: transparent;
}

html.dark .dropdown-menu,
html.dark .dropdown-mega {
    border-color: #383f48 !important;
}

    html.dark .dropdown-mega .dropdown-item,
    html.dark .dropdown-menu .dropdown-item {
        color: #c8cdd5 !important;
    }

        html.dark .dropdown-mega .dropdown-item:hover,
        html.dark .dropdown-menu .dropdown-item:hover {
            color: #ffffff !important;
            background-color: rgba(255,255,255,0.07) !important;
        }

html.dark .card {
    background-color: #23272e !important;
    border-color: #383f48 !important;
    color: #c8cdd5;
}

html.dark .page-header-minimal {
    background: #1e2126 !important;
}

    html.dark .page-header-minimal h1 {
        color: #e0e4ea;
    }

    html.dark .page-header-minimal .text-muted {
        color: #8a9ab0 !important;
    }

html.dark #footer,
html.dark #footer .footer-copyright,
html.dark .bg-color-light-scale-1 {
    background-color: #1a1d22 !important;
    color: #c8cdd5;
}

    html.dark #footer p,
    html.dark #footer strong {
        color: #c8cdd5;
    }

html.dark .breadcrumb li,
html.dark .breadcrumb li a,
html.dark .breadcrumb li.active {
    color: #c8cdd5 !important;
}

    html.dark .breadcrumb li a:hover {
        color: #ffffff !important;
    }

/* Features list item text */
html.dark .list.list-icons li,
html.dark .integration-details-wrap p,
html.dark .integration-details-wrap h3 {
    color: #c8cdd5 !important;
}

/* Right image panel - remove bg-light */
html.dark .job-overview-wrap {
    background-color: #23272e !important;
}

/* Left nav menu */
html.dark .list-group-item {
    background-color: #23272e !important;
    color: #c8cdd5 !important;
    border-color: #383f48 !important;
}

    html.dark .list-group-item:hover {
        background-color: #2e333d !important;
        color: #ffffff !important;
    }

    html.dark .list-group-item.bg-secondary-features {
        background-color: #5c90c7 !important;
        color: #ffffff !important;
    }

html.dark .bg-color-grey {
    background-color: #23272e !important;
    color: #c8cdd5;
}

    html.dark .bg-color-grey p,
    html.dark .bg-color-grey h6 {
        color: #c8cdd5;
    }

html.dark .bg-light {
    background-color: #23272e !important;
    color: #c8cdd5;
}

html.dark .feature-list li,
html.dark .feature-list li strong {
    color: #c8cdd5 !important;
}

html.dark h3.h4,
html.dark p.lead {
    color: #c8cdd5 !important;
}

html.dark .hero-section {
    background-color: #23272e !important;
    color: #c8cdd5;
}

    html.dark .hero-section h3,
    html.dark .hero-section p {
        color: #c8cdd5 !important;
    }

html.dark .feature-card {
    background-color: #23272e !important;
    color: #c8cdd5;
}

    html.dark .feature-card h4,
    html.dark .feature-card li {
        color: #c8cdd5 !important;
    }

/* Why Choose section */
html.dark .py-4 h4.h5,
html.dark .py-4 .list-unstyled li {
    color: #c8cdd5 !important;
}

html.dark .bg-body {
    background-color: #23272e !important;
    color: #c8cdd5;
}

html.dark .download-list li {
    color: #c8cdd5;
}

html.dark body .text-muted {
    color: #8a9ab0 !important;
}

html.dark .form-control,
html.dark .form-select,
html.dark select.form-control {
    background-color: #2a2f38 !important;
    color: #c8cdd5 !important;
    border-color: #383f48 !important;
}

    html.dark .form-control:focus,
    html.dark select.form-control:focus {
        background-color: #2a2f38 !important;
        color: #c8cdd5 !important;
        border-color: #5c90c7 !important;
    }

html.dark label {
    color: #c8cdd5;
}

html.dark .e-upload {
    border-color: #383f48;
    background-color: #23272e;
    color: #c8cdd5;
}

    html.dark .e-upload .e-btn,
    html.dark .e-upload .e-css.e-btn {
        background-color: #2a2f38 !important;
        color: #c8cdd5 !important;
        border-color: #383f48 !important;
    }

    html.dark .e-upload .e-file-drop {
        color: #c8cdd5 !important;
    }

html.dark form label,
html.dark .col-md-12 > label,
html.dark .col-md-6 > label,
html.dark .col-md-4 > label {
    color: #c8cdd5 !important;
}

html.dark .e-upload .e-upload-files .e-upload-file-list,
html.dark .e-upload .e-file-name,
html.dark .e-upload .e-file-size,
html.dark .e-upload .e-file-status {
    color: #c8cdd5 !important;
}

html.dark .e-upload .e-file-type,
html.dark .e-upload .e-icons {
    color: #c8cdd5 !important;
}

html.dark .alert-warning {
    background-color: #2e2a1a !important;
    border-color: #5a4e1a !important;
    color: #c8cdd5 !important;
}

    html.dark .alert-warning h4,
    html.dark .alert-warning h5 {
        color: #c8cdd5 !important;
    }

html.dark .bd-callout {
    background-color: #23272e !important;
    border-color: #383f48 !important;
    color: #c8cdd5;
}

html.dark h5 {
    color: #c8cdd5;
}

html.dark .list-icons li p {
    color: #c8cdd5 !important;
}

html.dark p,
html.dark li,
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6 {
    color: #c8cdd5;
}

html.dark .alert-info {
    background-color: #1a2a3a !important;
    border-color: #1a4a6b !important;
    color: #c8cdd5 !important;
}

html.dark .bg-color-light {
    background-color: #23272e !important;
    color: #c8cdd5;
}

html.dark .alert-danger {
    background-color: #2e1a1a !important;
    border-color: #6b1a1a !important;
    color: #c8cdd5 !important;
}

html.dark .text-color-dark {
    color: #c8cdd5 !important;
}

html.dark .price,
html.dark .price-unit {
    color: #c8cdd5 !important;
}

html.dark .table td,
html.dark .table th {
    color: #c8cdd5 !important;
    border-color: #383f48 !important;
}

html.dark .btn-outline-secondary {
    color: #c8cdd5 !important;
    border-color: #383f48 !important;
}

    html.dark .btn-outline-secondary:hover {
        background-color: #383f48 !important;
        color: #ffffff !important;
    }

html.dark .input-group-text {
    background-color: #2a2f38 !important;
    color: #c8cdd5 !important;
    border-color: #383f48 !important;
}

html.dark .table-light,
html.dark .table-light th,
html.dark .table-light td {
    --bs-table-color: #c8cdd5 !important;
    --bs-table-bg: #2a2f38 !important;
    color: #c8cdd5 !important;
    background-color: #2a2f38 !important;
}

html.dark .table-primary,
html.dark .table-primary th,
html.dark .table-primary td {
    --bs-table-bg: #1e3a5f !important;
    color: #c8cdd5 !important;
}

html.dark .pricing-table2 td.text-muted,
html.dark .pricing-table2 th.text-muted {
    color: #8a9ab0 !important;
}

html.dark .form-check-label,
html.dark .fw-semibold {
    color: #c8cdd5 !important;
}

html.dark .table-striped > tbody > tr:nth-of-type(odd) {
    --bs-table-accent-bg: rgba(255,255,255,0.05) !important;
    --bs-table-striped-bg: rgba(255,255,255,0.05) !important;
}

html.dark .table-striped > tbody > tr:nth-of-type(even) {
    --bs-table-accent-bg: transparent !important;
}

html.dark td,
html.dark th,
html.dark tr {
    color: #c8cdd5 !important;
}

html.dark .table {
    color: #c8cdd5 !important;
    border-color: #383f48 !important;
    --bs-table-color: #c8cdd5 !important;
    --bs-table-bg: transparent !important;
    --bs-table-striped-color: #c8cdd5 !important;
    --bs-table-hover-color: #c8cdd5 !important;
    --bs-table-active-color: #c8cdd5 !important;
}

html.dark .table-success,
html.dark .table-success td,
html.dark .table-success th {
    --bs-table-bg: #1a3a2a !important;
    --bs-table-color: #c8cdd5 !important;
    background-color: #1a3a2a !important;
    color: #c8cdd5 !important;
}

html.dark .table-danger,
html.dark .table-danger td,
html.dark .table-danger th {
    --bs-table-bg: #3a1a1a !important;
    --bs-table-color: #c8cdd5 !important;
    background-color: #3a1a1a !important;
    color: #c8cdd5 !important;
}

html.dark .table-secondary,
html.dark .table-secondary td,
html.dark .table-secondary th {
    --bs-table-bg: #2a2f38 !important;
    --bs-table-color: #c8cdd5 !important;
    background-color: #2a2f38 !important;
    color: #c8cdd5 !important;
}

html.dark .text-success {
    color: #4caf7d !important;
}

html.dark img[src*="stripe.svg"] {
    filter: invert(1);
}

html.dark .container a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: #5b9bd5 !important;
}

    html.dark .container a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
        color: #7db3e8 !important;
    }

html.dark .nav-item a.btn-link {
    color: #5b9bd5 !important;
}

html.dark .accordion-item {
    background-color: #23272e !important;
    border-color: #383f48 !important;
}

html.dark .accordion-button {
    background-color: #23272e !important;
    color: #c8cdd5 !important;
}

    html.dark .accordion-button:not(.collapsed) {
        background-color: #2a2f38 !important;
        color: #c8cdd5 !important;
    }

    html.dark .accordion-button::after {
        filter: invert(1);
    }

html.dark .accordion-body {
    background-color: #23272e !important;
    color: #c8cdd5 !important;
}

html.dark .btn-outline-primary {
    color: #c8cdd5 !important;
    border-color: #4a5060 !important;
    background-color: transparent !important;
}

    html.dark .btn-outline-primary:hover {
        background-color: #2a2f38 !important;
        color: #ffffff !important;
    }

html.dark .btn-primary {
    background-color: #3a4a5a !important;
    border-color: #4a5a6a !important;
    color: #ffffff !important;
}

html.dark .badge.bg-light {
    background-color: #383f48 !important;
    color: #c8cdd5 !important;
}

/* Program Updates date box */
html.dark .date-box {
    background: #2a2f38 !important;
}

    html.dark .date-box .day {
        color: #c8cdd5 !important;
    }

    html.dark .date-box .month {
        color: #8a9ab0 !important;
    }

/* Carousel nav buttons */
html.dark .carousel-nav-btn {
    background: #2a2f38 !important;
    border-color: #383f48 !important;
    color: #c8cdd5 !important;
}

/* Devices section - integration circle backgrounds */
html.dark .integration-list-wrap a img {
    background-color: #23272e;
    border: 1px solid #383f48;
}

.integration-grid-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    justify-items: center;
    align-items: center;
}

    .integration-grid-wrap a img {
        width: 64px;
        height: 64px;
        object-fit: contain;
    }

.header-logo a {
    color: #333333;
    text-decoration: none !important;
}

    .header-logo a:hover {
        text-decoration: none !important;
    }

html.dark .header-logo a,
html.dark .header-logo span {
    color: #c8cdd5 !important;
}

    html.dark .header-logo span > span {
        color: #5c90c7 !important;
    }

html.dark .container-fluid em {
    color: #c8cdd5 !important;
}

html.dark .highlight-scribble-1 path {
    stroke: #5b9bd5 !important;
}

html.dark .grecaptcha-badge {
    opacity: 0.3 !important;
}


















/* ================= RTL Bootstrap Form Fix ================= */

html[dir="rtl"] .form-control,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: right;
}

html[dir="rtl"] label {
    text-align: right;
}

html[dir="rtl"] .e-upload {
    direction: rtl;
    text-align: right;
}

/* Default (LTR) */
.centered-text {
    text-align: center;
}

/* RTL override */
html[dir="rtl"] .centered-text {
    text-align: right;
}

table.pricing-table2 {
    direction: ltr;
}

html[dir="rtl"] table.pricing-table2 th.text-start,
html[dir="rtl"] table.pricing-table2 td.text-start {
    text-align: right !important;
    direction: rtl;
}

/* Default (LTR) → center */
.icon-wrapper {
    display: flex;
    justify-content: center;
}

/* RTL → right */
html[dir="rtl"] .icon-wrapper {
    justify-content: right;
}

html[dir="rtl"] .dropdown-mega-sub-nav {
    text-align: right;
}

    html[dir="rtl"] .dropdown-mega-sub-nav .dropdown-item {
        text-align: right;
    }

html[dir="rtl"] .header-nav .dropdown-menu .dropdown-item {
    text-align: right;
}

html[dir="rtl"] .page-header-minimal .text-center {
    text-align: right !important;
}

html[dir="rtl"] .page-header-minimal .justify-content-center {
    justify-content: right !important;
}

html[dir="rtl"] .page-header-minimal .accent-line {
    margin-left: auto !important;
    margin-right: 0 !important;
}
