/* ==========================================================================
   Safe Pools - section styles
   Design tokens live in safe-pools.css
   ========================================================================== */

/* ==========================================================================
   HEADER
   ========================================================================== */
.sp-header {
    background: var(--sp-white);
    position: relative;
    z-index: 50;
}

.sp-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 115px;
}

/* --- brand ------------------------------------------------------------- */
/* In RTL the first flex item sits on the right, so the logo takes order 1 and
   the action icons order 3 - mirrored automatically for the English side. */
/* Measured on the design: logo 1182..1455, wavy divider 1135..1139 - so a
   43px gap between them, and both assets sit at their natural size. */
.sp-header-brand {
    display: flex;
    align-items: center;
    gap: 43px;
    order: 1;
    flex-shrink: 0;
}

.sp-logo img {
    width: 273px;
    max-width: 100%;
}

.sp-logo-divider {
    height: 53px;
    width: auto;
}

/* --- menu -------------------------------------------------------------- */
.sp-nav {
    order: 2;
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

.sp-nav-list {
    display: flex;
    align-items: center;
    gap: 34px;
}

.sp-nav-list > li {
    position: relative;
}

.sp-nav-list > li > a {
    color: var(--sp-navy);
    font-size: 17px;
    padding: 6px 8px;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color var(--sp-transition);
}

.sp-nav-list > li > a:hover {
    color: var(--sp-blue);
}

/* Active item: not an underline - a small pale-blue block sitting behind the
   START of the word. Measured 20x27 at #D2E7F5, overhanging the text by ~5px. */
.sp-nav-list > li.current-menu-item > a::before,
.sp-nav-list > li.current_page_item > a::before,
.sp-nav-list > li.current-menu-parent > a::before {
    content: '';
    position: absolute;
    inset-inline-start: -5px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 27px;
    background: var(--sp-highlight);
    z-index: -1;
}

/* dropdowns */
.sp-nav-list ul.sub-menu {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    min-width: 220px;
    background: var(--sp-white);
    box-shadow: var(--sp-shadow);
    border-radius: var(--sp-radius);
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--sp-transition);
    z-index: 60;
}

.sp-nav-list > li:hover > ul.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sp-nav-list ul.sub-menu a {
    display: block;
    padding: 9px 20px;
    color: var(--sp-navy);
    font-size: 15px;
}

.sp-nav-list ul.sub-menu a:hover {
    background: var(--sp-bg);
    color: var(--sp-blue);
}

/* --- actions ----------------------------------------------------------- */
/* circles are 44px with an 18px gap, measured off the design */
.sp-header-actions {
    order: 3;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
}

.sp-action {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0;
    position: relative;
    transition: all var(--sp-transition);
}

/* the icons themselves are the PNGs exported from the design */
.sp-action img {
    display: block;
}

.sp-action--cart {
    background: var(--sp-blue);
}

.sp-action--cart img {
    width: 20px;
}

.sp-action--cart:hover {
    background: var(--sp-blue-dark);
}

/* count badge: navy disc with white figures, tucked over the top outer corner */
.sp-cart-count {
    position: absolute;
    top: 0;
    inset-inline-start: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 50px;
    background: var(--sp-navy);
    color: var(--sp-white);
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}

.sp-action--user {
    background: #DFDFDF;
    cursor: pointer;
}

.sp-action--user img {
    width: 24px;
}

.sp-action--user:hover,
.sp-account.is-open .sp-action--user {
    background: #CFCFCF;
}

/* the flag sits at 24px inside the grey disc rather than filling it */
.sp-action--lang {
    background: #DFDFDF;
}

/* A flag is a 3:2 rectangle, not a disc. Cropping one into a 24px circle was
   survivable for the Union flag - its pattern reads from any part of it - but
   it would have cut the inscription off the Saudi flag and scaled it 2x in the
   process. Shown at its own proportion inside the grey disc, both flags are
   whole and neither is stretched. */
.sp-action--lang img {
    width: 24px;
    height: 16px;
    border-radius: 3px;
    object-fit: cover;
}

/* --- account dropdown -------------------------------------------------- */
.sp-account {
    position: relative;
}

/* Signed-in state: the name lives inside the dropdown rather than under the
   icon, so all three header discs stay the same size and aligned. A small
   dot on the disc is the only outward hint that someone is signed in. */
.sp-account.is-logged .sp-action--user::after {
    content: '';
    position: absolute;
    bottom: 1px;
    inset-inline-end: 1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--sp-blue);
    border: 2px solid var(--sp-white);
}

.sp-dropdown-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--sp-line);
}

