/* =========================================
   WEBCRAFT
   FULL-WIDTH INTERACTIVE WEBSITE
========================================= */


/* =========================================
   RESET
========================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    width: 100%;
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    min-height: 100vh;

    margin: 0;
    padding: 0;

    overflow-x: hidden;

    background: #00030d;

    font-family: Arial, Helvetica, sans-serif;
}


/* =========================================
   MAIN WEBSITE
========================================= */

.mobile-site {
    position: relative;

    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: #00030d;
}


/* =========================================
   WEBCRAFT BACKGROUND IMAGE
========================================= */

.background-image {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;

    user-select: none;
    -webkit-user-drag: none;
}


/* =========================================
   ALL CLICKABLE AREAS
========================================= */

.hotspot {
    position: absolute;

    display: block;

    margin: 0;
    padding: 0;

    border: none;
    outline: none;

    background: transparent;

    cursor: pointer;

    z-index: 20;

    -webkit-tap-highlight-color: transparent;
}


/* Small glow when mouse is over a button */

.hotspot:hover {
    background: rgba(0, 238, 255, 0.08);

    box-shadow:
        0 0 15px rgba(0, 238, 255, 0.15);
}


/* =========================================
   START YOUR PROJECT
========================================= */

.start-project {
    top: 41.1%;
    left: 5.1%;

    width: 38%;
    height: 4.4%;

    border-radius: 15px;
}


/* =========================================
   SERVICE BUTTONS
========================================= */

.service {
    top: 66.3%;

    height: 12.1%;

    border-radius: 15px;
}


/* WEB DESIGN */

.web-design {
    left: 2.5%;
    width: 15%;
}


/* WEB DEVELOPMENT */

.web-development {
    left: 18.4%;
    width: 15%;
}


/* E-COMMERCE */

.ecommerce {
    left: 34.3%;
    width: 15%;
}


/* MOBILE EXPERIENCES */

.mobile-experiences {
    left: 50.2%;
    width: 15%;
}


/* SEO */

.seo {
    left: 66.1%;
    width: 15%;
}


/* MAINTENANCE */

.maintenance {
    left: 82%;
    width: 15%;
}


/* =========================================
   PROCESS BUTTONS
========================================= */

.process {
    top: 82.5%;

    width: 15%;
    height: 8%;

    border-radius: 50%;
}


/* CONSULT */

.consult {
    left: 7%;
}


/* DESIGN */

.design {
    left: 27%;
}


/* BUILD */

.build {
    left: 49%;
}


/* LAUNCH */

.launch {
    left: 72%;
}


/* =========================================
   CONTACT BUTTONS
========================================= */

.contact {
    top: 95.5%;

    width: 7%;
    height: 3%;

    border-radius: 50%;
}


/* WHATSAPP */

.whatsapp {
    left: 66%;
}


/* PHONE */

.phone {
    left: 75.5%;
}


/* EMAIL */

.email {
    left: 85%;
}


/* =========================================
   INFORMATION MODAL
========================================= */

.info-modal {
    display: none;

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 9999;

    align-items: center;
    justify-content: center;

    padding: 20px;
}


/* SHOW MODAL */

.info-modal.active {
    display: flex;
}


/* =========================================
   DARK BACKDROP
========================================= */

.modal-backdrop {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background:
        rgba(0, 2, 15, 0.90);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/* =========================================
   HOLOGRAPHIC PANEL
========================================= */

.info-panel {
    position: relative;

    z-index: 2;

    width: min(92vw, 550px);

    max-height: 85vh;

    overflow-y: auto;

    padding: 38px 30px 30px;

    color: white;

    border:
        1px solid rgba(70, 238, 255, 0.8);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 18, 35, 0.98),
            rgba(17, 6, 39, 0.98)
        );

    box-shadow:
        0 0 30px rgba(0, 229, 255, 0.30),
        0 0 70px rgba(229, 0, 255, 0.18),
        inset 0 0 30px rgba(0, 229, 255, 0.04);

    animation:
        hologramOpen 0.25s ease;
}


/* =========================================
   MODAL OPEN ANIMATION
========================================= */

@keyframes hologramOpen {

    from {
        opacity: 0;
        transform:
            scale(0.92)
            translateY(15px);
    }

    to {
        opacity: 1;
        transform:
            scale(1)
            translateY(0);
    }

}


/* =========================================
   CLOSE BUTTON
========================================= */

.close-modal {
    position: absolute;

    top: 12px;
    right: 18px;

    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: none;

    background: transparent;

    color: #5ff6ff;

    font-size: 32px;
    line-height: 1;

    cursor: pointer;

    text-shadow:
        0 0 10px #00eaff;
}


.close-modal:hover {
    color: #ff4df3;

    text-shadow:
        0 0 12px #ff00e6;
}


/* =========================================
   SYSTEM LABEL
========================================= */

.system-label {
    margin-bottom: 12px;

    color: #4defff !important;

    font-size: 11px;

    font-weight: bold;

    letter-spacing: 2px;
}


/* =========================================
   MODAL TITLE
========================================= */

.info-panel h2 {
    margin-bottom: 18px;

    color: white;

    font-size: 32px;

    line-height: 1.1;

    text-shadow:
        0 0 15px rgba(0, 229, 255, 0.25);
}


/* =========================================
   MODAL DESCRIPTION
========================================= */

#modalText {
    color: #a8bad0;

    font-size: 15px;

    line-height: 1.7;
}


/* =========================================
   FEATURE LIST
========================================= */

#modalFeatures {
    display: grid;

    gap: 10px;

    margin: 25px 0;
}


#modalFeatures div {
    padding: 13px 14px;

    color: #e2f5ff;

    font-size: 14px;

    line-height: 1.4;

    background:
        rgba(0, 238, 255, 0.055);

    border-left:
        2px solid #4defff;

    border-radius:
        0 6px 6px 0;
}


/* =========================================
   START PROJECT BUTTON INSIDE MODAL
========================================= */

.modal-project-button {
    width: 100%;

    min-height: 52px;

    padding: 14px 20px;

    border:
        1px solid #4defff;

    border-radius: 8px;

    color: white;

    background:
        linear-gradient(
            90deg,
            rgba(0, 229, 255, 0.20),
            rgba(221, 0, 255, 0.20)
        );

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 1px;

    cursor: pointer;

    box-shadow:
        0 0 20px rgba(0, 229, 255, 0.15);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.modal-project-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 0 25px rgba(0, 229, 255, 0.35),
        0 0 35px rgba(221, 0, 255, 0.15);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .info-panel {
        width: min(94vw, 520px);

        padding:
            36px 26px 28px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    body {
        background: #00030d;
    }


    .mobile-site {
        width: 100%;
    }


    .background-image {
        width: 100%;
        height: auto;
    }


    .info-modal {
        padding: 14px;
    }


    .info-panel {
        width: 94vw;

        max-height: 82vh;

        padding:
            34px 20px 24px;

        border-radius: 16px;
    }


    .info-panel h2 {
        font-size: 26px;
    }


    #modalText {
        font-size: 14px;
    }


    #modalFeatures div {
        font-size: 13px;

        padding: 11px 12px;
    }


    .modal-project-button {
        min-height: 50px;
    }

}
/* =========================================
   STAFF LOGIN
========================================= */

