/**
 * GLOBAL_PUBLIC_FOUNDATION + SHARED_PUBLIC_COMPONENT
 * Etmam Cart public shell — design tokens, header/footer refinements, skip link.
 * Homepage-only section artwork remains in public-home-codex.css (HOMEPAGE_ONLY).
 */

.public-shell {
    --public-primary: #10449e;
    --public-primary-dark: #0b347b;
    --public-primary-soft: #eaf0ff;
    --public-secondary: #10b981;
    --public-secondary-dark: #07875e;
    --public-secondary-soft: #e8fbf4;
    --public-text: #172033;
    --public-muted: #64748b;
    --public-background: #f7f9fc;
    --public-surface: #ffffff;
    --public-border: #dce4ef;
    --public-dark: #07101f;
    --public-radius-sm: 10px;
    --public-radius-md: 14px;
    --public-radius-lg: 22px;
    --public-radius-pill: 999px;
    --public-shadow-soft: 0 12px 34px -16px rgba(16, 68, 158, 0.18);
    --public-container: 1180px;
    --public-header-offset: 110px;
    --home-primary: var(--public-primary);
    --home-primary-dark: var(--public-primary-dark);
    --home-primary-soft: var(--public-primary-soft);
    --home-secondary: var(--public-secondary);
    --home-secondary-dark: var(--public-secondary-dark);
    --home-secondary-soft: var(--public-secondary-soft);
    --home-text: var(--public-text);
    --home-muted: var(--public-muted);
    --home-background: var(--public-background);
    --home-surface: var(--public-surface);
    --home-border: var(--public-border);
    --home-dark: var(--public-dark);
    margin: 0;
    color: var(--public-text);
    background: var(--public-background);
    font-family: "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif;
    font-weight: 400;
    font-synthesis: none;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

.public-shell *,
.public-shell *::before,
.public-shell *::after { box-sizing: border-box; }

.public-shell a { color: inherit; text-decoration: none; }
.public-shell button { font: inherit; }
.public-shell img { max-width: 100%; }

.public-skip-link {
    position: absolute;
    inset-inline-start: 16px;
    top: -48px;
    z-index: 200;
    padding: 10px 14px;
    border-radius: 10px;
    color: #fff;
    background: var(--public-primary);
    font-weight: 600;
    transition: top .2s ease;
}

.public-skip-link:focus {
    top: 12px;
    outline: 3px solid rgba(16, 185, 129, .45);
    outline-offset: 2px;
}

.public-shell .mh6-actions { gap: 7px; }
.public-shell .mh6-login {
    padding: 10px 13px;
    color: #334155;
    font-size: .78rem;
    font-weight: 600;
    transition: .25s;
}
.public-shell .mh6-login:hover { color: var(--public-primary); }

.public-shell .mh6-nav-shell {
    border-color: rgba(255, 255, 255, .52);
    background: rgba(255, 255, 255, .68);
    box-shadow: 0 12px 40px -12px rgba(16, 68, 158, .08);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
}
.public-shell .mh6-header.is-scrolled .mh6-nav-shell {
    background: rgba(255, 255, 255, .86);
    border-color: rgba(255, 255, 255, .64);
    box-shadow: 0 12px 34px -16px rgba(16, 68, 158, .18);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .public-shell .mh6-nav-shell { background: rgba(255, 255, 255, .92); }
}

.public-shell .mh6-logo { width: clamp(165px, 12vw, 178px); }
.public-shell .mh6-logo img { height: 50px; }
.public-shell .mh10-nav-links a { font-weight: 600; }
.public-shell .mh6-mobile-menu a { font-weight: 600; }
.public-shell .mh6-mobile-menu a.is-active {
    color: var(--public-primary);
    background: var(--public-primary-soft);
}

.public-shell .mh6-start-free {
    position: relative;
    min-width: 126px;
    min-height: 45px;
    padding: 10px 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(16, 68, 158, .14);
    border-radius: 12px;
    color: #fff;
    background: #10449e;
    box-shadow: 0 8px 18px rgba(16, 68, 158, .2);
    font-size: .78rem;
    font-weight: 600;
    transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease, border-color .3s ease;
}
.public-shell .mh6-start-free-orb {
    position: absolute;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #10b981;
    transition: width .5s cubic-bezier(.16, 1, .3, 1), height .5s cubic-bezier(.16, 1, .3, 1);
}
.public-shell .mh6-start-free-content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.public-shell .mh6-start-free-content i { font-size: .82rem; }
.public-shell .mh6-start-free:hover {
    transform: translateY(-2px);
    border-color: rgba(16, 185, 129, .28);
    box-shadow: 0 10px 22px rgba(16, 68, 158, .3);
}
.public-shell .mh6-start-free:hover .mh6-start-free-orb { width: 230px; height: 230px; }
.public-shell .mh6-start-free:focus-visible {
    outline: 3px solid rgba(16, 185, 129, .3);
    outline-offset: 3px;
}

.public-shell .mh6-footer {
    background: linear-gradient(145deg, #071a33, #082754 62%, #06344a);
}
.public-shell .mh6-footer-logo { width: 210px; margin-bottom: 20px; }
.public-shell .mh6-footer-logo img {
    width: 100%;
    height: auto;
    aspect-ratio: 333 / 127;
    object-fit: contain;
}
.public-shell .mh6-socials { display: flex; gap: 8px; margin-top: 20px; }
.public-shell .mh6-socials a {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 10px;
    color: #a8bad0;
    background: rgba(255, 255, 255, .055);
    font-size: 1.05rem;
    transition: .25s;
}
.public-shell .mh6-socials a:hover {
    color: #fff;
    border-color: rgba(16, 185, 129, .5);
    background: rgba(16, 185, 129, .15);
    transform: translateY(-2px);
}
.public-shell .mh6-footer-meta { display: flex; align-items: center; gap: 20px; }
.public-shell .mh6-system-status {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #88d9bd;
    font-size: .7rem;
}
.public-shell .mh6-system-status i {
    width: 8px;
    height: 8px;
    position: relative;
    border-radius: 50%;
    background: var(--public-secondary);
}

.public-shell-footer-grid {
    grid-template-columns: 2fr 1.2fr 1fr;
}

.public-shell:not(.etmam-homepage) .public-site-main,
.public-shell:not(.etmam-homepage) #public-main {
    padding-top: var(--public-header-offset);
    min-height: 50vh;
}

.public-shell :focus-visible {
    outline: 3px solid rgba(16, 68, 158, .35);
    outline-offset: 2px;
}

@media (max-width: 960px) {
    .public-shell .mh6-actions { display: flex; }
    .public-shell .mh6-login,
    .public-shell .mh6-start-free { display: none; }
    .public-shell .mh6-logo { width: 148px; }
    .public-shell .mh6-logo img { height: 48px; }
    .public-shell-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .public-shell-footer-grid .mh6-footer-brand { grid-column: span 2; }
}

@media (max-width: 700px) {
    .public-shell .mh6-logo { width: 136px; }
    .public-shell .mh6-logo img { height: 45px; }
    .public-shell .mh6-footer-meta {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 18px;
    }
    .public-shell-footer-grid { grid-template-columns: 1fr; }
    .public-shell-footer-grid .mh6-footer-brand { grid-column: auto; }
}

@media (min-width: 961px) and (max-width: 1120px) {
    .public-shell .mh6-logo { width: 160px; }
}

@media (prefers-reduced-motion: reduce) {
    .public-shell *,
    .public-shell *::before,
    .public-shell *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}