.sp-dropdown-avatar {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--sp-navy);
    color: var(--sp-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    line-height: 1;
    text-transform: uppercase;
}

.sp-dropdown-id {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sp-dropdown-name {
    color: var(--sp-navy);
    font-size: 15px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-dropdown-mail {
    color: var(--sp-muted);
    font-size: 12px;
    line-height: 1.4;
    direction: ltr;
    text-align: start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Anchored by its inline-END edge, not centred on the icon. The account icon
   always sits on the far side of the header (left in Arabic, right in
   English), so growing toward inline-start keeps the panel on screen in both
   directions - centring pushed it off the viewport in RTL. */
.sp-dropdown {
    position: absolute;
    top: calc(100% + 14px);
    inset-inline-end: 0;
    transform: translateY(10px);
    width: 275px;
    max-width: calc(100vw - 32px);
    background: var(--sp-white);
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow-hover);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transition: all var(--sp-transition);
    z-index: 70;
}

.sp-account.is-open .sp-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* little arrow, sat over the icon it belongs to */
.sp-dropdown::before {
    content: '';
    position: absolute;
    bottom: 100%;
    inset-inline-end: 14px;
    border: 8px solid transparent;
    border-bottom-color: var(--sp-white);
}

.sp-dropdown a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 20px;
    color: var(--sp-navy);
    font-size: 15px;
    transition: background var(--sp-transition), color var(--sp-transition);
}

.sp-dropdown a:hover {
    background: var(--sp-bg);
    color: var(--sp-blue);
}

.sp-dropdown a i {
    width: 18px;
    text-align: center;
    color: var(--sp-blue);
}

.sp-dropdown .sp-dropdown-out {
    border-top: 1px solid var(--sp-line);
    margin-top: 6px;
    padding-top: 13px;
    color: #C0392B;
}

.sp-dropdown .sp-dropdown-out i {
    color: #C0392B;
}

/* --- burger / mobile drawer -------------------------------------------- */
.sp-burger {
    display: none;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--sp-navy);
    color: var(--sp-white);
    font-size: 17px;
}

.sp-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 59, 88, .55);
    opacity: 0;
    visibility: hidden;
    transition: all var(--sp-transition);
    z-index: 998;
}

.sp-nav-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.sp-mobile-nav {
    position: fixed;
    top: 0;
    inset-inline-end: -320px;
    width: 320px;
    max-width: 85vw;
    height: 100%;
    background: var(--sp-white);
    padding: 30px 24px;
    overflow-y: auto;
    transition: inset-inline-end var(--sp-transition);
    z-index: 999;
}

.sp-mobile-nav.is-open {
    inset-inline-end: 0;
}

.sp-mobile-close {
    position: absolute;
    top: 16px;
    inset-inline-start: 16px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: var(--sp-bg);
    color: var(--sp-navy);
}

.sp-mobile-logo {
    display: block;
    margin-bottom: 28px;
}

.sp-mobile-logo img {
    width: 150px;
}

.sp-mobile-list a {
    display: block;
    padding: 12px 0;
    color: var(--sp-navy);
    border-bottom: 1px solid var(--sp-line);
    font-size: 16px;
}

.sp-mobile-list a:hover {
    color: var(--sp-blue);
}

.sp-mobile-list .sub-menu a {
    padding-inline-start: 18px;
    font-size: 14px;
    opacity: .85;
}

/* ==========================================================================
   FOOTER
   --------------------------------------------------------------------------
   Every value below is measured off the 1600px Figma frame:
   card 32..1567 (32px gutter), content column 215..1384 (1170px, centred),
   column dividers at x 589 / 828 / 1044, copyright rule at y 5786.
   ========================================================================== */
.sp-footer {
    padding: 0 0 45px;
    background: var(--sp-white);
}

.sp-footer-outer {
    padding: 0 32px;
}

/* footer-bg.png is 1536x587 - exactly the card - and carries only ~3% alpha,
   so it is laid straight onto the navy at 1:1. It previously sat under a 93-97%
   navy gradient, which wiped the texture out completely. */
.sp-footer-card {
    position: relative;
    background: var(--sp-navy) url('../images/footer-bg.png') center / 100% 100% no-repeat;
    border-radius: 26px;
    padding: 70px 0 48px;
    color: rgba(255, 255, 255, .85);
    overflow: hidden;
}

.sp-footer-inner {
    position: relative;
    z-index: 1;
    width: 1170px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
}

.sp-footer-cols {
    display: flex;
    flex-wrap: wrap;
}