.staff-page {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background:
        radial-gradient(
            circle at top left,
            rgba(0, 229, 255, 0.15),
            transparent 35%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(229, 0, 255, 0.15),
            transparent 35%
        ),
        #020712;
}


.staff-login-screen {
    width: 100%;

    display: flex;
    justify-content: center;
}


.staff-login-card {
    width: min(92vw, 450px);

    padding: 38px 30px;

    color: white;

    border:
        1px solid rgba(77, 239, 255, 0.65);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 18, 35, 0.98),
            rgba(22, 5, 42, 0.98)
        );

    box-shadow:
        0 0 40px rgba(0, 229, 255, 0.2),
        0 0 70px rgba(229, 0, 255, 0.12);
}


.staff-login-card h1 {
    margin-bottom: 8px;

    font-size: 32px;
}


.staff-login-subtitle {
    margin-bottom: 28px;

    color: #91a8bd;
}


.staff-submit-button {
    width: 100%;

    min-height: 52px;

    border:
        1px solid #4defff;

    border-radius: 8px;

    color: white;

    background:
        linear-gradient(
            90deg,
            rgba(0, 229, 255, 0.2),
            rgba(229, 0, 255, 0.2)
        );

    font-weight: bold;

    letter-spacing: 1px;

    cursor: pointer;
}


.staff-login-status {
    min-height: 20px;

    margin-top: 16px;

    text-align: center;

    color: #5ff6ff;
}


.return-site-link {
    display: block;

    margin-top: 24px;

    color: #7cefff;

    text-align: center;

    text-decoration: none;

    font-size: 12px;

    letter-spacing: 1px;
}
/* =========================================
   STAFF LOGIN BUTTON - MAIN WEBSITE
========================================= */

.staff-login-link {
    position: absolute;
    right: 2%;
    bottom: 0.6%;

    z-index: 50;

    padding: 10px 18px;

    color: #5ff6ff;

    background: rgba(2, 7, 18, 0.88);

    border: 1px solid rgba(77, 239, 255, 0.65);
    border-radius: 8px;

    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1.5px;

    text-decoration: none;

    box-shadow:
        0 0 12px rgba(0, 229, 255, 0.25),
        inset 0 0 12px rgba(0, 229, 255, 0.05);

    transition: 0.2s ease;
}

.staff-login-link:hover {
    color: white;

    border-color: #ff4df3;

    box-shadow:
        0 0 18px rgba(0, 229, 255, 0.45),
        0 0 25px rgba(255, 77, 243, 0.25);

    transform: translateY(-2px);
}

@media (max-width: 600px) {

    .staff-login-link {
        right: 3%;
        bottom: 0.4%;

        padding: 7px 11px;

        font-size: 8px;
        letter-spacing: 1px;
    }

}
/* =========================================
   WEBNANZ ADMIN DASHBOARD
========================================= */

.admin-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(0, 229, 255, 0.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 20%,
            rgba(229, 0, 255, 0.10),
            transparent 30%
        ),
        #020712;

    color: white;

    padding: 25px;
}


.admin-dashboard {
    width: min(1200px, 100%);

    margin: 0 auto;
}


.admin-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 30px;
}


.admin-header h1 {
    margin-top: 5px;

    font-size: clamp(
        28px,
        5vw,
        48px
    );
}


.admin-logout-button,
.refresh-button {
    padding: 11px 16px;

    color: #5ff6ff;

    border:
        1px solid rgba(
            77,
            239,
            255,
            0.55
        );

    border-radius: 7px;

    background:
        rgba(
            0,
            15,
            30,
            0.75
        );

    cursor: pointer;
}


.admin-summary {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 15px;

    margin-bottom: 35px;
}


.admin-stat {
    padding: 20px;

    border:
        1px solid rgba(
            77,
            239,
            255,
            0.25
        );

    border-radius: 12px;

    background:
        rgba(
            4,
            18,
            35,
            0.78
        );
}


.admin-stat span {
    display: block;

    color: #5ff6ff;

    font-size: 32px;

    font-weight: bold;
}


.admin-stat small {
    color: #92a8ba;
}


.messages-section {
    padding: 25px;

    border:
        1px solid rgba(
            77,
            239,
            255,
            0.18
        );

    border-radius: 18px;

    background:
        rgba(
            3,
            14,
            28,
            0.82
        );
}


.messages-heading {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 20px;
}


.messages-heading h2 {
    font-size: 24px;
}


.admin-status {
    color: #86a1b6;

    margin-bottom: 18px;
}


.messages-container {
    display: grid;

    gap: 18px;
}


.customer-message-card {
    padding: 22px;

    border:
        1px solid rgba(
            77,
            239,
            255,
            0.18
        );

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(
                6,
                22,
                40,
                0.95
            ),
            rgba(
                16,
                6,
                31,
                0.95
            )
        );
}


.customer-message-card.new-message {
    border-color:
        rgba(
            255,
            77,
            243,
            0.55
        );

    box-shadow:
        0 0 25px
        rgba(
            255,
            77,
            243,
            0.08
        );
}


.message-card-header {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;
}


.message-status {
    display: inline-block;

    margin-bottom: 7px;

    color: #ff62f2;

    font-size: 10px;

    font-weight: bold;

    letter-spacing: 2px;
}


.message-card-header h3 {
    font-size: 22px;
}


.message-project-type {
    margin-top: 4px;

    color: #60eaff;
}


.message-date {
    color: #7e94a7;

    font-size: 12px;
}


.customer-contact-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 15px;

    margin-bottom: 20px;
}


.customer-contact-grid div {
    padding: 12px;

    border-left:
        2px solid #39eaff;

    background:
        rgba(
            0,
            229,
            255,
            0.035
        );
}


