/**
 * DZD Sooq — Global layout structure.
 *
 * Header (viewport peer):
 *   <div class="dzd-header__inner dzd-container">…</div>
 *
 * Panel (must be the same wrapper role — not a nested Elementor width track):
 *   <main class="dzd-panel-page">
 *     <div class="dzd-container">
 *       Panel Navigation + page body
 *     </div>
 *   </main>
 *
 * Do not invent a second Panel width track. Do not “fix” alignment by
 * changing `--dzd-layout-max`.
 */

/* —— Shared page wrapper (Header + Panel) —— */
.dzd-container {
    width: 100%;
    max-width: var(--dzd-layout-max);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
}

@media (max-width: 767px) {
    .dzd-container,
    .dzd-header__inner {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Header keeps its grid class; horizontal box matches `.dzd-container`. */
.dzd-header__inner {
    width: 100%;
    max-width: var(--dzd-layout-max);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    :root,
    .dzd-ui {
        --e-global-grid-width: calc(var(--dzd-layout-max) - (2 * var(--dzd-layout-gutter)));
        --e-global-desktop-padding: var(--dzd-layout-gutter);
    }

    .dzd-container,
    .dzd-header__inner {
        padding-left: var(--dzd-layout-gutter);
        padding-right: var(--dzd-layout-gutter);
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    :root,
    .dzd-ui {
        --dzd-layout-gutter: var(--dzd-layout-gutter-tablet);
    }
}

/**
 * Header mounts on body via wp_body_open.
 * Panel mounts inside Elementor — flatten that parent chain so
 * `.dzd-panel-page > .dzd-container` is a viewport peer of Header’s
 * `.dzd-container` (same containing block), not a nested width track.
 */
.dzd-panel-page {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: var(--dzd-color-page);
    /* Sticky footer: grow inside .dzd-theme-wrapper so the footer stays at the bottom. */
    flex: 1 0 auto;
    min-width: 0;
}

/* Premium canvas — exact preview atmosphere */
body.dzd-panel-polish,
body.dzd-panel-polish .listivo-app,
body.dzd-sooq-has-global-header,
body.home,
body.front-page {
    background:
        radial-gradient(1200px 500px at 10% -10%, rgba(94, 67, 214, 0.08), transparent 55%),
        radial-gradient(900px 400px at 90% 0%, rgba(94, 67, 214, 0.05), transparent 50%),
        var(--dzd-color-page);
    color: var(--dzd-color-text);
    font-family: var(--dzd-font-sans);
    font-size: var(--dzd-fs-base);
    line-height: var(--dzd-lh-body);
}

/* Arabic: keep same font-size tokens; use relaxed line-height (theme + RTL overlay). */
html[dir="rtl"] body.dzd-panel-polish,
html[dir="rtl"] body.dzd-sooq-has-global-header,
html[dir="rtl"] body.home,
html[dir="rtl"] body.front-page {
    font-family: var(--dzd-font-sans);
    line-height: var(--dzd-lh-relaxed, 1.65);
    letter-spacing: 0;
}

/* Inherited reading size for DZD product shells (children may still set roles). */
.dzd-header,
.dzd-homepage-engine,
.dzd-sr,
.dzd-pl,
.dzd-auth,
.dzd-auth-m,
.dzd-panel-page,
.dzd-public-profile,
.dzd-message-view,
.dzd-footer {
    font-size: var(--dzd-fs-base);
    line-height: var(--dzd-lh-body);
}

@media (min-width: 768px) and (max-width: 1199px) {
    :root,
    .dzd-ui {
        --dzd-fs-3xl: 26px;
        --dzd-fs-4xl: 30px;
    }
}

@media (max-width: 767px) {
    :root,
    .dzd-ui {
        /*
         * Mobile: keep body/inputs/controls at full reading size.
         * Soften only display steps so cards stay balanced.
         */
        --dzd-fs-lg: 16px; /* card titles */
        --dzd-fs-xl: 19px; /* prices */
        --dzd-fs-2xl: 21px;
        --dzd-fs-3xl: 24px;
        --dzd-fs-4xl: 28px;
    }
}

body.dzd-panel-polish .elementor,
body.dzd-panel-polish .elementor-section,
body.dzd-panel-polish .elementor-container,
body.dzd-panel-polish .elementor-column,
body.dzd-panel-polish .elementor-widget-wrap,
body.dzd-panel-polish .elementor-widget,
body.dzd-panel-polish .elementor-widget-container,
body.dzd-panel-polish .e-con,
body.dzd-panel-polish .e-con-inner {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.dzd-panel-polish .listivo-app {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Legacy alias — prefer `.dzd-container` in markup. */
.dzd-layout-container {
    width: 100%;
    max-width: var(--dzd-layout-max);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
}

@media (min-width: 768px) {
    .dzd-layout-container {
        padding-left: var(--dzd-layout-gutter);
        padding-right: var(--dzd-layout-gutter);
    }
}