/* widths taken from the divider positions in the design. The columns butt up
   against each other (their edges ARE the divider positions), so the content
   is inset ~30px from whichever edge carries a divider. */
.sp-footer-col {
    position: relative;
}

.sp-footer-col + .sp-footer-col {
    padding-inline-start: 30px;
}

.sp-footer-col--brand {
    padding-inline-end: 30px;
}

.sp-footer-col--brand {
    width: 29.2%;
}

.sp-footer-col--links {
    width: 18.5%;
}

.sp-footer-col--account {
    width: 20.4%;
}

.sp-footer-col--location {
    width: 31.9%;
}

/* hairline between the columns - on the reading-start edge so the lines fall
   between columns rather than off the outer edge of the last one */
.sp-footer-col + .sp-footer-col::before {
    content: '';
    position: absolute;
    top: 30px;
    inset-inline-start: 0;
    width: 1px;
    height: 330px;
    background: rgba(255, 255, 255, .16);
}

/* --- brand ------------------------------------------------------------- */
/* the logo block is right-aligned, with the shield centred over the wordmark */
.sp-footer-logo {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 42px;
}

.sp-footer-logo-icon {
    width: 87px;
}

.sp-footer-logo-text {
    width: 185px;
}

.sp-footer-desc {
    font-size: 15px;
    line-height: 2.4;
    color: rgba(255, 255, 255, .8);
    text-align: start;
}

.sp-footer-social {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-top: 40px;
}

.sp-footer-social a {
    color: var(--sp-white);
    font-size: 22px;
    line-height: 1;
    transition: transform var(--sp-transition), color var(--sp-transition);
}

.sp-footer-social a:hover {
    color: var(--sp-blue);
    transform: translateY(-4px);
}

/* --- column headings --------------------------------------------------- */
/* the link columns start lower than the brand logo, matching the design */
.sp-footer-col--links,
.sp-footer-col--account,
.sp-footer-col--location {
    padding-top: 50px;
}

.sp-footer-title {
    position: relative;
    color: var(--sp-white);
    font-size: 20px;
    line-height: 1.2;
    margin-bottom: 45px;
}

/* 3x3 dot grid sitting BEHIND the start of each heading, not below it - the
   middle row is hidden by the words themselves. Measured 20x30 with ~8.5px
   column and ~13.5px row spacing. */
.sp-footer-title::after {
    content: '';
    position: absolute;
    top: 50%;
    inset-inline-start: 4px;
    transform: translateY(-50%);
    width: 20px;
    height: 30px;
    background-image: radial-gradient(rgba(255, 255, 255, .35) 1.2px, transparent 1.2px);
    background-size: 8.5px 13.5px;
    z-index: -1;
}

/* --- link lists -------------------------------------------------------- */
.sp-footer-list li {
    margin-bottom: 24px;
}

.sp-footer-list li:last-child {
    margin-bottom: 0;
}

.sp-footer-list a {
    color: rgba(255, 255, 255, .82);
    font-size: 15px;
    line-height: 1.6;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: color var(--sp-transition), padding var(--sp-transition);
}

/* square bullet, sits on the reading-start side of the label */
.sp-footer-list a::before {
    content: '';
    width: 5px;
    height: 5px;
    background: var(--sp-white);
    flex-shrink: 0;
}

.sp-footer-list a:hover {
    color: var(--sp-white);
    padding-inline-start: 5px;
}

/* --- map + contact ----------------------------------------------------- */
.sp-footer-map {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 32px;
    line-height: 0;
}

.sp-footer-map iframe {
    width: 100%;
    height: 173px;
    border: 0;
    display: block;
}

.sp-footer-contact li {
    margin-bottom: 22px;
}

.sp-footer-contact li:last-child {
    margin-bottom: 0;
}

.sp-footer-contact a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    width: 100%;
    color: rgba(255, 255, 255, .88);
    font-size: 16px;
}

.sp-footer-contact a:hover {
    color: var(--sp-white);
}

/* icon sits on the reading-start side, number stays latin-ordered */
.sp-footer-contact a i {
    order: -1;
    font-size: 17px;
}

.sp-footer-contact-text {
    direction: ltr;
    unicode-bidi: embed;
}

/* --- copyright --------------------------------------------------------- */
.sp-copyright {
    margin-top: 68px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, .16);
    text-align: center;
    font-size: 15px;
    color: rgba(255, 255, 255, .72);
}

/* Copyright and credit sit on one centred line, wrapping to two lines on
   narrow screens - the separator hides itself once they stack. */
.sp-copyright {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 10px;
}

.sp-copyright-sep {
    opacity: .45;
}