.customer-contact-grid small,
.customer-message-text small {
    display: block;

    margin-bottom: 5px;

    color: #74899b;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.customer-contact-grid a,
.customer-contact-grid span {
    color: white;

    text-decoration: none;

    word-break: break-word;
}


.customer-contact-grid a:hover {
    color: #5ff6ff;
}


.customer-message-text {
    padding: 16px;

    margin-bottom: 20px;

    border:
        1px solid rgba(
            255,
            255,
            255,
            0.06
        );

    border-radius: 8px;

    background:
        rgba(
            0,
            0,
            0,
            0.18
        );
}


.customer-message-text p {
    color: #d6e4ee;

    line-height: 1.7;

    white-space: pre-wrap;
}


.message-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}


.mark-read-button,
.delete-message-button {
    padding: 10px 14px;

    border-radius: 7px;

    font-weight: bold;

    cursor: pointer;
}


.mark-read-button {
    color: #5ff6ff;

    border:
        1px solid #5ff6ff;

    background:
        rgba(
            0,
            229,
            255,
            0.08
        );
}


.delete-message-button {
    color: #ff7ba9;

    border:
        1px solid
        rgba(
            255,
            82,
            135,
            0.65
        );

    background:
        rgba(
            255,
            82,
            135,
            0.07
        );
}


@media (max-width: 650px) {

    .admin-page {
        padding: 15px;
    }


    .admin-header {
        align-items: flex-start;

        flex-direction: column;
    }


    .admin-summary {
        grid-template-columns: 1fr 1fr;
    }


    .messages-section {
        padding: 16px;
    }


    .message-card-header {
        flex-direction: column;
    }


    .customer-contact-grid {
        grid-template-columns: 1fr;
    }

}
/* =========================================
   WEBNANZ CUSTOMER PROJECT FORM
========================================= */

.project-modal {
    display: none;

    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 10000;

    align-items: center;
    justify-content: center;

    padding: 20px;
}

.project-modal.active {
    display: flex;
}

.project-backdrop {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 2, 15, 0.92);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


/* PROJECT PANEL */

.project-panel {
    position: relative;
    z-index: 2;

    width: min(94vw, 600px);
    max-height: 90vh;

    overflow-y: auto;

    padding: 40px 30px 30px;

    color: white;

    border: 1px solid rgba(77, 239, 255, 0.75);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 18, 35, 0.99),
            rgba(25, 5, 42, 0.99)
        );

    box-shadow:
        0 0 40px rgba(0, 229, 255, 0.28),
        0 0 80px rgba(229, 0, 255, 0.16);
}


/* CLOSE BUTTON */

.project-close {
    position: absolute;

    top: 12px;
    right: 18px;

    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: none;

    background: transparent;

    color: #5ff6ff;

    font-size: 32px;
    line-height: 1;

    cursor: pointer;

    text-shadow:
        0 0 10px #00eaff;
}

.project-close:hover {
    color: #ff4df3;

    text-shadow:
        0 0 12px #ff00e6;
}


/* TITLE */

.project-panel h2 {
    margin-bottom: 10px;

    color: white;

    font-size: 32px;
}

.project-intro {
    margin-bottom: 28px;

    color: #9eb3c9;

    line-height: 1.6;
}


/* =========================================
   FORM GROUPS
========================================= */

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

.form-group label {
    display: block;

    margin-bottom: 7px;

    color: #5ff6ff;

    font-size: 12px;
    font-weight: bold;

    letter-spacing: 1px;
}


/* INPUTS */

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;

    padding: 13px 14px;

    border: 1px solid rgba(77, 239, 255, 0.32);

    border-radius: 8px;

    outline: none;

    color: white;

    background:
        rgba(0, 10, 25, 0.88);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #4defff;

    box-shadow:
        0 0 15px rgba(77, 239, 255, 0.25);
}


/* DROPDOWN */

.form-group select {
    cursor: pointer;
}

.form-group select option {
    color: white;

    background: #061121;
}


/* TEXT AREA */

.form-group textarea {
    min-height: 120px;

    resize: vertical;
}


/* =========================================
   SEND MESSAGE BUTTON
========================================= */

.submit-project {
    width: 100%;

    min-height: 54px;

    padding: 14px 20px;

    margin-top: 5px;

    border: 1px solid #4defff;

    border-radius: 8px;

    color: white;

    background:
        linear-gradient(
            90deg,
            rgba(0, 229, 255, 0.22),
            rgba(230, 0, 255, 0.22)
        );

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 1px;

    cursor: pointer;

    box-shadow:
        0 0 20px rgba(0, 229, 255, 0.15);

    transition: 0.2s ease;
}

.submit-project:hover {
    transform: translateY(-2px);

    box-shadow:
        0 0 30px rgba(0, 229, 255, 0.35),
        0 0 35px rgba(230, 0, 255, 0.15);
}


/* MESSAGE STATUS */

.form-status {
    min-height: 20px;

    margin-top: 15px;

    color: #5ff6ff;

    text-align: center;

    font-size: 13px;
}


/* =========================================
   DIRECT PHONE CONTACT
========================================= */

.direct-contact {
    margin-top: 25px;

    padding-top: 20px;

    text-align: center;

    border-top:
        1px solid rgba(77, 239, 255, 0.15);
}

.direct-contact p {
    margin-bottom: 8px;

    color: #8399ad;

    font-size: 12px;
}

.direct-contact a {
    color: #5ff6ff;

    font-size: 18px;

    font-weight: bold;

    text-decoration: none;

    text-shadow:
        0 0 10px rgba(0, 229, 255, 0.25);
}


/* =========================================
   MOBILE PROJECT FORM
========================================= */

@media (max-width: 600px) {

    .project-modal {
        padding: 12px;
    }

    .project-panel {
        width: 96vw;

        max-height: 92vh;

        padding:
            36px 20px 25px;

        border-radius: 16px;
    }

    .project-panel h2 {
        font-size: 26px;
    }

    .project-intro {
        font-size: 14px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px;
    }

}
/* =========================================
   ADMIN STATUS + REPLY CONTROLS
========================================= */

.message-status-control {
    margin-bottom: 18px;
}

.message-status-control label {
    display: block;

    margin-bottom: 7px;

    color: #6befff;

    font-size: 10px;
    font-weight: bold;

    letter-spacing: 1.5px;
}

.status-select {
    width: 100%;

    padding: 12px;

    color: white;

    border:
        1px solid rgba(
            77,
            239,
            255,
            0.35
        );

    border-radius: 7px;

    background:
        rgba(
            0,
            10,
            25,
            0.9
        );

    outline: none;
}

.status-select option {
    color: white;
    background: #061121;
}


.reply-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 16px;
}


.reply-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 95px;

    padding: 10px 14px;

    color: #5ff6ff;

    text-decoration: none;

    font-size: 11px;
    font-weight: bold;

    letter-spacing: 1px;

    border:
        1px solid rgba(
            77,
            239,
            255,
            0.55
        );

    border-radius: 7px;

    background:
        rgba(
            0,
            229,
            255,
            0.06
        );

    transition: 0.2s ease;
}


