/* Homepage «تحتاج مساعدة؟» (owner design, 2026-10-17): the white Sadu ground of section 3, contact
   channels as tappable cards, and the form card in the hub's card language. Layered over the base
   .home-contact rules in AqaryonHome.cshtml (form mechanics — phone shell, custom select, captcha,
   validation — are untouched); every rule here leads with #contact to win over them. */

#contact.home-contact {
    --hc-purple: #5b4a8f;
    --hc-purple-deep: #3b2a63;
    --hc-purple-soft: #8b7baf;
    --hc-gold: #f5b942;
    --hc-line: #e2dbf1;
    position: relative;
    z-index: 1;
    padding-top: 110px;
    padding-bottom: 110px;
    background: #fbfaff;
}
#contact.home-contact::before,
#contact.home-contact::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
#contact.home-contact::before {
    background: url("/images/Home/sadu-pattern.svg") 0 0 / 100px 160px repeat;
    opacity: 0.045;
}
/* As on «من نحن» (owner, 2026-10-19): the weave stays at the edges, the middle kept almost clean. */
#contact.home-contact::after {
    background:
        radial-gradient(ellipse 60% 35% at 30% 100%, rgba(183, 160, 230, 0.2), transparent 70%),
        linear-gradient(90deg, rgba(251, 250, 255, 0) 0, rgba(251, 250, 255, 0.85) 18%, rgba(251, 250, 255, 0.85) 82%, rgba(251, 250, 255, 0) 100%);
}

#contact .home-contact__shell { max-width: 1180px; }

/* ---------- Intro ---------- */
#contact .home-contact__intro { color: var(--hc-purple-deep); gap: 0; }
#contact .home-contact__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 6px 14px;
    border-radius: 99px;
    background: #f1edfa;
    color: var(--hc-purple);
    font-size: 13px !important;
    font-weight: 700;
}
#contact .home-contact__eyebrow svg { width: 13px; height: 13px; color: var(--hc-gold); }
#contact .home-contact__title {
    margin: 0 0 10px;
    color: var(--hc-purple-deep);
    font-size: clamp(30px, 3.6vw, 44px) !important;
    font-weight: 800 !important;
    white-space: normal;
}
#contact .home-contact__lead {
    max-width: 26rem;
    margin: 0 0 26px;
    color: #6d6488;
    font-size: 17px !important;
    font-weight: 500;
    line-height: 1.8;
}

#contact .home-contact__channels {
    align-items: stretch;
    gap: 12px;
    width: 100%;
    max-width: 26rem;
}
#contact .home-contact__channel {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid #ece7f6;
    border-radius: 16px;
    background: #fff;
    color: var(--hc-purple-deep);
    box-shadow: 0 1px 2px rgba(59, 42, 99, 0.04), 0 10px 26px rgba(59, 42, 99, 0.07);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
#contact .home-contact__channel:hover {
    opacity: 1;
    background: #fff;
    border-color: #cfc3ec;
    transform: translateY(-2px);
    box-shadow: 0 0 0 4px rgba(91, 74, 143, 0.08), 0 16px 32px rgba(59, 42, 99, 0.12);
}
#contact .home-contact__channel:focus-visible {
    outline: 3px solid rgba(91, 74, 143, 0.35);
    outline-offset: 2px;
}
#contact .home-contact__channel-icon {
    display: flex;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #f1edfa;
    color: var(--hc-purple);
    opacity: 1;
}
#contact .home-contact__channel-icon svg { width: 22px; height: 22px; }
#contact .home-contact__channel--wa .home-contact__channel-icon { background: #e7f6ee; color: #1f8a4c; }
#contact .home-contact__channel-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    text-align: start;
}
#contact .home-contact__channel-label { color: #6d6488; font-size: 13px !important; font-weight: 600; }
/* Shown in full, never cut off with «…»: the size eases down on narrow phones, and a long email may
   break after the @ or a dot rather than disappear. */
#contact .home-contact__channel-value {
    display: block;
    overflow: visible;
    color: var(--hc-purple-deep);
    font-size: min(16px, 4.2vw) !important;
    font-weight: 800;
    letter-spacing: 0;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: start;
}
#contact .home-contact__channel-go {
    flex: none;
    width: 18px;
    height: 18px;
    color: #b9a7ea;
    transition: transform 0.2s, color 0.2s;
}
#contact .home-contact__channel:hover .home-contact__channel-go { color: var(--hc-purple); transform: translateX(-3px); }
#contact[dir="ltr"] .home-contact__channel-go { transform: scaleX(-1); }
#contact[dir="ltr"] .home-contact__channel:hover .home-contact__channel-go { transform: scaleX(-1) translateX(-3px); }

/* ---------- Form card ---------- */
#contact .home-contact__card {
    border: 1px solid #ece7f6;
    border-radius: 24px;
    box-shadow: 0 1px 2px rgba(59, 42, 99, 0.05), 0 22px 50px -12px rgba(59, 42, 99, 0.18);
}
#contact .home-contact__card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 32px;
    right: 32px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, var(--hc-purple), var(--hc-gold));
}
#contact .home-contact__card-title { color: var(--hc-purple-deep); }

#contact .home-contact__card-title-mark {
    /* White card: deep purple word over a hand-drawn gold brush stroke (as across the site). */
    padding: 0 0 0.34em; /* the brush sits this far under the letters */
    border-radius: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4 15C60 6 140 4 296 9' fill='none' stroke='%23f5b942' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M30 20C110 13 190 12 280 16' fill='none' stroke='%23f5b942' stroke-width='4' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E") center bottom / 100% 0.4em no-repeat;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--hc-purple-deep, #3b2a63);
    -webkit-text-fill-color: var(--hc-purple-deep, #3b2a63);
    filter: none;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
#contact .home-contact__card-head::after { display: none; } /* no short rule under the title */
#contact .home-contact__label { color: var(--hc-purple-deep); }

/* Fields in the same language as the hero search: lilac outline on an off-white fill. */
#contact .home-contact__control,
#contact .aq-phone-input-shell,
#contact .retail-shop-filter-select:not(.eshop-cselect__native),
#contact .eshop-cselect__trigger {
    border: 1.5px solid var(--hc-line);
    border-radius: 14px;
    background-color: #fbfaff;
}
#contact .home-contact__control:hover,
#contact .aq-phone-input-shell:hover,
#contact .eshop-cselect__trigger:hover {
    border-color: var(--hc-purple-soft);
    background-color: #fff;
}
#contact .home-contact__control:focus,
#contact .aq-phone-input-shell:focus-within,
#contact .eshop-cselect.is-open .eshop-cselect__trigger {
    border-color: var(--hc-purple);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(91, 74, 143, 0.12);
}

#contact .home-contact__submit {
    border-radius: 14px;
    background: var(--hc-purple-deep);
    box-shadow: 0 12px 26px -12px rgba(59, 42, 99, 0.75);
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
#contact .home-contact__submit:hover:not(:disabled) {
    background: var(--hc-purple);
    transform: translateY(-2px);
}

@media (max-width: 1199px) {
    #contact .home-contact__intro { align-items: center; text-align: center; }
    #contact .home-contact__lead { margin-inline: auto; }
    #contact .home-contact__channels { margin-inline: auto; }
}
@media (max-width: 640px) {
    #contact.home-contact { padding-top: 84px; padding-bottom: 84px; }
    #contact .home-contact__channel { padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
    #contact .home-contact__channel,
    #contact .home-contact__channel-go { transition: none; }
}