/* Shared EL EMAN frontend refinement */
:root {
    --ui-ink: #10213d;
    --ui-navy: #07162f;
    --ui-gold: #f5a623;
    --ui-muted: #65748a;
    --ui-line: #e6ebf2;
    --ui-surface: #ffffff;
    --ui-shadow: 0 14px 38px rgba(16, 33, 61, .08);
    --ui-shadow-hover: 0 22px 48px rgba(16, 33, 61, .14);
}

html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body { color: var(--ui-ink); background: #f5f7fa; line-height: 1.7; }
.wrapper { max-width: 1440px; box-shadow: 0 0 70px rgba(16, 33, 61, .055); }

/* Clearer page rhythm and readable text */
.container { max-width: 1200px; }
section, .section { scroll-margin-top: 88px; }
.section-header { margin-bottom: 34px; }
.section-header h2, .section-title h2 { letter-spacing: -.025em; line-height: 1.3; }
.section-header p, .section-title p { color: var(--ui-muted); line-height: 1.85; }

/* Navigation and actions */
.nav-bar { z-index: 1000; }
.nav-bar .navbar { box-shadow: 0 8px 24px rgba(3, 15, 39, .12); }
.nav-bar a.nav-link { transition: color .2s ease, background-color .2s ease, transform .2s ease; }
.nav-bar a.nav-link:hover { transform: translateY(-1px); }
.nav-bar .navbar-toggler { transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease; }
.nav-bar .navbar-toggler:hover { transform: rotate(-3deg); background: rgba(245, 166, 35, .15); }
.nav-language-switch i:first-child { transition: transform .35s ease; }
.nav-language-switch:hover i:first-child { transform: rotate(25deg); }
.nav-cart-link { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease !important; }
.nav-cart-link.ui-cart-updated { animation: ui-cart-pop .7s cubic-bezier(.2, .8, .3, 1.3); }
@keyframes ui-cart-pop { 35% { transform: scale(1.12); box-shadow: 0 0 0 7px rgba(245, 166, 35, .18); } 70% { transform: scale(.96); } }

/* Refined navigation: quiet glass shell, clear links, and a compact mobile panel. */
.nav-bar { padding: 0 clamp(14px, 3.5vw, 52px); background: transparent; }
.nav-bar .container-fluid { max-width: 1500px; margin: 0 auto; }
.nav-bar .navbar {
    min-height: 72px;
    padding: 9px 18px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 0 0 18px 18px;
    background: linear-gradient(115deg, #07162f 0%, #030f27 58%, #0a1c38 100%) !important;
    box-shadow: 0 12px 34px rgba(3,15,39,.16);
}
.nav-bar .navbar-nav { align-items: center; gap: 3px; }
.nav-bar .navbar-dark .navbar-nav .nav-link {
    position: relative;
    padding: 9px 13px !important;
    border-radius: 10px;
    color: rgba(255,255,255,.84) !important;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: color .2s ease, background-color .2s ease, transform .2s ease;
}
.nav-bar .navbar-dark .navbar-nav .nav-link:hover,
.nav-bar .navbar-dark .navbar-nav .nav-link.active {
    color: #ffd27d !important;
    background: rgba(245,166,35,.11);
    transform: translateY(-1px);
}
.nav-bar .navbar-dark .navbar-nav .nav-link.active::after {
    position: absolute;
    right: 13px;
    bottom: 3px;
    left: 13px;
    height: 2px;
    border-radius: 2px;
    background: #f5a623;
    content: "";
}
.nav-bar .navbar-dark .navbar-nav .nav-language-switch { border-radius: 999px; }
.nav-bar .ml-auto { display: flex; align-items: center; gap: 8px; }
.nav-bar .ml-auto > .btn:not(.nav-cart-link) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 17px;
    border: 1px solid #f5a623;
    border-radius: 11px;
    background: #f5a623;
    color: #10213d;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(245,166,35,.18);
}
.nav-bar .ml-auto > .btn:not(.nav-cart-link):hover { background: #ffd27d; border-color: #ffd27d; color: #10213d; }
.nav-bar .navbar-toggler { padding: 8px 10px; border: 1px solid rgba(245,166,35,.4); border-radius: 10px; }
.nav-bar.nav-sticky {
    right: 0;
    left: 0;
    width: 100%;
    max-width: none;
    padding: 4px clamp(10px, 2.5vw, 36px);
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(3,15,39,.86);
    box-shadow: 0 10px 30px rgba(3,15,39,.2);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.nav-bar.nav-sticky .navbar { min-height: 64px; border-radius: 0 0 16px 16px; box-shadow: 0 5px 18px rgba(3,15,39,.12); }
@media (max-width: 991.98px) {
    .nav-bar { padding: 0; }
    .nav-bar .navbar { min-height: 66px; padding: 9px 16px; border-radius: 0 0 16px 16px; }
    .nav-bar .navbar-brand { display: inline-flex; align-items: center; padding: 0; }
    .nav-bar .navbar-brand img { max-height: 43px; max-width: 180px; object-fit: contain; }
    .nav-bar .navbar-collapse { padding: 8px 0 4px; }
    .nav-bar .navbar-nav { align-items: stretch; gap: 2px; padding: 6px 0; }
    .nav-bar .navbar-dark .navbar-nav .nav-link { width: 100%; padding: 10px 13px !important; border-radius: 9px; }
    .nav-bar .navbar-dark .navbar-nav .nav-link.active::after { right: auto; bottom: 9px; left: auto; width: 3px; height: 20px; }
    .nav-bar .navbar-dark .navbar-nav .nav-language-switch { width: fit-content; margin: 7px 0; }
    .nav-bar .ml-auto { flex-wrap: wrap; margin: 5px 0 2px; }
    .nav-bar .ml-auto > .btn { margin: 0; }
    .nav-bar .ml-auto > .btn:not(.nav-cart-link) { min-height: 40px; }
    .nav-bar.nav-sticky { padding: 0; }
    .nav-bar.nav-sticky .navbar { min-height: 64px; border-radius: 0 0 15px 15px; }
}

/* Shared contact CTA used on About, Services and Projects pages. */
.cta-section { box-sizing: border-box; padding: clamp(38px, 5.5vw, 66px) 16px; overflow: hidden; }
.cta-section > .container { width: min(100%, 980px); max-width: 980px; margin-inline: auto; }
.cta-section h2 { max-width: 780px; margin: 0 auto 12px; font-size: clamp(24px, 3.3vw, 36px); line-height: 1.45; overflow-wrap: anywhere; }
.cta-section p { max-width: 760px; margin: 0 auto 25px; font-size: clamp(14px, 1.5vw, 18px); line-height: 1.9; overflow-wrap: anywhere; }
.cta-section .btn-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; min-height: 48px; margin: 6px; padding: 11px 24px; border-radius: 11px; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
    .cta-section { padding: 38px 16px 40px; }
    .cta-section > .container { padding-inline: 0; }
    .cta-section h2 { font-size: 24px; line-height: 1.5; margin-bottom: 10px; }
    .cta-section p { font-size: 14px; line-height: 1.85; margin-bottom: 18px; }
    .cta-section .btn-cta { display: flex; width: min(100%, 340px); min-height: 46px; margin: 9px auto 0; padding: 10px 16px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .nav-bar .navbar-dark .navbar-nav .nav-link,
    .nav-bar .ml-auto > .btn { transition: none; }
}

/* Mobile menu links arrive in a short, readable cascade */
@media (prefers-reduced-motion: no-preference) {
    .navbar-collapse .navbar-nav > .nav-link { transition: opacity .22s ease, transform .22s ease, color .2s ease; }
    .navbar-collapse.show .navbar-nav > .nav-link { animation: ui-menu-in .3s both; }
    .navbar-collapse.show .navbar-nav > .nav-link:nth-child(2) { animation-delay: 25ms; }
    .navbar-collapse.show .navbar-nav > .nav-link:nth-child(3) { animation-delay: 50ms; }
    .navbar-collapse.show .navbar-nav > .nav-link:nth-child(4) { animation-delay: 75ms; }
    .navbar-collapse.show .navbar-nav > .nav-link:nth-child(5) { animation-delay: 100ms; }
    .navbar-collapse.show .navbar-nav > .nav-link:nth-child(6) { animation-delay: 125ms; }
    .navbar-collapse.show .navbar-nav > .nav-link:nth-child(7) { animation-delay: 150ms; }
    @keyframes ui-menu-in { from { opacity: .2; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
}
.btn, button, input, select, textarea { transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.btn:not(:disabled):hover { transform: translateY(-2px); }
.btn:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid rgba(245, 166, 35, .45);
    outline-offset: 3px;
}

/* Consistent image crops and card surfaces */
.service .service-item, .blog .blog-item, .portfolio .portfolio-warp,
.shop-card, .journal-card, .contact .contact-item {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 26px rgba(16, 33, 61, .07);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.service .service-item:hover, .blog .blog-item:hover, .portfolio .portfolio-warp:hover,
.shop-card:hover, .journal-card:hover, .contact .contact-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--ui-shadow-hover);
}
.service .service-img img, .blog .blog-img img, .portfolio .portfolio-img img {
    transition: transform .55s cubic-bezier(.2, .7, .2, 1), filter .35s ease;
}
.service .service-item:hover .service-img img, .blog .blog-item:hover .blog-img img,
.portfolio .portfolio-warp:hover .portfolio-img img { transform: scale(1.045); }

/* Softer content surfaces */
.service .service-text, .blog .blog-title { min-height: 64px; }
.service .service-text h3, .blog .blog-title h3 { white-space: normal; line-height: 1.45; }
.blog .blog-meta { line-height: 1.8; }
.contact .contact-form { border-radius: 18px; }
.contact .contact-form input, .contact .contact-form textarea, .contact .contact-form select {
    min-height: 48px;
    border-radius: 10px;
    padding-inline: 14px;
}
.contact .contact-form textarea { min-height: 150px; }

/* Search and add-to-cart feedback */
.shop-search button { min-width: 46px; position: relative; }
.shop-search.ui-is-loading button { opacity: .78; cursor: wait; }
.shop-search.ui-is-loading button i { animation: ui-search-spin .8s linear infinite; }
@keyframes ui-search-spin { to { transform: rotate(360deg); } }
.ui-cart-pending { opacity: .82; cursor: wait !important; }
.shop-card-actions button.ui-cart-already,
.product-actions button.ui-cart-already { background: #d64545 !important; border-color: #d64545 !important; color: #fff !important; }
.shop-card-actions button.ui-cart-already:hover,
.product-actions button.ui-cart-already:hover { background: #b93535 !important; border-color: #b93535 !important; color: #fff !important; }
.ui-button-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: ui-search-spin .65s linear infinite; }
.ui-cart-toast { position: fixed; z-index: 1200; top: 22px; left: 50%; right: auto; display: flex; align-items: center; gap: 11px; box-sizing: border-box; width: min(520px, calc(100vw - 28px)); padding: 13px 16px; border: 1px solid #d8eee2; border-radius: 14px; background: rgba(255,255,255,.97); color: #26394f; box-shadow: 0 16px 44px rgba(16,33,61,.2); opacity: 0; pointer-events: none; transform: translate(-50%, -14px); transition: opacity .24s ease, transform .24s ease; backdrop-filter: blur(12px); }
.ui-cart-toast.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.ui-cart-toast > i { color: #188452; font-size: 19px; }
.ui-cart-toast > span { flex: 1; font-size: 13px; font-weight: 750; }
.ui-cart-toast > a { flex: none; color: #9a6812; font-size: 11px; font-weight: 850; text-decoration: underline; text-underline-offset: 3px; }
.ui-cart-toast.is-notice { border-color: #f1e2bd; }
.ui-cart-toast.is-notice > i { color: #bc8218; }
.alert-success { animation: ui-feedback-in .45s ease both; }
@keyframes ui-feedback-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* Image loading cue with a soft shimmer */
.shop-card-image, .journal-card-media, .portfolio-img { background-color: #f0f3f7; }
.shop-card-image img, .journal-card-media img, .portfolio-img img { opacity: .82; transition: opacity .35s ease, transform .55s cubic-bezier(.2, .7, .2, 1); }
.shop-card-image img.ui-image-loaded, .journal-card-media img.ui-image-loaded, .portfolio-img img.ui-image-loaded { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
    .shop-card-image:has(img:not(.ui-image-loaded)), .journal-card-media:has(img:not(.ui-image-loaded)), .portfolio-img:has(img:not(.ui-image-loaded)) {
        background-image: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.65) 45%, transparent 70%);
        background-size: 220% 100%;
        animation: ui-image-shimmer 1.3s ease-in-out infinite;
    }
    @keyframes ui-image-shimmer { to { background-position: -220% 0; } }
}

/* Subtle entrance motion, enabled only for elements observed by JS */
@media (prefers-reduced-motion: no-preference) {
    .ui-motion-ready .ui-reveal:not(.ui-revealed) {
        opacity: 0;
        transform: translateY(16px);
    }
    .ui-reveal {
        transition: opacity .55s ease var(--ui-reveal-delay, 0ms), transform .55s cubic-bezier(.2, .7, .2, 1) var(--ui-reveal-delay, 0ms);
    }
    .ui-reveal.ui-revealed { opacity: 1; transform: translateY(0); }
    .shop-hero:after, .journal-hero:after {
        animation: ui-orbit 18s ease-in-out infinite alternate;
    }
    @keyframes ui-orbit {
        from { transform: translate3d(0, 0, 0) rotate(0deg); }
        to { transform: translate3d(-12px, 10px, 0) rotate(8deg); }
    }
}

@media (max-width: 767.98px) {
    .section-header { margin-bottom: 26px; }
    .service .service-item, .blog .blog-item, .portfolio .portfolio-warp,
    .shop-card, .journal-card { border-radius: 14px; }
    .nav-bar .navbar { box-shadow: 0 5px 18px rgba(3, 15, 39, .16); }
    .ui-cart-toast { top: max(12px, env(safe-area-inset-top)); left: 50%; right: auto; width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)); max-width: 460px; gap: 8px; padding: 11px 12px; border-radius: 13px; transform: translate(-50%, -10px); }
    .ui-cart-toast.is-visible { transform: translate(-50%, 0); }
    .ui-cart-toast > i { flex: none; margin-top: 2px; }
    .ui-cart-toast > span { min-width: 0; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
    .ui-cart-toast > a { max-width: 90px; white-space: nowrap; }
}

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