:root {
    /* =========================================================
       LPD DRIVING SCHOOL — GLOBAL DESIGN TOKENS
       Logo-derived brand colours
       ========================================================= */

    --lpd-green: #027F2E;
    --lpd-green-dark: #016424;

    --lpd-red: #DC0105;
    --lpd-red-dark: #B90004;

    --lpd-ink: #151515;
    --lpd-muted: #5F6773;

    --lpd-line: #E5E7EB;

    --lpd-surface: #FFFFFF;
    --lpd-surface-soft: #F6F8FA;

    --lpd-dark: #171A1F;

    --lpd-radius-sm: 8px;
    --lpd-radius-md: 14px;
    --lpd-radius-lg: 20px;

    --lpd-shadow-card:
        0 10px 28px rgba(21, 21, 21, 0.08);

    --lpd-space-xs: 8px;
    --lpd-space-sm: 16px;
    --lpd-space-md: 24px;
    --lpd-space-lg: 40px;
    --lpd-space-xl: 64px;
    --lpd-space-2xl: 96px;

    --lpd-content-width: 1180px;
}


/* =========================================================
   GLOBAL BASE
   ========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    color: var(--lpd-ink);
    background: var(--lpd-surface);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;
}


/* =========================================================
   REUSABLE ELEMENTOR CLASSES
   ========================================================= */

.lpd-section {
    padding-block: clamp(48px, 6vw, 88px);
}

.lpd-section--soft {
    background: var(--lpd-surface-soft);
}

.lpd-card {
    background: var(--lpd-surface);

    border: 1px solid var(--lpd-line);

    border-radius: var(--lpd-radius-md);

    box-shadow: var(--lpd-shadow-card);
}

.lpd-max-copy {
    max-width: 680px;
}

.lpd-accent-green {
    color: var(--lpd-green);
}

.lpd-accent-red {
    color: var(--lpd-red);
}