.reply-button:hover {
    color: white;

    border-color: #ff4df3;

    box-shadow:
        0 0 18px
        rgba(
            77,
            239,
            255,
            0.18
        );
}
/* =========================================
   WEBNANZ ADMIN NAVIGATION
========================================= */

.admin-nav {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 25px;

    padding: 8px;

    border:
        1px solid rgba(
            77,
            239,
            255,
            0.18
        );

    border-radius: 12px;

    background:
        rgba(
            1,
            10,
            24,
            0.7
        );
}


.admin-nav-button {
    display: flex;
    align-items: center;

    gap: 8px;

    padding: 11px 16px;

    border:
        1px solid transparent;

    border-radius: 8px;

    color: #859bae;

    background: transparent;

    font-size: 11px;
    font-weight: bold;

    letter-spacing: 1px;

    cursor: pointer;

    transition: 0.2s ease;
}


.admin-nav-button:hover {
    color: #5ff6ff;

    border-color:
        rgba(
            77,
            239,
            255,
            0.25
        );
}


.admin-nav-button.active {
    color: white;

    border-color: #4defff;

    background:
        linear-gradient(
            90deg,
            rgba(
                0,
                229,
                255,
                0.12
            ),
            rgba(
                229,
                0,
                255,
                0.08
            )
        );

    box-shadow:
        0 0 18px
        rgba(
            0,
            229,
            255,
            0.12
        );
}


.admin-nav-button span {
    min-width: 22px;
    height: 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 6px;

    border-radius: 100px;

    color: #04101a;

    background: #5ff6ff;

    font-size: 10px;
}


/* =========================================
   FOUR DASHBOARD STATS
========================================= */

.admin-summary {
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );
}


/* =========================================
   PRIVATE STAFF NOTES
========================================= */

.private-notes-section {
    margin: 20px 0;

    padding: 16px;

    border:
        1px solid rgba(
            255,
            77,
            243,
            0.20
        );

    border-radius: 10px;

    background:
        rgba(
            229,
            0,
            255,
            0.025
        );
}


.private-notes-section label {
    display: block;

    margin-bottom: 8px;

    color: #ff70ef;

    font-size: 10px;
    font-weight: bold;

    letter-spacing: 1.5px;
}


.private-notes {
    width: 100%;

    min-height: 95px;

    padding: 12px;

    color: white;

    border:
        1px solid rgba(
            255,
            77,
            243,
            0.25
        );

    border-radius: 7px;

    outline: none;

    resize: vertical;

    background:
        rgba(
            0,
            7,
            20,
            0.88
        );

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


.private-notes:focus {
    border-color: #ff4df3;

    box-shadow:
        0 0 12px
        rgba(
            255,
            77,
            243,
            0.15
        );
}


.save-notes-button {
    margin-top: 10px;

    padding: 9px 14px;

    color: #ff7bf2;

    border:
        1px solid
        rgba(
            255,
            77,
            243,
            0.55
        );

    border-radius: 7px;

    background:
        rgba(
            229,
            0,
            255,
            0.06
        );

    font-size: 10px;
    font-weight: bold;

    letter-spacing: 1px;

    cursor: pointer;
}


.notes-status {
    margin-left: 10px;

    color: #5ff6ff;

    font-size: 11px;
}


/* =========================================
   MOBILE ADMIN
========================================= */

@media (max-width: 800px) {

    .admin-summary {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 600px) {

    .admin-nav {
        display: grid;

        grid-template-columns:
            1fr 1fr;
    }


    .admin-nav-button {
        justify-content: center;

        padding: 10px 8px;

        font-size: 9px;
    }


    .admin-summary {
        grid-template-columns:
            1fr 1fr;
    }

}
/* =========================================
   VIEW PROJECT BUTTON
========================================= */

.view-project-button {
    width: 100%;

    margin-top: 18px;

    padding: 13px;

    color: #5ff6ff;

    border:
        1px solid rgba(
            77,
            239,
            255,
            0.55
        );

    border-radius: 8px;

    background:
        linear-gradient(
            90deg,
            rgba(0, 229, 255, 0.08),
            rgba(229, 0, 255, 0.06)
        );

    font-size: 11px;

    font-weight: bold;

    letter-spacing: 1.5px;

    cursor: pointer;
}


.view-project-button:hover {
    color: white;

    box-shadow:
        0 0 20px
        rgba(
            0,
            229,
            255,
            0.20
        );
}


/* =========================================
   PROJECT PROFILE MODAL
========================================= */

.project-profile-modal {
    display: none;

    position: fixed;

    inset: 0;

    z-index: 20000;

    align-items: center;
    justify-content: center;

    padding: 20px;
}


.project-profile-modal.active {
    display: flex;
}


.project-profile-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(
            0,
            2,
            15,
            0.94
        );

    backdrop-filter:
        blur(12px);
}


.project-profile-panel {
    position: relative;

    z-index: 2;

    width:
        min(
            95vw,
            850px
        );

    max-height: 92vh;

    overflow-y: auto;

    padding: 38px;

    color: white;

    border:
        1px solid
        rgba(
            77,
            239,
            255,
            0.65
        );

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(
                3,
                18,
                35,
                0.99
            ),
            rgba(
                20,
                5,
                40,
                0.99
            )
        );

    box-shadow:
        0 0 50px
        rgba(
            0,
            229,
            255,
            0.22
        );
}


/* CLOSE */

.project-profile-close {
    position: absolute;

    top: 12px;
    right: 18px;

    border: none;

    background: transparent;

    color: #5ff6ff;

    font-size: 32px;

    cursor: pointer;
}


/* PROFILE HEADER */

.project-profile-top {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 30px;
}


.project-profile-top h2 {
    margin-top: 4px;

    font-size:
        clamp(
            28px,
            5vw,
            42px
        );
}


.profile-service {
    margin-top: 6px;

    color: #5ff6ff;
}


.profile-status-badge {
    padding: 8px 12px;

    color: #ff6cf3;

    border:
        1px solid
        rgba(
            255,
            77,
            243,
            0.4
        );

    border-radius: 100px;

    font-size: 10px;

    font-weight: bold;

    letter-spacing: 1px;
}


/* PROFILE SECTION */

.profile-section {
    margin-bottom: 24px;

    padding: 20px;

    border:
        1px solid
        rgba(
            77,
            239,
            255,
            0.13
        );

    border-radius: 12px;

    background:
        rgba(
            0,
            10,
            24,
            0.55
        );
}


