/* Main CSS Entry Point */

/* 1. Core - Variables, Reset, Typography */
@import "core/variables.css";
@import "core/reset.css";
@import "core/typography.css";

/* 2. Components - Reusable UI elements */
@import "components/header.css";
@import "components/footer.css";
@import "components/buttons.css";
@import "components/cards.css";
@import "components/hero.css";
@import "components/hero-footer.css";
@import "components/modal.css";
@import "components/search.css";
@import "components/country-picker.css";
@import "components/sticky-panel.css";
@import "components/cookie-banner.css";

/* 3. Pages - Page specific styles */
@import "pages/home.css";
@import "pages/partners.css";
@import "pages/services.css";
@import "pages/solutions-template.css";
@import "pages/web-applications.css";
@import "pages/CaseStudies.css";
@import "pages/insights.css";
@import "pages/bayara.css";
@import "pages/blog1.css";
@import "pages/policy.css";
@import "pages/error.css";

/* 4. Sticky Contact Tab */
.sticky-connect-tab {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%) translateX(0);
    background: var(--brand-blue);
    color: #ffffff;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    z-index: 9990;
    padding: 24px 15px;
    border-radius: 0px;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.45);
    transition: background 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    white-space: nowrap;
}

.sticky-connect-tab.hide-floating {
    transform: translateY(-50%) translateX(110%);
    pointer-events: none;
}

.sticky-connect-tab:hover {
    background: var(--brand-navy);
    box-shadow: -6px 0 32px rgba(0, 40, 86, 0.6);
}

.sticky-connect-tab svg {
    flex-shrink: 0;
}

.sticky-connect-tab span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    font-family: var(--font-primary);
    text-transform: uppercase;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
}

/* Footer inline version */
.footer-connect-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--brand-blue);
    color: #ffffff;
    text-decoration: none;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-family: var(--font-primary);
    transition: background 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    white-space: nowrap;
    margin-left: 8px;
}

.footer-connect-btn:hover {
    background: var(--brand-navy);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 40, 86, 0.3);
}

@media (max-width: 810px) {
    .sticky-connect-tab {
        padding: 18px 12px;
        gap: 10px;
    }
    .sticky-connect-tab span {
        font-size: 10px;
        letter-spacing: 1.5px;
    }
    .footer-connect-btn span {
        display: none;
    }
}

/* 5. Global hover loading-bar animation (desktop/PC only) */
@media (min-width: 1025px) {
    .services-stat-item,
    .partner-column-item,
    .core-card,
    .web-app-stat-item,
    .cs-card,
    .paylite-item,
    .hr-module-card {
        position: relative;
        border-top: none !important;
    }

    .services-stat-item::before,
    .partner-column-item::before,
    .core-card::before,
    .web-app-stat-item::before,
    .cs-card::before,
    .paylite-item::before,
    .hr-module-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: var(--brand-blue);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        z-index: 10;
        pointer-events: none;
    }

    .services-stat-item:hover::before,
    .partner-column-item:hover::before,
    .core-card:hover::before,
    .web-app-stat-item:hover::before,
    .cs-card:hover::before,
    .paylite-item:hover::before,
    .hr-module-card:hover::before {
        transform: scaleX(1);
    }

    .services-stat-item:hover,
    .partner-column-item:hover,
    .core-card:hover,
    .web-app-stat-item:hover,
    .cs-card:hover,
    .paylite-item:hover,
    .hr-module-card:hover {
        border-top-color: transparent !important;
    }
}

/* 6. Global button hover/active transitions */
.nav-btn,
.why-btn,
.web-dev-btn,
.submit-btn,
.partners-cta-btn,
.mobile-footer-btn:not(.arabic-btn),
.show-more-btn,
.acc-tag,
.theme-submit-btn,
.contact-modal-submit,
.btn-accept,
.tech-cat-btn,
.tech-sub-btn {
    transition: background-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                border-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                color 0.25s ease;
}

.nav-btn:hover,
.why-btn:hover,
.web-dev-btn:hover,
.submit-btn:hover,
.partners-cta-btn:hover,
.mobile-footer-btn:not(.arabic-btn):hover,
.show-more-btn:hover,
.acc-tag:hover,
.theme-submit-btn:hover,
.contact-modal-submit:hover,
.btn-accept:hover,
.tech-cat-btn:hover,
.tech-sub-btn:hover {
    background-color: var(--brand-navy) !important;
    background: var(--brand-navy) !important;
    border-color: var(--brand-navy) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 40, 86, 0.28);
}

.nav-btn:active,
.why-btn:active,
.web-dev-btn:active,
.submit-btn:active,
.partners-cta-btn:active,
.mobile-footer-btn:not(.arabic-btn):active,
.show-more-btn:active,
.acc-tag:active,
.theme-submit-btn:active,
.contact-modal-submit:active,
.btn-accept:active,
.tech-cat-btn:active,
.tech-sub-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 40, 86, 0.2);
}

/* 7. Global mobile pagination dash standardization */
@media (max-width: 1200px) {
    .mob-dash, .mobile-dash, .cs-mob-dash, .f500-mob-dash, .expertise-mob-dash,
    .trans-mob-dash, .testimo-mob-dash, .explore-mob-dash,
    .paylite-mob-dash, .nav-dash, .tech-dot, .core-dot,
    .partners-dot, .b-dash, .case-dash, .process-dash {
        width: 12px !important;
        height: 4px !important;
        border-radius: 0;
        background-color: rgba(0, 0, 0, 0.18) !important;
        cursor: pointer;
        transition: width 0.3s ease, background-color 0.3s ease;
        display: inline-block;
    }

    .mob-dash.active, .mobile-dash.active, .cs-mob-dash.active, .f500-mob-dash.active,
    .expertise-mob-dash.active, .trans-mob-dash.active,
    .testimo-mob-dash.active, .explore-mob-dash.active,
    .paylite-mob-dash.active, .nav-dash.active, .tech-dot.active,
    .core-dot.active, .partners-dot.active, .b-dash.active,
    .case-dash.active, .process-dash.active {
        width: 32px !important;
        background-color: var(--brand-blue) !important;
    }
}