.lpd-eyebrow {
    color: var(--lpd-green);

    font-size: 0.875rem;
    font-weight: 800;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


/* =========================================================
   PRIMARY RED BUTTON
   Elementor class:
   lpd-btn-primary
   ========================================================= */

.lpd-btn-primary .elementor-button {
    min-height: 48px;

    background: var(--lpd-red);

    border-radius: var(--lpd-radius-sm);

    font-weight: 700;

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

.lpd-btn-primary .elementor-button:hover,
.lpd-btn-primary .elementor-button:focus-visible {
    background: var(--lpd-red-dark);

    transform: translateY(-1px);

    box-shadow:
        0 8px 18px rgba(220, 1, 5, 0.18);
}


/* =========================================================
   WHATSAPP / GREEN BUTTON
   Elementor class:
   lpd-btn-whatsapp
   ========================================================= */

.lpd-btn-whatsapp .elementor-button {
    min-height: 48px;

    background: var(--lpd-green);

    border-radius: var(--lpd-radius-sm);

    font-weight: 700;

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

.lpd-btn-whatsapp .elementor-button:hover,
.lpd-btn-whatsapp .elementor-button:focus-visible {
    background: var(--lpd-green-dark);

    transform: translateY(-1px);

    box-shadow:
        0 8px 18px rgba(2, 127, 46, 0.18);
}


/* =========================================================
   FLOATING CONTACT ACTIONS

   Parent Elementor class:
   lpd-mobile-actions

   Desktop = vertical right sidebar
   Tablet  = floating bottom bar
   Mobile  = floating rounded bottom bar
   ========================================================= */

.lpd-mobile-actions {
    display: flex !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 0 !important;

    box-sizing: border-box;

    background: #FFFFFF;

    visibility: visible !important;
    opacity: 1 !important;

    z-index: 99999 !important;

    overflow: hidden;
}


/* =========================================================
   ELEMENTOR INNER WRAPPER SUPPORT

   This makes the component work whether Elementor uses:
   - direct child containers
   - .e-con-inner
   ========================================================= */

.lpd-mobile-actions > .e-con-inner {
    display: flex !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 0 !important;

    box-sizing: border-box;
}


/* =========================================================
   ACTION CHILD CONTAINERS
   ========================================================= */

.lpd-mobile-actions > .e-con,
.lpd-mobile-actions > .e-con-inner > .e-con {
    display: flex !important;

    flex-direction: column !important;

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

    min-width: 0 !important;

    margin: 0 !important;

    text-align: center;

    box-sizing: border-box;
}


/* =========================================================
   ICONS
   Keep your Elementor icon-circle styling
   ========================================================= */

.lpd-mobile-actions .elementor-icon {
    line-height: 1;
}


/* =========================================================
   LABELS
   ========================================================= */

.lpd-mobile-actions .elementor-heading-title,
.lpd-mobile-actions .elementor-icon-box-title,
.lpd-mobile-actions .elementor-button-text,
.lpd-mobile-actions p {
    margin: 0 !important;

    font-weight: 600;

    line-height: 1.1;
}


/* =========================================================
   DESKTOP HOVER
   ========================================================= */

@media (hover: hover) {

    .lpd-mobile-actions > .e-con,
    .lpd-mobile-actions > .e-con-inner > .e-con {
        transition:
            filter 0.2s ease,
            transform 0.2s ease;
    }

    .lpd-mobile-actions > .e-con:hover,
    .lpd-mobile-actions > .e-con-inner > .e-con:hover {
        filter: brightness(0.96);
    }
}


/* =========================================================
   DESKTOP — 1025px+
   Fixed vertical rounded sidebar
   ========================================================= */

@media (min-width: 1025px) {

    .lpd-mobile-actions {
        display: flex !important;

        flex-direction: column !important;
        flex-wrap: nowrap !important;

        position: fixed !important;

        top: 50% !important;
        right: 18px !important;

        bottom: auto !important;
        left: auto !important;

        transform: translateY(-50%) !important;

        width: 92px !important;
        max-width: 92px !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #FFFFFF !important;

        border: 1px solid var(--lpd-line) !important;

        /* Rounded vertical pill */
        border-radius: 46px !important;

        box-shadow:
            0 8px 28px rgba(21, 21, 21, 0.14);

        overflow: hidden !important;

        visibility: visible !important;
        opacity: 1 !important;

        z-index: 99999 !important;
    }


    /* Elementor boxed/container wrapper */

    .lpd-mobile-actions > .e-con-inner {
        display: flex !important;

        flex-direction: column !important;
        flex-wrap: nowrap !important;

        justify-content: flex-start !important;
        align-items: stretch !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        gap: 0 !important;
    }


    /* Each desktop action */

    .lpd-mobile-actions > .e-con,
    .lpd-mobile-actions > .e-con-inner > .e-con {
        flex: 0 0 88px !important;

        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;
        min-height: 88px !important;

        margin: 0 !important;

        padding:
            8px 3px !important;

        gap: 4px !important;

        border-radius: 0 !important;
    }


    /* Subtle separators */

    .lpd-mobile-actions > .e-con:not(:last-child),
    .lpd-mobile-actions > .e-con-inner > .e-con:not(:last-child) {
        border-bottom:
            1px solid rgba(229, 231, 235, 0.9);
    }


    .lpd-mobile-actions .elementor-heading-title,
    .lpd-mobile-actions .elementor-icon-box-title,
    .lpd-mobile-actions .elementor-button-text,
    .lpd-mobile-actions p {
        margin: 0 !important;

        font-size: 11px !important;

        line-height: 1.05 !important;

        font-weight: 600;
    }
}


/* =========================================================
   TABLET — 768px to 1024px
   Rounded floating horizontal bottom bar
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

    .lpd-mobile-actions {
        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

        justify-content: stretch !important;
        align-items: stretch !important;

        position: fixed !important;

        left: 18px !important;
        right: 18px !important;

        bottom: 12px !important;
        top: auto !important;

        transform: none !important;

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

        height: 68px !important;
        min-height: 68px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #FFFFFF !important;

        border: 1px solid var(--lpd-line) !important;

        border-radius: 34px !important;

        box-shadow:
            0 -2px 8px rgba(21, 21, 21, 0.04),
            0 8px 24px rgba(21, 21, 21, 0.12);

        overflow: hidden !important;

        visibility: visible !important;
        opacity: 1 !important;

        z-index: 99999 !important;
    }


    .lpd-mobile-actions > .e-con-inner {
        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

        justify-content: stretch !important;
        align-items: stretch !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 68px !important;

        margin: 0 !important;
        padding: 0 !important;

        gap: 0 !important;
    }


    .lpd-mobile-actions > .e-con,
    .lpd-mobile-actions > .e-con-inner > .e-con {
        flex: 1 1 25% !important;

        width: 25% !important;
        max-width: 25% !important;

        min-width: 0 !important;
        min-height: 68px !important;

        margin: 0 !important;

        padding:
            5px 3px !important;

        gap: 3px !important;

        border-radius: 0 !important;
    }


    .lpd-mobile-actions .elementor-heading-title,
    .lpd-mobile-actions .elementor-icon-box-title,
    .lpd-mobile-actions .elementor-button-text,
    .lpd-mobile-actions p {
        margin: 0 !important;

        font-size: 11px !important;

        line-height: 1.05 !important;
    }


    body {
        padding-bottom: 94px;
    }
}


/* =========================================================
   MOBILE — 767px AND BELOW
   Rounded floating bottom bar
   ========================================================= */

@media (max-width: 767px) {

    .lpd-section {
        padding-block: 44px;
    }


    .lpd-mobile-actions {
        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

        justify-content: stretch !important;
        align-items: stretch !important;

        position: fixed !important;

        left: 12px !important;
        right: 12px !important;

        bottom: 10px !important;
        top: auto !important;

        transform: none !important;

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

        height: 62px !important;
        min-height: 62px !important;

        margin: 0 !important;
        padding: 0 !important;

        gap: 0 !important;

        background: #FFFFFF !important;

        border: 1px solid var(--lpd-line) !important;

        /* Keep the mobile round style you liked */
        border-radius: 31px !important;

        box-shadow:
            0 -2px 8px rgba(21, 21, 21, 0.04),
            0 8px 24px rgba(21, 21, 21, 0.12);

        overflow: hidden !important;

        visibility: visible !important;
        opacity: 1 !important;

        z-index: 99999 !important;
    }


    .lpd-mobile-actions > .e-con-inner {
        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

        justify-content: stretch !important;
        align-items: stretch !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 62px !important;

        margin: 0 !important;
        padding: 0 !important;

        gap: 0 !important;
    }


    .lpd-mobile-actions > .e-con,
    .lpd-mobile-actions > .e-con-inner > .e-con {
        flex: 1 1 25% !important;

        width: 25% !important;
        max-width: 25% !important;

        min-width: 0 !important;
        min-height: 62px !important;

        margin: 0 !important;

        padding:
            4px 2px !important;

        gap: 2px !important;

        border-radius: 0 !important;
    }


    .lpd-mobile-actions .elementor-heading-title,
    .lpd-mobile-actions .elementor-icon-box-title,
    .lpd-mobile-actions .elementor-button-text,
    .lpd-mobile-actions p {
        margin: 0 !important;

        font-size: 11px !important;

        line-height: 1.05 !important;
    }


    body {
        padding-bottom: 84px;
    }
}


/* =========================================================
   VERY SMALL MOBILE — 380px AND BELOW
   ========================================================= */

@media (max-width: 380px) {

    .lpd-mobile-actions {
        left: 8px !important;
        right: 8px !important;

        bottom: 8px !important;

        height: 60px !important;
        min-height: 60px !important;

        border-radius: 30px !important;
    }


    .lpd-mobile-actions > .e-con-inner {
        height: 60px !important;
    }


    .lpd-mobile-actions > .e-con,
    .lpd-mobile-actions > .e-con-inner > .e-con {
        min-height: 60px !important;

        padding:
            3px 1px !important;
    }


    .lpd-mobile-actions .elementor-heading-title,
    .lpd-mobile-actions .elementor-icon-box-title,
    .lpd-mobile-actions .elementor-button-text,
    .lpd-mobile-actions p {
        font-size: 10px !important;
    }


    body {
        padding-bottom: 80px;
    }
}
/* =========================================================
   DESKTOP FLOATING ACTION BAR — COMPACT VERSION
   Tablet and mobile are NOT affected
   ========================================================= */

@media (min-width: 1025px) {

    .lpd-mobile-actions {
        width: 70px !important;
        max-width: 70px !important;

        border-radius: 43px !important;
    }


    /* Elementor inner wrapper */
    .lpd-mobile-actions > .e-con-inner {
        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
    }


    /* Each action */
    .lpd-mobile-actions > .e-con,
    .lpd-mobile-actions > .e-con-inner > .e-con {
        flex: 0 0 68px !important;

        width: 100% !important;
        max-width: 100% !important;

        min-height: 68px !important;

        padding: 5px 2px !important;

        gap: 2px !important;
    }


    /* Action labels */
    .lpd-mobile-actions .elementor-heading-title,
    .lpd-mobile-actions .elementor-icon-box-title,
    .lpd-mobile-actions .elementor-button-text,
    .lpd-mobile-actions p {
        margin: 0 !important;

        font-size: 10.5px !important;
        line-height: 1 !important;

        font-weight: 600;
    }


    /* Keep icons visually balanced */
    .lpd-mobile-actions .elementor-icon {
        margin-bottom: 1px !important;
    }
}