.profile-section h3 {
    margin-bottom: 16px;

    color: white;

    font-size: 17px;
}


/* PROFILE GRID */

.profile-data-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap: 12px;
}


.profile-data-grid div {
    padding: 12px;

    border-left:
        2px solid #43eaff;

    background:
        rgba(
            0,
            229,
            255,
            0.035
        );
}


.profile-data-grid small {
    display: block;

    margin-bottom: 5px;

    color: #7890a5;

    font-size: 9px;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.profile-data-grid span {
    color: white;

    word-break: break-word;
}


/* ORIGINAL MESSAGE */

.profile-message {
    padding: 16px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.05
        );

    border-radius: 8px;

    background:
        rgba(
            0,
            0,
            0,
            0.18
        );
}


.profile-message p {
    line-height: 1.7;

    color: #d5e6f0;

    white-space: pre-wrap;
}


/* STATUS SELECT */

#profileStatusSelect {
    width: 100%;

    padding: 13px;

    color: white;

    border:
        1px solid
        rgba(
            77,
            239,
            255,
            0.35
        );

    border-radius: 7px;

    background:
        rgba(
            0,
            9,
            23,
            0.9
        );
}


/* NOTES */

#profilePrivateNotes {
    width: 100%;

    padding: 14px;

    color: white;

    border:
        1px solid
        rgba(
            255,
            77,
            243,
            0.28
        );

    border-radius: 8px;

    outline: none;

    resize: vertical;

    background:
        rgba(
            0,
            7,
            20,
            0.9
        );

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


.profile-note-actions {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 12px;
}


.profile-save-button {
    padding: 10px 15px;

    color: #ff7bf2;

    border:
        1px solid
        rgba(
            255,
            77,
            243,
            0.55
        );

    border-radius: 7px;

    background:
        rgba(
            229,
            0,
            255,
            0.06
        );

    cursor: pointer;
}


#profileNotesStatus {
    color: #5ff6ff;

    font-size: 11px;
}


/* CONTACT ACTIONS */

.profile-contact-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 25px;
}


.profile-contact-button {
    min-width: 110px;

    padding: 11px 16px;

    color: #5ff6ff;

    text-align: center;

    text-decoration: none;

    border:
        1px solid
        rgba(
            77,
            239,
            255,
            0.55
        );

    border-radius: 7px;

    background:
        rgba(
            0,
            229,
            255,
            0.06
        );
}


/* DELETE */

.profile-danger-zone {
    margin-top: 30px;

    padding-top: 20px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.06
        );
}


/* MOBILE */

@media (max-width: 650px) {

    .project-profile-modal {
        padding: 10px;
    }


    .project-profile-panel {
        width: 97vw;

        padding:
            34px 18px 24px;
    }


    .project-profile-top {
        flex-direction: column;
    }


    .profile-data-grid {
        grid-template-columns:
            1fr;
    }


    .profile-contact-actions {
        display: grid;

        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }


    .profile-contact-button {
        min-width: 0;
    }

}
/* =====================================================
   WEBNANZ - PROJECT FINANCIALS
===================================================== */

.financial-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
    margin-bottom: 20px;
}

.financial-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.financial-field label,
.financial-notes-field label {
    display: block;
    color: #5ff6ff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.financial-field input,
.financial-field select,
.financial-notes-field textarea {
    width: 100%;
    box-sizing: border-box;

    background: #020b1c;
    color: #ffffff;

    border: 1px solid rgba(77, 239, 255, 0.45);
    border-radius: 7px;

    padding: 13px 14px;

    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


/* FOCUS EFFECT */

.financial-field input:focus,
.financial-field select:focus,
.financial-notes-field textarea:focus {
    border-color: #5ff6ff;

    box-shadow:
        0 0 0 1px #5ff6ff,
        0 0 15px rgba(95, 246, 255, 0.18);
}


/* SELECT MENU */

.financial-field select {
    cursor: pointer;
}

.financial-field select option {
    background: #020b1c;
    color: #ffffff;
}


/* READ-ONLY BALANCE */

#profileBalanceDue {
    color: #5ff6ff;

    background:
        linear-gradient(
            135deg,
            rgba(0, 229, 255, 0.08),
            rgba(167, 60, 255, 0.05)
        );

    font-weight: 700;
}


/* PAYMENT NOTES */

.financial-notes-field {
    margin-top: 8px;
    margin-bottom: 16px;
}

.financial-notes-field textarea {
    display: block;

    min-height: 110px;

    margin-top: 9px;

    resize: vertical;
}


/* SAVE FINANCIALS BUTTON */

#saveFinancialsButton {
    background:
        rgba(255, 45, 221, 0.08);

    color: #ff5be7;

    border:
        1px solid rgba(255, 45, 221, 0.65);

    border-radius: 6px;

    padding: 11px 18px;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.8px;

    cursor: pointer;

    transition: 0.2s ease;
}

#saveFinancialsButton:hover {
    background:
        rgba(255, 45, 221, 0.16);

    box-shadow:
        0 0 18px rgba(255, 45, 221, 0.18);
}


/* SAVED MESSAGE */

#financialStatus {
    display: inline-block;

    margin-left: 12px;

    color: #5ff6ff;

    font-size: 12px;
    font-weight: 700;
}


/* FINANCIAL SECTION HEADING */

.profile-section h3 {
    color: #ffffff;

    margin-top: 0;
    margin-bottom: 12px;
}


/* MOBILE */

@media (max-width: 700px) {

    .financial-grid {
        grid-template-columns: 1fr;
    }

}
/* =========================================
   WEBNANZ SERVICE LINE ITEMS
========================================= */

.line-items-section {
    margin-top: 18px;
    margin-bottom: 26px;
    padding: 18px;

    border: 1px solid rgba(77, 239, 255, 0.18);
    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            rgba(0, 229, 255, 0.035),
            rgba(229, 0, 255, 0.025)
        );
}


.line-items-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 16px;
}


.line-items-heading h4 {
    margin: 4px 0 0;

    color: #ffffff;

    font-size: 15px;
}


.add-line-item-button {
    padding: 10px 14px;

    color: #5ff6ff;

    border: 1px solid rgba(77, 239, 255, 0.55);
    border-radius: 7px;

    background:
        rgba(0, 229, 255, 0.06);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1px;

    cursor: pointer;

    transition: 0.2s ease;
}


.add-line-item-button:hover {
    color: #ffffff;

    border-color: #5ff6ff;

    box-shadow:
        0 0 16px rgba(77, 239, 255, 0.16);
}


/* SERVICE ROW */

.line-item-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        150px
        42px;

    gap: 10px;

    margin-bottom: 10px;
}


