/*
|--------------------------------------------------------------------------
| Dleelk Auto - Site V10 Core Layout
|--------------------------------------------------------------------------
| This file is the single authority for page width in Site V10.
|--------------------------------------------------------------------------
*/

:root {
    --dleelk-shell-max: 1180px;
    --dleelk-shell-gap: 24px;
}

/*
|--------------------------------------------------------------------------
| Page wrapper
|--------------------------------------------------------------------------
*/

.dleelk-page {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/*
|--------------------------------------------------------------------------
| Standard page shell
|--------------------------------------------------------------------------
*/

.dleelk-shell,
.dleelk-section,
.container,
.container-wide,
.container-narrow,
.account-page,
.auth-page,
.company-profile-shell,
.v4-information-page__container,
.dleelk-offers-page,
.dleelk-offer-detail-page,
.v9-market-shell {
    width: min(
        var(--dleelk-shell-max),
        calc(100% - (var(--dleelk-shell-gap) * 2))
    ) !important;

    max-width: var(--dleelk-shell-max) !important;
    margin-inline: auto !important;
    box-sizing: border-box;
}

/*
|--------------------------------------------------------------------------
| Standard hero
|--------------------------------------------------------------------------
*/

.dleelk-hero {
    width: min(
        var(--dleelk-shell-max),
        calc(100% - (var(--dleelk-shell-gap) * 2))
    ) !important;

    max-width: var(--dleelk-shell-max) !important;
    margin-inline: auto !important;
    box-sizing: border-box;
    overflow: hidden;
}

/*
|--------------------------------------------------------------------------
| Nested legacy container
|--------------------------------------------------------------------------
| Prevents a legacy .container inside a core shell from shrinking twice.
|--------------------------------------------------------------------------
*/

.dleelk-shell > .container,
.dleelk-section > .container,
.dleelk-hero > .container,
.dleelk-shell > .container-wide,
.dleelk-shell > .container-narrow {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
}

/*
|--------------------------------------------------------------------------
| Auth components
|--------------------------------------------------------------------------
| Page width is unified.
| Forms stay intentionally readable.
|--------------------------------------------------------------------------
*/

.auth-page .auth-card,
.auth-page .login-card,
.auth-page .register-card,
.auth-page .register-card.is-company-registration {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/*
|--------------------------------------------------------------------------
| Generic component
|--------------------------------------------------------------------------
*/

.dleelk-card {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {
    :root {
        --dleelk-shell-gap: 18px;
    }
}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {
    :root {
        --dleelk-shell-gap: 12px;
    }
}

/* DLEELK MAIN HERO STANDARD START */

/*
|--------------------------------------------------------------------------
| Unified Main Hero
|--------------------------------------------------------------------------
| Full browser width.
| Same desktop/tablet/mobile height across Site V10.
|--------------------------------------------------------------------------
*/

.dleelk-main-hero {
    position: relative;

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

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

    margin-inline-start: calc(50% - 50vw) !important;
    margin-inline-end: calc(50% - 50vw) !important;

    padding: 48px 24px !important;

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

    box-sizing: border-box;
    overflow: hidden;

    border-radius: 0 !important;

    background:
        radial-gradient(
            circle at center,
            rgba(199, 146, 43, .16),
            transparent 40%
        ),
        linear-gradient(
            135deg,
            #050607,
            #151515
        ) !important;

    color: #fff;
}

/*
| Inner hero content keeps the global content alignment.
*/

.dleelk-main-hero > .dleelk-shell,
.dleelk-main-hero > .home-hero-content {
    position: relative;
    z-index: 2;
}

/*
| Buy & Sell hero content is RTL aligned,
| but the banner itself follows the global standard.
*/

.v9-market-hero.dleelk-main-hero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    box-shadow: none !important;
}

/*
| Tablet
*/

@media (max-width: 900px) {
    .dleelk-main-hero {
        min-height: 300px !important;
        height: 300px;
        padding: 40px 18px !important;
    }
}

/*
| Mobile
*/

@media (max-width: 600px) {
    .dleelk-main-hero {
        min-height: 260px !important;
        height: 260px;
        padding: 30px 16px !important;
    }
}

/* DLEELK MAIN HERO STANDARD END */

/* DLEELK HOME MARKET HERO FIX START */

/*
|--------------------------------------------------------------------------
| Home + Buy/Sell Hero Correction
|--------------------------------------------------------------------------
| Background stays full viewport width.
| Content stays inside the common 1180px shell.
| Hero uses minimum height instead of clipping fixed height.
|--------------------------------------------------------------------------
*/

.home-hero.dleelk-main-hero,
.v9-market-hero.dleelk-main-hero {
    height: auto !important;
    min-height: 320px !important;
}

.dleelk-main-hero__inner {
    width: min(
        var(--dleelk-shell-max),
        calc(100% - (var(--dleelk-shell-gap) * 2))
    ) !important;

    max-width: var(--dleelk-shell-max) !important;

    margin-inline: auto !important;

    box-sizing: border-box;
}

/* Home content stays centered */
.home-hero .dleelk-main-hero__inner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-hero .home-hero-content {
    width: 100%;
    max-width: 900px;
}

/* Buy & Sell content stays aligned within the shared shell */
.v9-market-hero .v9-market-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

/* Tablet */
@media (max-width: 900px) {
    .home-hero.dleelk-main-hero,
    .v9-market-hero.dleelk-main-hero {
        height: auto !important;
        min-height: 300px !important;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .home-hero.dleelk-main-hero,
    .v9-market-hero.dleelk-main-hero {
        height: auto !important;
        min-height: 260px !important;
    }
}

/* DLEELK HOME MARKET HERO FIX END */

/* DLEELK MARKET HERO CENTER START */

.v9-market-hero .v9-market-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
}

.v9-market-hero .v9-market-hero-inner > * {
    margin-inline: auto;
}

.v9-market-hero h1,
.v9-market-hero p {
    text-align: center !important;
}

.v9-market-hero p {
    max-width: 760px;
}

.v9-market-hero-actions {
    justify-content: center !important;
}

/* DLEELK MARKET HERO CENTER END */