/* ARMANIPLAST-PASS-014 */

/* Floating contact: keep white text on brand orange in hover/focus */
.ap-lead-float__launcher,
.ap-lead-float__launcher:hover,
.ap-lead-float__launcher:focus-visible,
.ap-lead-float.is-open .ap-lead-float__launcher,
.ap-lead-float.is-open .ap-lead-float__launcher:hover {
    color: #fff;
    background: #c45c26;
}
.ap-lead-float__launcher:hover,
.ap-lead-float__launcher:focus-visible {
    background: #a34b1e;
    color: #fff;
}
.ap-lead-float__launcher svg,
.ap-lead-float__launcher:hover svg {
    fill: #fff;
    color: #fff;
}
.ap-lead-float__action:hover,
.ap-lead-float__action:focus-visible {
    color: #fff;
    filter: brightness(0.92);
}
.ap-lead-float__action--support:hover,
.ap-lead-float__action--support:focus-visible {
    background: #a34b1e;
    color: #fff;
}

.ap-conv {
    width: min(18.5rem, calc(100vw - 2.5rem));
    background: #fff;
    color: #1b242c;
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
    padding: 0.65rem 0.7rem 0.75rem;
    pointer-events: auto;
}
.ap-conv__title {
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0 0 0.4rem;
}
.ap-conv__log {
    max-height: 12rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}
.ap-conv__msg {
    font-size: 0.8rem;
    line-height: 1.5;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    background: #f4f1ec;
}
.ap-conv__msg--staff { background: #fff4e8; }
.ap-conv__form { display: flex; gap: 0.35rem; }
.ap-conv__form textarea {
    flex: 1;
    min-height: 2.4rem;
    max-height: 5rem;
    resize: vertical;
    border: 1px solid #d8d4ce;
    border-radius: 8px;
    padding: 0.3rem 0.45rem;
    font-size: 0.85rem;
}
.ap-conv__form button {
    border: 0;
    border-radius: 8px;
    background: #c45c26;
    color: #fff;
    padding: 0 0.7rem;
    cursor: pointer;
}
.ap-conv__form button:hover,
.ap-conv__form button:focus-visible {
    background: #a34b1e;
    color: #fff;
}

/*
 * MEGAMENU ARROW HOTFIX (Level 1 only).
 * Compiled theme uses remix \ea64 = ri-arrow-left-s-line, then rotateZ(-90deg)
 * to fake a down chevron. Pass 011/014 set rotate(0) while keeping \ea64,
 * so the rendered glyph pointed LEFT. Use the real down glyph \ea4e
 * (ri-arrow-down-s-line) and do not rotate it.
 */
@media (min-width: 990px) {
    header.header #nav-products-submenu > .dropdown-item > a::after {
        content: "\ea4e";
        font-family: "remixicon";
        font-weight: normal;
        display: inline-block;
        position: static;
        left: auto;
        right: auto;
        top: auto;
        margin-inline-start: 0.3rem;
        margin-top: 0;
        -webkit-transform: translateY(0);
        transform: translateY(0);
        transition: transform 180ms ease;
        vertical-align: middle;
        pointer-events: none;
    }
    header.header .nav-item.has-dropdown:hover > #nav-products-submenu > .dropdown-item > a::after,
    header.header .nav-item.has-dropdown.open > #nav-products-submenu > .dropdown-item > a::after,
    header.header .nav-item.has-dropdown:focus-within > #nav-products-submenu > .dropdown-item > a::after {
        content: "\ea4e";
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    /* Must beat `.open > … > a::after { translateY(0) }` (1 ID / 6 classes). */
    header.header .nav-item.has-dropdown:hover > #nav-products-submenu > .dropdown-item > a:hover::after,
    header.header .nav-item.has-dropdown.open > #nav-products-submenu > .dropdown-item > a:hover::after,
    header.header .nav-item.has-dropdown:focus-within > #nav-products-submenu > .dropdown-item > a:hover::after,
    header.header .nav-item.has-dropdown:hover > #nav-products-submenu > .dropdown-item > a:focus-visible::after,
    header.header .nav-item.has-dropdown.open > #nav-products-submenu > .dropdown-item > a:focus-visible::after,
    header.header .nav-item.has-dropdown:focus-within > #nav-products-submenu > .dropdown-item > a:focus-visible::after {
        content: "\ea4e";
        margin-top: 0;
        -webkit-transform: translateY(3px);
        transform: translateY(3px);
    }
}

/* Root محصولات toggle: white on the dark nav */
header.header .nav-dropdown-toggle,
header.header .nav-dropdown-toggle::after {
    color: #fff;
}
header.header .has-dropdown:hover > .nav-link-group > .nav-dropdown-toggle,
header.header .has-dropdown.open > .nav-link-group > .nav-dropdown-toggle,
header.header .has-dropdown:focus-within > .nav-link-group > .nav-dropdown-toggle,
header.header .nav-dropdown-toggle:hover,
header.header .nav-dropdown-toggle:focus-visible {
    color: #fff;
}

/* Search results input boundary */
.armani-search-form .theme-input,
.armani-search-page input[type="search"] {
    border: 1px solid #d5d0c8;
    border-radius: 8px;
    background: #fff;
}
.armani-search-form .theme-input:focus,
.armani-search-page input[type="search"]:focus {
    outline: 2px solid #c45c26;
    outline-offset: 1px;
    border-color: #c45c26;
}

/*
 * HEADER HOTFIX: Pass 014 set padding-top: 0 and moved logo/date/phone/email.
 * Restore compiled content padding (0.25rem homepage / 0.75rem inner).
 * Paint the overlay on header::before from the padding-box top (viewport y=0)
 * so document flow is unchanged. Disable the Pass 007 top-bar ::before so the
 * gradient is not doubled.
 */
header.header {
    position: relative;
    overflow: visible;
    padding-top: 0.25rem;
    padding-inline: 0.5rem;
}
header.header.inner {
    overflow: visible;
    padding-top: 0.75rem;
    padding-inline: 0.5rem;
}
header.header::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 7.5rem;
    background: linear-gradient(180deg, rgba(20, 20, 20, 0.45) 0%, rgba(20, 20, 20, 0.18) 70%, rgba(20, 20, 20, 0) 100%);
    pointer-events: none;
    z-index: 2;
}
header.header .nav-container.top,
header.header.inner .nav-container.top {
    z-index: 3;
}
header.header .nav-container.top::before,
header.header.inner .nav-container.top::before {
    display: none;
}

/* Date inset from the gradient edge (~8px logical start) */
header.header .nav-container.top .date {
    padding-inline-start: 0.5rem;
    padding-inline-end: 0.35rem;
}