/* SERVICE DESCRIPTION + PRICE */

.line-item-description,
.line-item-price {
    width: 100%;

    box-sizing: border-box;

    padding: 12px 13px;

    color: #ffffff;

    border: 1px solid rgba(77, 239, 255, 0.35);
    border-radius: 7px;

    outline: none;

    background: #020b1c;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;

    transition: 0.2s ease;
}


.line-item-description:focus,
.line-item-price:focus {
    border-color: #5ff6ff;

    box-shadow:
        0 0 0 1px #5ff6ff,
        0 0 12px rgba(77, 239, 255, 0.14);
}


.line-item-description::placeholder,
.line-item-price::placeholder {
    color: #6f8094;
}


/* REMOVE SERVICE */

.remove-line-item {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;

    border: 1px solid rgba(255, 78, 143, 0.55);
    border-radius: 7px;

    color: #ff6d9e;

    background:
        rgba(255, 78, 143, 0.06);

    font-size: 20px;

    cursor: pointer;

    transition: 0.2s ease;
}


.remove-line-item:hover {
    color: #ffffff;

    border-color: #ff4f91;

    background:
        rgba(255, 78, 143, 0.14);

    box-shadow:
        0 0 14px rgba(255, 78, 143, 0.14);
}


/* QUOTED PRICE LOOKS LIKE CALCULATED FIELD */

#profileQuotedPrice {
    color: #5ff6ff;

    font-weight: 700;

    background:
        linear-gradient(
            135deg,
            rgba(0, 229, 255, 0.08),
            rgba(170, 60, 255, 0.05)
        );
}


/* MOBILE */

@media (max-width: 650px) {

    .line-items-heading {
        align-items: flex-start;
        flex-direction: column;
    }


    .add-line-item-button {
        width: 100%;
    }


    .line-item-row {
        grid-template-columns:
            minmax(0, 1fr)
            105px
            40px;
    }

}
/* =========================================
   WEBNANZ LANGUAGE SWITCH
========================================= */

.language-switch {
    position: fixed !important;
    top: 18px !important;
    right: 18px !important;
    z-index: 999999 !important;

    display: flex !important;
    align-items: center;
    gap: 5px;

    padding: 5px;

    background: rgba(4, 8, 20, 0.92);

    border: 1px solid #00eaff;
    border-radius: 30px;

    box-shadow:
        0 0 10px rgba(0, 234, 255, 0.7),
        0 0 20px rgba(211, 61, 255, 0.35);
}

.language-button {
    display: block !important;
    min-width: 46px;
    padding: 9px 12px;

    border: none;
    border-radius: 22px;

    background: transparent;
    color: white;

    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 800;

    cursor: pointer;

    position: relative;
    z-index: 1000000;
}

.language-button.active {
    color: #050816;

    background: linear-gradient(
        135deg,
        #00eaff,
        #b83cff,
        #ff4bd8
    );

    box-shadow:
        0 0 12px rgba(0, 234, 255, 0.8);
}

.language-button:hover {
    transform: scale(1.05);
}


/* =========================================
   MOBILE STAFF LOGIN FIX
========================================= */

@media (max-width: 768px) {

    .staff-login-link {
        position: relative !important;
        display: block !important;

        margin-top: 24px !important;
        margin-bottom: 28px !important;

        bottom: auto !important;
        top: auto !important;

        z-index: 50 !important;
    }

    .direct-contact {
        margin-top: 20px !important;
        padding-bottom: 30px !important;
    }

}
/* =========================================
   WEBNANZ CLICK FIX
========================================= */

.background-image {
    pointer-events: none !important;
}

.hotspot {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    z-index: 100 !important;
}

.start-project,
.service,
.process,
.contact {
    pointer-events: auto !important;
}
/* =========================================================
   WEBNANZ - FINAL MOBILE BUTTON + LANGUAGE SWITCH FIX
   PASTE THIS AT THE VERY BOTTOM OF style.css
========================================================= */


/* =========================================================
   BACKGROUND MUST NOT BLOCK BUTTONS
========================================================= */

.background-image {
    pointer-events: none !important;
}


/* =========================================================
   ALL INVISIBLE WEBSITE BUTTONS
========================================================= */

.hotspot {
    pointer-events: auto !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    z-index: 100 !important;
}


/* =========================================================
   START YOUR PROJECT
   Bigger click area + slightly higher
========================================================= */

.start-project {
    top: 40.4% !important;
    left: 5.1% !important;

    width: 38% !important;
    height: 5.4% !important;

    border-radius: 15px !important;

    pointer-events: auto !important;
}


/* =========================================================
   SERVICE CARDS
   Moves click area UP and makes it taller
========================================================= */

.service {
    top: 64.8% !important;

    height: 13.8% !important;

    border-radius: 15px !important;

    pointer-events: auto !important;
}


/* WEB DESIGN */

.web-design {
    left: 2.5% !important;
    width: 15% !important;
}


/* WEB DEVELOPMENT */

.web-development {
    left: 18.4% !important;
    width: 15% !important;
}


/* E-COMMERCE */

.ecommerce {
    left: 34.3% !important;
    width: 15% !important;
}


/* MOBILE EXPERIENCES */

.mobile-experiences {
    left: 50.2% !important;
    width: 15% !important;
}


/* SEO & PERFORMANCE */

.seo {
    left: 66.1% !important;
    width: 15% !important;
}


/* MAINTENANCE & SUPPORT */

.maintenance {
    left: 82% !important;
    width: 15% !important;
}


/* =========================================================
   PROCESS BUTTONS
   CONSULT / DESIGN / BUILD / LAUNCH
========================================================= */

.process {
    top: 81.2% !important;

    width: 15% !important;
    height: 9.5% !important;

    border-radius: 50% !important;

    pointer-events: auto !important;
}


/* CONSULT */

.consult {
    left: 7% !important;
}


/* DESIGN */

.design {
    left: 27% !important;
}


/* BUILD */

.build {
    left: 49% !important;
}


/* LAUNCH */

.launch {
    left: 72% !important;
}


/* =========================================================
   CONTACT BUTTONS
========================================================= */

.contact {
    pointer-events: auto !important;
}


/* =========================================================
   EN / ES LANGUAGE SELECTOR
========================================================= */