/* The label and the name are separate elements so the space between them is a
   real gap rather than collapsing source whitespace, which rendered flush in
   RTL and left "تصميم وتطويرإفادة" reading as one word. */
.sp-credit {
    display: inline-flex;
    align-items: baseline;
    gap: .4em;
}

/* the site name inside the copyright links home, styled like the credit link
   beside it so the two read as one line rather than two treatments */
.sp-credit a,
.sp-copyright-text a {
    color: var(--sp-white);
    text-decoration: none;
    transition: opacity var(--sp-transition);
}

.sp-credit a:hover,
.sp-credit a:focus-visible,
.sp-copyright-text a:hover,
.sp-copyright-text a:focus-visible {
    color: var(--sp-white);
    opacity: .75;
}

@media (max-width: 575px) {
    .sp-copyright-sep {
        display: none;
    }

    .sp-copyright {
        flex-direction: column;
        gap: 6px;
    }
}


/* ==========================================================================
   FLOATING WHATSAPP
   ========================================================================== */
.sp-whatsapp {
    position: fixed;
    inset-inline-start: 26px;
    bottom: 26px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: var(--sp-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 6px 20px rgba(37, 211, 102, .45);
    z-index: 900;
    animation: sp-wa-pulse 2.4s infinite;
}

.sp-whatsapp:hover {
    color: var(--sp-white);
    transform: scale(1.08);
}

@keyframes sp-wa-pulse {
    0% {
        box-shadow: 0 6px 20px rgba(37, 211, 102, .45), 0 0 0 0 rgba(37, 211, 102, .5);
    }
    70% {
        box-shadow: 0 6px 20px rgba(37, 211, 102, .45), 0 0 0 16px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 6px 20px rgba(37, 211, 102, .45), 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* The design is drawn at 1600px. Between roughly 1200 and 1400 the full-size
   logo leaves too little room and the menu wraps onto a second line, so the
   brand and menu spacing tighten before the mobile breakpoint takes over. */
@media (max-width: 1399px) {
    .sp-logo img {
        width: 215px;
    }

    .sp-header-brand {
        gap: 26px;
    }

    .sp-nav-list {
        gap: 22px;
    }

    .sp-nav-list > li > a {
        font-size: 16px;
    }
}

@media (max-width: 1199px) {
    .sp-nav-list {
        gap: 20px;
    }

    .sp-nav-list > li > a {
        font-size: 15px;
    }

    .sp-logo img {
        width: 210px;
    }
}

@media (max-width: 991px) {
    .sp-nav,
    .sp-logo-divider,
    .sp-header-actions .sp-account {
        display: none;
    }

    .sp-burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .sp-header-inner {
        min-height: 84px;
    }

    .sp-footer-outer {
        padding: 0 16px;
    }

    .sp-footer-card {
        padding: 44px 0 20px;
    }

    .sp-footer-col + .sp-footer-col::before {
        display: none;
    }

    .sp-footer-brand {
        margin-bottom: 36px;
    }

    .sp-footer-col {
        margin-bottom: 30px;
    }
}

@media (max-width: 575px) {
    .sp-header-actions {
        gap: 8px;
    }

    /* The account panel is anchored to its own icon, which on a phone leaves
       its far edge hanging past the viewport. Handing the positioning context
       to the header row instead lines it up with the content column, so it
       always opens inside the screen. */
    .sp-header-inner {
        position: relative;
    }

    .sp-account {
        position: static;
    }

    .sp-dropdown {
        top: calc(100% + 8px);
    }

    .sp-action,
    .sp-burger {
        width: 38px;
        height: 38px;
        font-size: 15px;
    }

    .sp-logo img {
        width: 165px;
    }

    .sp-whatsapp {
        width: 50px;
        height: 50px;
        font-size: 25px;
        inset-inline-start: 16px;
        bottom: 16px;
    }
}

/* ==========================================================================
   HEADER - very narrow phones (320px)
   --------------------------------------------------------------------------
   The logo (150px) plus four 38px action discs and their gaps came to 343px
   inside a 273px row, pushing the whole page into a horizontal scroll on a
   320px screen. Everything in the row steps down just enough to fit.
   ========================================================================== */
@media (max-width: 360px) {
    .sp-header-inner {
        gap: 10px;
    }

    .sp-logo img,
    .sp-header-brand img {
        max-width: 108px;
    }

    .sp-header-actions {
        gap: 6px;
    }

    .sp-action,
    .sp-burger,
    .sp-action--user,
    .sp-action--lang {
        width: 34px;
        height: 34px;
    }
}