.language-switch {

    position: fixed !important;

    top: 16px !important;

    /*
       IMPORTANT:
       Do NOT force the switch to stay on the right.
       JavaScript controls the LEFT position when dragged.
    */

    right: auto !important;

    z-index: 999999 !important;

    display: flex !important;

    align-items: center !important;

    gap: 5px !important;

    padding: 5px !important;

    border:
        1px solid
        rgba(
            0,
            238,
            255,
            0.65
        ) !important;

    border-radius: 999px !important;

    background:
        rgba(
            5,
            8,
            24,
            0.92
        ) !important;

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    box-shadow:

        0 0 12px
        rgba(
            0,
            238,
            255,
            0.35
        ),

        0 0 22px
        rgba(
            204,
            0,
            255,
            0.18
        );
}


/* =========================================================
   EN / ES BUTTONS
========================================================= */

.language-button {

    min-width: 44px;

    border: 0;

    border-radius: 999px;

    padding: 8px 11px;

    cursor: pointer;

    font: inherit;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.08em;

    color: #dffcff;

    background: transparent;

    pointer-events: auto !important;
}


/* ACTIVE LANGUAGE */

.language-button.active {

    color: #050818;

    background:

        linear-gradient(
            135deg,
            #00f0ff,
            #d946ef
        );

    box-shadow:

        0 0 12px
        rgba(
            0,
            240,
            255,
            0.55
        );
}


/* =========================================================
   ↔ MOVE BUTTON
========================================================= */

.language-move-button {

    width: 32px !important;

    height: 32px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    flex-shrink: 0;

    padding: 0 !important;

    border:

        1px solid
        rgba(
            217,
            70,
            239,
            0.55
        ) !important;

    border-radius: 50% !important;

    background:

        rgba(
            255,
            255,
            255,
            0.05
        ) !important;

    color: white !important;

    font-size: 17px !important;

    line-height: 1 !important;

    cursor: grab !important;

    /*
       VERY IMPORTANT FOR PHONE DRAGGING
    */

    touch-action: none !important;

    user-select: none !important;

    -webkit-user-select: none !important;

    pointer-events: auto !important;

    position: relative;

    z-index: 1000000;
}


.language-move-button:active {

    cursor: grabbing !important;

}


/* =========================================================
   WHEN JAVASCRIPT MOVES THE SWITCH
========================================================= */

.language-switch[style*="left"] {

    right: auto !important;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {


    .language-switch {

        top: 10px !important;

    }


    .language-button {

        min-width: 39px;

        padding: 7px 9px;

        font-size: 11px;

    }


    .language-move-button {

        width: 30px !important;

        height: 30px !important;

        font-size: 16px !important;

    }


}


/* =========================================================
   EXTRA SMALL PHONES
========================================================= */

@media (max-width: 480px) {


    .language-switch {

        top: 8px !important;

    }


    .language-button {

        min-width: 36px;

        padding: 6px 8px;

        font-size: 10px;

    }


    .language-move-button {

        width: 28px !important;

        height: 28px !important;

        font-size: 15px !important;

    }


}
/* =========================================
   MOVE LANGUAGE SWITCH AWAY FROM PROJECT X
========================================= */

body.project-open .language-switch {
    left: 10px !important;
    right: auto !important;
}
/* =========================================
   MOVE LANGUAGE SWITCH AWAY FROM X
========================================= */

body.project-open .language-switch {
    left: 10px !important;
    right: auto !important;
}
/* =========================================================
   WEBNANZ FINAL MOBILE ALIGNMENT FIX
========================================================= */


/* ---------------------------------------------------------
   WHEN PROJECT FORM IS OPEN:
   FORCE EN / ES TO THE LEFT
--------------------------------------------------------- */

body:has(.project-modal.active) .language-switch {
    left: 10px !important;
    right: auto !important;
}


/* Backup for the class added by contact.js */

body.project-open .language-switch {
    left: 10px !important;
    right: auto !important;
}


/* ---------------------------------------------------------
   KEEP THE PROJECT FORM X ABOVE EVERYTHING
--------------------------------------------------------- */

.project-close {
    z-index: 2000000 !important;
    pointer-events: auto !important;
}


/* ---------------------------------------------------------
   START YOUR PROJECT CLICK AREA
   Make the whole visible button clickable
--------------------------------------------------------- */

.start-project {
    top: 39.2% !important;
    left: 4.5% !important;

    width: 40% !important;
    height: 7% !important;

    pointer-events: auto !important;
    z-index: 200 !important;
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 600px) {

    body:has(.project-modal.active) .language-switch,
    body.project-open .language-switch {
        left: 8px !important;
        right: auto !important;
        top: 8px !important;
    }

    .project-close {
        top: 10px !important;
        right: 12px !important;
    }

}
/* =========================================================
   WEBNANZ FINAL BUTTON + LANGUAGE SWITCH FIX
========================================================= */


/* ---------------------------------------------------------
   BACKGROUND MUST NEVER BLOCK HOTSPOTS
--------------------------------------------------------- */

.background-image {
    pointer-events: none !important;
}


/* ---------------------------------------------------------
   ALL HOTSPOTS CLICKABLE
--------------------------------------------------------- */

.hotspot {
    pointer-events: auto !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    z-index: 200 !important;
}


/* ---------------------------------------------------------
   START YOUR PROJECT
   Move clickable area upward and make it taller
--------------------------------------------------------- */

.start-project {
    top: 39.2% !important;
    left: 4.2% !important;

    width: 40% !important;
    height: 7.2% !important;

    border-radius: 16px !important;
}


/* ---------------------------------------------------------
   SERVICE CARDS
   Make the middle of every card clickable
--------------------------------------------------------- */

.service {
    top: 63.8% !important;
    height: 15.2% !important;

    border-radius: 16px !important;
}

.web-design {
    left: 2.2% !important;
    width: 15.4% !important;
}

.web-development {
    left: 18.1% !important;
    width: 15.4% !important;
}

.ecommerce {
    left: 34% !important;
    width: 15.4% !important;
}

.mobile-experiences {
    left: 49.9% !important;
    width: 15.4% !important;
}

.seo {
    left: 65.8% !important;
    width: 15.4% !important;
}

.maintenance {
    left: 81.7% !important;
    width: 15.4% !important;
}


/* ---------------------------------------------------------
   PROCESS BUTTONS
--------------------------------------------------------- */

.process {
    top: 80.4% !important;

    width: 16% !important;
    height: 10.5% !important;

    border-radius: 50% !important;
}

.consult {
    left: 6.5% !important;
}

.design {
    left: 26.5% !important;
}

.build {
    left: 48.5% !important;
}

.launch {
    left: 71.5% !important;
}


/* ---------------------------------------------------------
   CONTACT BUTTONS
--------------------------------------------------------- */

.contact {
    z-index: 200 !important;
    pointer-events: auto !important;
}


/* ---------------------------------------------------------
   KEEP X BUTTONS ABOVE EVERYTHING
--------------------------------------------------------- */

.close-modal,
.project-close {
    z-index: 3000000 !important;
    pointer-events: auto !important;
}


/* ---------------------------------------------------------
   MOVE LANGUAGE SWITCH LEFT WHEN INFO POPUP IS OPEN
--------------------------------------------------------- */

body:has(.info-modal.active) .language-switch {
    left: 10px !important;
    right: auto !important;
}


/* ---------------------------------------------------------
   MOVE LANGUAGE SWITCH LEFT WHEN PROJECT FORM IS OPEN
--------------------------------------------------------- */

body:has(.project-modal.active) .language-switch,
body.project-open .language-switch {
    left: 10px !important;
    right: auto !important;
}


/* ---------------------------------------------------------
   LANGUAGE SWITCH ALWAYS ABOVE SITE,
   BUT BELOW THE X BUTTON
--------------------------------------------------------- */

.language-switch {
    z-index: 2000000 !important;
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 600px) {

    body:has(.info-modal.active) .language-switch,
    body:has(.project-modal.active) .language-switch,
    body.project-open .language-switch {

        left: 8px !important;
        right: auto !important;
        top: 8px !important;

    }


    .close-modal,
    .project-close {

        top: 8px !important;
        right: 10px !important;

        z-index: 3000000 !important;

    }


    .start-project {
        top: 39% !important;
        left: 4% !important;

        width: 41% !important;
        height: 7.5% !important;
    }


    .service {
        top: 63.5% !important;
        height: 15.8% !important;
    }


    .process {
        top: 80.1% !important;
        height: 11% !important;
    }

}
/* =========================================================
   MOBILE POPUP FIX — NEVER COVER THE X
========================================================= */

@media (max-width: 600px) {

    /* Hide language selector only while a popup/form is open */
    body:has(.info-modal.active) .language-switch,
    body:has(.project-modal.active) .language-switch,
    body.project-open .language-switch {
        display: none !important;
    }

    /* Keep close X fully clickable */
    .close-modal,
    .project-close {
        display: flex !important;
        position: absolute !important;

        top: 10px !important;
        right: 12px !important;

        z-index: 9999999 !important;
        pointer-events: auto !important;
    }

}
/* =========================================================
   FIX EN / ES BLACK STRETCHING BAR
========================================================= */

.language-switch {
    width: max-content !important;
    min-width: max-content !important;
    max-width: max-content !important;

    display: inline-flex !important;
    flex: 0 0 auto !important;

    right: auto !important;

    overflow: visible !important;
}


/* KEEP EACH LANGUAGE BUTTON COMPACT */

.language-button,
.language-move-button {
    flex: 0 0 auto !important;
}


/* KEEP CLOSE X ABOVE LANGUAGE SWITCH */

.close-modal,
.project-close {
    position: absolute !important;
    z-index: 9999999 !important;
    pointer-events: auto !important;
}


/* MOBILE */

@media (max-width: 600px) {

    .language-switch {
        width: max-content !important;
        min-width: max-content !important;
        max-width: max-content !important;

        right: auto !important;
    }

}
/* =========================================================
   MOBILE ONLY — STOP LANGUAGE SWITCH BLACK BAR
========================================================= */

@media (max-width: 600px) {

    .language-switch {
        position: fixed !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        display: inline-flex !important;
        flex: none !important;

        left: auto;
        right: auto !important;

        padding: 4px !important;

        overflow: visible !important;

        background:
            rgba(5, 8, 24, 0.92) !important;

        border-radius: 999px !important;
    }

    .language-switch::before,
    .language-switch::after {
        display: none !important;
        content: none !important;
    }

    .language-button,
    .language-move-button {
        flex: 0 0 auto !important;
        width: auto;
    }

    .language-move-button {
        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
    }

}
/* =========================================================
   WEBNANZ MOBILE HOTSPOT ALIGNMENT FIX
   Desktop stays unchanged
========================================================= */

@media (max-width: 600px) {

    /* START YOUR PROJECT */
    .start-project {
        top: 37.8% !important;
        left: 4.2% !important;

        width: 40.5% !important;
        height: 6.8% !important;
    }


    /* ALL 6 SERVICE CARDS */
    .service {
        top: 61.8% !important;
        height: 14.5% !important;
    }


    .web-design {
        left: 2.2% !important;
        width: 15.4% !important;
    }

    .web-development {
        left: 18.1% !important;
        width: 15.4% !important;
    }

    .ecommerce {
        left: 34% !important;
        width: 15.4% !important;
    }

    .mobile-experiences {
        left: 49.9% !important;
        width: 15.4% !important;
    }

    .seo {
        left: 65.8% !important;
        width: 15.4% !important;
    }

    .maintenance {
        left: 81.7% !important;
        width: 15.4% !important;
    }


    /* PROCESS BUTTONS */
    .process {
        top: 78.5% !important;

        width: 16% !important;
        height: 9.8% !important;
    }

    .consult {
        left: 6.5% !important;
    }

    .design {
        left: 26.5% !important;
    }

    .build {
        left: 48.5% !important;
    }

    .launch {
        left: 71.5% !important;
    }


    /* CONTACT BUTTONS */
    .contact {
        top: 94.2% !important;
        height: 3.8% !important;
    }

}
/* =========================================
   FIX LET'S TALK BUTTON CLICK AREAS
========================================= */

#messageButton,
#phoneButton,
#whatsappButton {
    position: relative !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Make sure decorative image/layers don't steal clicks */
.background-image {
    pointer-events: none !important;
}
/* =========================================
   WEBNANZ CONTACT BUTTON CLICK FIX
========================================= */

.contact {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 5000 !important;
}

/* Keep the background from intercepting clicks */
.background-image {
    pointer-events: none !important;
}

/* Specifically keep the envelope active */
#messageButton {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 6000 !important;
}
/* =========================================================
   WEBNANZ LET'S TALK HOTSPOT FIX
========================================================= */

.contact {
    top: 91.9% !important;
    width: 8.5% !important;
    height: 4.8% !important;

    z-index: 5000 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}


/* WHATSAPP */

.whatsapp {
    left: 64.8% !important;
}


/* PHONE */

.phone {
    left: 74.2% !important;
}


/* EMAIL */

.email {
    left: 83.7% !important;
}


/* BACKGROUND MUST NEVER BLOCK BUTTONS */

.background-image {
    pointer-events: none !important;
}
/* FINAL CONTACT BUTTON POSITION FIX */

#messageButton,
#phoneButton,
#whatsappButton {
    position: absolute !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

#messageButton {
    position: absolute !important;
    top: 89.4% !important;
    left: 83.7% !important;
    width: 8.5% !important;
    height: 4.2% !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}