/* ===================== WARM THEME (2026-10-01) =====================
   Loaded ONLY by _Layout_V2.cshtml, after every legacy/vendor stylesheet (see _Layout_V2.cshtml's
   own comment). None of the existing global stylesheets (CustomLayout.css / style_theme.css /
   main.css) are edited -- this file layers the "warm landing" visual language (established in the
   NET4LOG CustomerHome mockup, MOCKUP_NET4LOG_CustomerHome_Warm_Landing_Redesign) on top of them
   by restyling the REAL, existing class names already used in _Layout.cshtml's
   header/footer/sidebar/dropdown markup -- it does not change any HTML structure, only
   presentation.

   !important on cosmetic properties only (2026-10-01, fix after first real-browser test showed no
   visible change despite this file confirmed loading last in <head>, per view-source): load order
   only wins the cascade when specificity is TIED. The legacy CSS already has a documented
   "fragile load-order dependency" of its own (see _Layout.cshtml's CustomLayout.css comment) --
   i.e. it relies on compound/ID-qualified selectors to win ties deliberately, which beat this
   file's plain class selectors on SPECIFICITY regardless of load order. Rather than hunt down and
   out-specificity every legacy rule across 3 files totaling 460KB+, cosmetic properties here
   (color/background/border/radius/shadow/font) are marked !important, since this stylesheet's
   entire purpose IS to override the legacy theme -- structural/layout properties (display, flex,
   gap, padding, margin, transform, transition) are deliberately left WITHOUT !important so any
   legacy JS that toggles layout via inline styles or classes still works unmodified.

   This is still a first pass written without being able to compile/run this MVC site directly --
   expect further iteration against real screenshots. Per-page body content (the 160 individual
   views) is NOT covered here beyond generic Bootstrap/common classes; left for later, incremental,
   per-page passes (see the rollout plan's Stage A/B/C + "dedicated per-page stylesheets migrated
   later" scope). */

:root{
    --purple:#2A007C;
    --purple-soft:#4D00E2;
    --plum-gradient: linear-gradient(105deg,#341552 0%,#4f1e50 45%,#68264f 80%,#792c4e 100%);   /* same as the site footer */
    --func-hero-h: 270px;   /* one height for the plum hero of every functional page (Partner Directory is the reference) */
    --orange:#FE5F00;
    --orange-light:#FF9A56;
    --cream:#FFF8F1;
    --cream-2:#FFEFE0;
    --cream-3:#FFF3E9;
    --ink:#2B2140;
    --ink-soft:#5B5470;
    --card:#FFFFFF;
    --shadow-warm: 0 14px 34px -12px rgba(254,95,0,0.28);
    --shadow-soft: 0 10px 26px -14px rgba(42,0,124,0.18);
    --radius-lg: 22px;
    --radius-md: 16px;
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Inter', sans-serif;
}

/* :focus-visible (2026-10-01, "when clicking the tab in keyboard the selection is giving like
   this"): mirrors the mockup's own global rule (index.html:521) verbatim --
   :focus-visible{outline:3px solid var(--purple-soft);outline-offset:3px;border-radius:6px}.
   Page-wide like the mockup's, :focus-visible already only fires for keyboard/programmatic focus,
   not mouse clicks.
   !important added ("high light i still can't see" -- the ring wasn't showing at all): bootstrap.min.css
   resets outline to 0 on focus via tag-qualified selectors like a:focus/.btn:focus (specificity
   ~0,1,1), which beats a bare :focus-visible (~0,1,0) -- the plain rule above lost that fight
   silently. !important sidesteps needing to out-specificity every such reset individually. */
:focus-visible{
    outline: 3px solid var(--purple-soft) !important;
    outline-offset: 3px !important;
    border-radius: 6px;
}
/* Mouse vs keyboard (2026-10-13, "when mouse click also the blue focus is active -- only when tabbing with the keyboard"):
   Chrome matches :focus-visible on a text field even for a mouse click, so the 3px ring above showed on every click.
   Text-entry fields therefore drop the ring by default (they keep their own border / glow highlight) and get it back
   only after the user has pressed a key (html.n4l-kbd, toggled by the small script in _Layout_V2). Buttons, links,
   checkboxes etc. already only match :focus-visible for the keyboard, so they are unchanged. */
input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]):not([type="range"]):focus-visible,
textarea:focus-visible,
select:focus-visible{
    outline: none !important;
}
html.n4l-kbd input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]):not([type="range"]):focus-visible,
html.n4l-kbd textarea:focus-visible,
html.n4l-kbd select:focus-visible{
    outline: 3px solid var(--purple-soft) !important;
    outline-offset: 3px !important;
}
/* Nav/dropdown links carve-out (2026-10-01, "when hovering through menu items then text also
   getting focused that note required"): these already give their own clear feedback on
   interaction (orange text on the top-level links, cream-2 pill on dropdown items) per the
   mockup's own :hover rules, so the global keyboard-focus ring above is redundant here and was
   reading as an unwanted "focused" box around the text. Scoped off only for these nav elements --
   the global ring stays everywhere else (buttons, form fields) for keyboard accessibility. */
header#header .nav-link.navbarcsslink:focus-visible,
header#header .dropdown-item.menuincontext:focus-visible{
    outline: none !important;
}

/* ===================== BASE TYPOGRAPHY ===================== */
body{
    font-family: var(--font-body) !important;
    color: var(--ink) !important;
    background: var(--cream) !important;
}
h1, h2, h3, h4, h5, h6{
    font-family: var(--font-heading) !important;
    color: var(--purple) !important;
}
a{ color: var(--purple) !important; }

/* Subscription / Partner World popups (2026-10-09, "Why the message is not visible"): these sit on a solid #2A007C card with white text
   (CustomLayout.css), but the global h1-h6 rule above forces purple with !important, so the title (and the limit-reached message) was
   purple on purple -- only the Apply Now button showed. Restore white inside the popup. */
.Subscription-popup .text-center h4,
.Subscription-popup .text-center h3,
.Subscription-popup .text-center p{ color: #fff !important; }

/* Hero slider text keeps its own original font (2026-10-01, fix after real-browser test clipped
   "Connecting The World Digitally..."): #typing-text/#sliding-text (Home/Index.cshtml, animated by
   ~/Content/js/homePage/sliderText.js) are plain divs, not h1-h6, but the global body rule above
   still reached them via !important (which beats a more-specific non-!important selector
   regardless of specificity) and overrode their own explicit font-family (Arial / araboto) in
   CustomLayout.css. Those elements are sized (fixed font-size, white-space:nowrap) for their
   ORIGINAL font's narrower glyphs -- Inter rendered wider at the same pixel size and pushed the
   text past its container, clipping it. Restored explicitly rather than touching the global body
   rule, which renders correctly everywhere else. */
#typing-text{ font-family: Arial, sans-serif !important; }
#sliding-text{ font-family: araboto, sans-serif !important; }

/* Logo size (2026-10-01): .logosize{width:250px} (style_theme.css) is the main driver of the
   header looking oversized vs. the mockup's much smaller ~32px-tall logo. Scoped to the public
   header's logo specifically (header#header .logosize), not the footer's white logo variant
   (footer.site-footer uses the same .logosize class on a different image -- see FOOTER section --
   and should keep its own size). Deliberately NOT touching .navbarcsslink's line-height or the
   chain of position:relative/margin-top nudges (.navbarcss top:17px, .navbarcss_right
   margin-top:21px, .profileDet margin-top:15px) that align nav links/login/profile-pill tops to
   the logo's -- those were tuned specifically against the CURRENT sizes and the surrounding
   comments document multiple real regressions (including a Safari-only one) from adjusting this
   area without live re-measurement, which isn't possible here. A smaller logo should compact the
   header's overall height somewhat on its own, since this header has no fixed height and follows
   its tallest content, but fully matching the mockup's header height needs that alignment chain
   re-tuned together, deliberately left for a follow-up once this can be checked live. */
/* Logo + header sizing (2026-10-01, corrected): exact values pulled straight from the mockup's
   own CSS (confirmed as the correct, working reference -- same index.html hosted live at
   aslamozlo.github.io/net4log-newui/), not estimated from a screenshot:
   .site-nav{padding:14px 24px}, .logo img{height:32px} (height-based, not width-based), and
   .btn{min-height:46px} -- the BUTTONS are the tallest element in the mockup's header row (46px),
   taller than the 32px logo, which is the opposite of this site's current logo-driven layout. */
header#header .logosize{
    height: 32px !important;
    width: auto !important;
    /* top:4px (2026-10-01, "need to move little more downwards"): flexbox centering
       (.navbar-brand{display:flex;align-items:center}) sizes the logo's BOX centered in the row,
       but the visible mark inside NETFORLOG_LOGO_V2.png isn't symmetrically inset in its own
       693x120 canvas, so the centered box still reads as sitting high. A small relative nudge
       (not margin-top, to avoid disturbing the flex row's own height like .menutoggle's/
       .navbarcss's earlier nudges elsewhere in this file) corrects the visual position without
       re-triggering that. User-requested direction/amount, not a mockup-measured value.
       left:-4px added same way ("move logo little to left"). */
    position: relative;
    top: 3px;
    left: -5px;
}
/* Corrected to exact mockup values (2026-10-01): the mockup's header Login/Join Now buttons carry
   a .btn-sm modifier, not the generic .btn -- confirmed via DevTools measurement AND the mockup's
   own CSS (.n4l-public-page .btn-sm{min-height:42px;padding:0 18px;font-size:14px;
   border-radius:10px;}), not assumed. Overrides the generic .dc-btn/.dc-btn-white rule (min-height
   46px, padding 10px 22px) for the header specifically. */
header#header .btn.dc-btn,
header#header .btn.dc-btn-white{
    min-height: 42px !important;
    padding: 0 18px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    font-family: var(--font-body) !important;
    font-weight: 700 !important;
    /* display/align (2026-10-01): the mockup's own .n4l-public-page .btn rule is what actually
       centers the label inside a zero-vertical-padding, fixed-min-height button --
       display:inline-flex;align-items:center;justify-content:center -- not just the min-height
       alone. Missing this, "Login"/"Join Now" sat at the anchor's own line-height instead of
       centered in the 42px box. */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Alignment: flexbox centering instead of pixel nudges (2026-10-01, second attempt -- the first
   attempt scaled .navbarcss/.navbarcss_right's existing top/margin-top nudges proportionally to
   the logo's new size, but that assumed the LOGO stayed the tallest row element; with the logo
   now at the mockup's exact 32px and the buttons at the mockup's exact 46px, the buttons are
   taller instead, so a pixel-nudge scaled off the logo's size no longer makes sense).
   header#header's own 3 zones (.top-left/.top-Center/.top-right) already use
   display:flex;align-items:flex-start (a deliberate past fix, per that rule's own comment, to
   stop differently-sized content being center-aligned by MIDPOINT instead of TOP -- that was
   about the logged-in profile pill's 2-line ~60-86px-tall block vs. single-line nav text, a much
   bigger height gap than logo(32px)/buttons(46px)/nav-text here). Switching just these 3 zones to
   align-items:center and zeroing the old top/margin-top nudges lets each zone's own content
   center on its own, which is both simpler to reason about and is what the mockup's
   .site-nav{align-items:center} does -- matches the proven-correct reference instead of
   recalculating pixel offsets blind. The profile pill (logged-in only, not visible in the
   screenshots tested so far) may need its own follow-up if centering looks wrong there, per the
   original fix's documented concern -- flag it specifically if so. */
header#header .top-left,
header#header .top-Center,
header#header .top-right{
    align-items: center !important;
}
/* Root-cause fix (2026-10-01, replaces the margin-left:-32px hack above): DevTools measurement
   found the REAL cause of .top-Center sitting too far right -- div.navbar-header (the logo's
   wrapper) carries legacy padding:0 1.25em 0 0 (style_theme.css), i.e. 17.5px of padding AFTER
   the logo that the mockup has no equivalent of. The mockup gets its logo-to-nav spacing purely
   from .site-nav{gap:24px} on the row itself, not from padding baked into the logo's own wrapper.
   Zeroing that padding and adding the mockup's own gap:24px directly to header#header.header
   (which previously had no gap at all, relying only on justify-content:space-between to
   distribute leftover space) matches the mockup's actual mechanism instead of guessing a
   compensating offset. */
header#header .navbar-header{
    padding: 0 !important;
    /* height:32px + flex (2026-10-01, "this is 37 i need in 32 that is mockup this container not
       in the mockup"): the mockup has NO wrapper around its logo <img> at all (it's a direct child
       of <a class="logo">) -- .navbar-header is this codebase's own structural wrapper (also holds
       the mobile hamburger toggle), so it can't be removed, but it was still a block-level element
       sizing itself off its default line-height instead of its 32px image, measuring 37px tall.
       Forcing it to a tight flex row pinned to the image's own 32px collapses that extra ~5px so
       it behaves like the mockup's wrapper-less logo. */
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
}
header#header.header{
    gap: 24px;
    /* align-items:center (2026-10-01, "also this div is not in the mockup so remove this" --
       pointing at div.top-Center measuring 534.8x41.2): the fix above only set align-items:center
       on .top-left/.top-Center/.top-right THEMSELVES (how each zone aligns ITS OWN children), never
       on header#header.header (how IT aligns those 3 zones as ITS flex items). With that unset,
       the default align-items:stretch made every zone stretch to the header's full content height
       (70px height - 28px padding = 42px), regardless of how tight the actual nav text inside is --
       that's exactly the 41.2px measured, not anything about .header-left's own content. Can't
       remove .top-Center from the markup itself (it's the element a @media(max-width:1200px) rule
       hides for the mobile nav), but this collapses its rendered height to match its real content,
       which is the visual effect being asked for. */
    align-items: center;
}
/* margin-right:0 (2026-10-01): legacy .top-right{margin-right:20px} (style_theme.css) was still
   uncontested -- confirmed via DevTools, it showed up as extra hatched space to the right of
   "Join Now" when measuring div.top-right. The mockup's .nav-actions carries no margin of its
   own; it sits flush against .site-nav's own padding:14px 24px. That extra 20px pushed the whole
   button block 20px further from the header's right edge than the mockup, on top of its own
   24px padding. */
header#header .top-right{
    margin-right: 0 !important;
}
header#header .navbarcss{
    top: 0 !important;
}
header#header .navbarcss_right{
    margin-top: 0 !important;
}
header#header .navbarcss_right.profileDet{
    margin-top: 0 !important;
}
a:hover{ color: var(--orange) !important; }

/* ===================== HEADER / TOP NAV =====================
   Real selectors confirmed in _Layout.cshtml: header#header.header > .top-left (.navbar-header >
   .navbar-brand > img.logosize) + .top-Center > .header-menu > .header-left >
   .nav-item.dropdown.navbarcss > a.nav-link.navbarcsslink, with
   .dropdown-menu.dropdownstylecss > a.dropdown-item.menuincontext (+ img/svg.menuiconright). */
/* height added (2026-10-01, found via live DevTools inspection): .right-panel header.header
   (style_theme.css:2166) sets a hard-pinned height:86px + position:fixed -- confirmed via
   DevTools that this page's header IS inside div#right-panel even logged out, which I'd wrongly
   assumed was logged-in-only, so this rule applied the whole time regardless of the logo/button/
   alignment sizing changes above (none of which touch the header's own fixed box height).
   70px corrected (2026-10-01, second pass) from an initial 74px -- that was CALCULATED from
   .site-nav{padding:14px 24px} + .btn{min-height:46px}, assuming the generic .btn rule applied to
   the header's Login/Join Now buttons, but DevTools measurement of the mockup's own
   div.wrap.site-nav came back 70px, not 74px (the header buttons there most likely carry a
   .btn-sm modifier with a shorter min-height than the generic .btn, which this environment can't
   inspect) -- a direct measurement overrides a calculation built on an unverified assumption.
   header#header.header's ID beats .right-panel header.header's two classes on specificity, so
   this overrides it outright. Two dependents of the OLD 86px are updated to match, both found via
   the codebase's own comments pointing at each other: aside.left-panel's top
   (style_theme.css:1729) below, and _Layout_V2.cshtml's own #right-panel inline style (only set
   when logged in) -- updated there directly since it's Razor-conditional, not pure CSS. */
header#header.header{
    background: #FFFFFF !important;
    border-bottom: 1px solid #F0E4D6 !important;
    box-shadow: 0 2px 14px -8px rgba(42,0,124,.12) !important;
    height: 70px !important;
    /* 14px 24px (2026-10-01, corrected from an approximated 0 24px): the mockup's own
       .n4l-public-page .site-nav rule declares padding:14px 24px, not zero vertical padding --
       Bootstrap's global box-sizing:border-box reset (loaded on this page) means padding sits
       INSIDE the explicit height:70px above rather than adding to it (70px total either way,
       content area becomes 70 - 2*14 = 42px, matching the header buttons' own 42px height
       exactly), so this is the mockup's actual declared value, not a different number chosen to
       hit the same outer total by other means. */
    padding: 14px 24px !important;
    display: flex;
}
aside.left-panel{
    top: 70px !important;
}
header#header .navbar-brand{ display:flex; align-items:center; }
/* Replaced a margin-only patch (2026-10-01, 2nd pass): DevTools measurement showed real
   .header-left at 660.55px wide vs the mockup's nav content at 528.75px for the same 5 links --
   not just under-spaced, actually WIDER, because legacy .header-left{display:inline-block} +
   .navbarcss{padding-right:15px;padding-left:5px} pads BOTH sides of EVERY item (including the
   outer edges before the first/after the last link), unlike the mockup's .site-nav nav{gap:30px}
   which only adds space BETWEEN items. A margin on top of that padding (the earlier 0 5px
   attempt) made the row even wider, not closer to the mockup. Fix: make .header-left itself a
   flex row with gap:30px (mockup's own exact value) and zero out the legacy per-item
   padding/margin so the gap is the only spacing, matching the mockup's mechanism, not just its
   total. Scoped to header#header .top-Center so the unrelated .header-left used for the mobile
   avatar row (inside .res-right) is untouched. */
header#header .top-Center .header-left{
    display: flex !important;
    align-items: center;
    gap: 30px;
}
header#header .nav-item.dropdown.navbarcss{
    margin: 0 !important;
    padding: 0 !important;
}
/* aria-current highlight (2026-10-01, "the mockup is highlighted which menu its standing our code
   not"): mirrors the mockup's own .site-nav nav a[aria-current]{opacity:1;color:var(--orange)} --
   the Home/Contact Us links in _Layout_V2.cshtml now render a real aria-current="page" attribute
   when that's the current controller (see that file's own comment), so this is what actually
   paints it orange. */
header#header .nav-link.navbarcsslink[aria-current]{
    color: var(--orange) !important;
    opacity: 1;
}
header#header .nav-link.navbarcsslink{
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 14.5px;
    color: var(--ink) !important;
    opacity: .85;
    transition: color .15s ease, opacity .15s ease;
    /* padding:0 (2026-10-01): bootstrap.min.css's base .nav-link{display:block;padding:.5rem 1rem}
       (8px top/bottom, 16px left/right) was still uncontested here -- confirmed in
       bootstrap.min.css itself, not assumed. That's 32px extra width + 16px extra height on
       EVERY link, on top of .header-left's own gap:30px, which is exactly why the row measured
       614.8x42.1 instead of the mockup's 528.75x17.6 even after the gap fix. The mockup's own
       <a> links carry no such padding -- spacing is gap-only. */
    padding: 0 !important;
    /* line-height:normal (2026-10-01): style_theme.css's .navbarcsslink{line-height:180.023%}
       (style_theme.css:485) was still uncontested -- confirmed in that file directly, not
       assumed. 14.5px * 1.80023 = 26.1px, which is exactly the .header-left row height measured
       after the padding fix above (534.8x26.1), instead of the mockup's tight 528.75x17.6. The
       mockup's own nav ul sets no special line-height -- removing this legacy 180% value lets it
       fall back to the font's normal line-height, matching the mockup's tight row height. */
    line-height: normal !important;
}
header#header .nav-link.navbarcsslink:hover,
header#header .nav-item.dropdown.navbarcss.show .nav-link.navbarcsslink{
    color: var(--orange) !important;
    opacity: 1;
}
/* font-size:12px (2026-10-01): mockup's trigger uses a crisp 12x12 inline SVG chevron
   (<svg class="chev" width="12" height="12">...), while this codebase uses a FontAwesome
   icon-font glyph (<i class="fas fa-angle-down">) that was inheriting the nav link's 14.5px
   font-size -- a visibly larger/heavier glyph than the mockup's thin 12px chevron. Can't match
   the exact shape without swapping to an inline SVG (a markup change), but sizing it down to the
   mockup's own 12px closes most of the visual gap. */
header#header .arrow-icon{ color: var(--ink-soft) !important; transition: transform .18s ease; font-size: 12px; }
header#header .nav-item.dropdown.navbarcss.show .arrow-icon{ transform: rotate(180deg); }

/* width:230px (2026-10-01): mockup's .nav-dd-menu{width:230px} is a FIXED width -- confirmed in
   index.html directly, not estimated. This rule had no width at all, so Bootstrap's
   .dropdown-item{width:100%} stretched every item to whatever width the CONTENT (longest label +
   icon + gaps + padding) happened to shrink-wrap to, instead of the mockup's fixed box -- this is
   exactly why the real dropdown rendered wider than the mockup's, matching the same
   "uncontested legacy default" pattern as the nav-link padding/line-height fixes above. Scoped to
   the plain selector only: .services-grid's own width:460px rule (below) is more specific and
   still wins for that variant. */
.dropdown-menu.dropdownstylecss{
    border: 1px solid #F1E2CE !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 24px 48px -18px rgba(42,0,124,.28) !important;
    padding: 10px;
    /* !important added (2026-10-01): plain width:230px still wasn't landing after rebuild --
       same reason every other size property in this file ended up needing !important against
       this codebase's legacy stack. */
    width: 230px !important;
    min-width: 230px !important;
    /* margin-top (2026-10-01, "it need to go up", "need to move little bit to up", then "move one
       more pixel up"): pulls the menu closer to the About Us/Services trigger -- user-requested
       nudge, not a mockup-measured value. */
    margin-top: -11px !important;
    /* left:50%+translateX(-50%) (2026-10-01, "this is correctly dropped to the center of About Us
       but our code not showing like this"): confirmed in the mockup's own CSS --
       .nav-dd-menu{left:50%;transform:translateX(-50%)} centers the menu under its trigger.
       Bootstrap's own .dropdown-menu{left:0} (uncontested, since we never overrode left/transform)
       just left-aligns the menu to the trigger's own left edge instead -- a different positioning
       MECHANISM, not a spacing tweak, which is why no amount of margin/padding fixing closed this
       gap. .nav-item.dropdown.navbarcss is already position:relative (Bootstrap's own .dropdown
       default), so this positions correctly against the right trigger. Applies to the
       .services-grid variant too (its own rule below only overrides width/columns, not
       left/transform), matching the mockup's .nav-dd-menu.services inheriting the same centering. */
    left: 50% !important;
    transform: translateX(-50%) !important;
}
.dropdown-menu.dropdownstylecss .dropdown-item.menuincontext{
    display: flex;
    align-items: center;
    /* gap:6px (reduced from 10px, 2026-10-01, "taking a lot of space after the icon"): the
       mockup's own icons are thin hand-drawn line SVGs with almost no internal padding, so its
       gap:10px reads tight. These existing navDropdownIcons/*.svg files (kept as-is, not
       replaced -- referenced elsewhere per instruction) likely carry more built-in padding in
       their own canvas, so the same 10px CSS gap reads as more visual space. This tightens what's
       actually in my control (the CSS gap); it can't fully close a gap baked into the icon files
       themselves without touching those files. Reduced further to 4px (2026-10-01, "decrease the
       space between the icon and text by 2 points"), then to 2px ("decrease the space between
       icon and text" again), then to 1px ("decrease 1 more point"). */
    gap: 1px;
    border-radius: 10px !important;
    /* padding 9px 8px (reduced from 9px 12px, 2026-10-01, "still see the text Team is going out"):
       "Core Management Team" was clipping past the dropdown's right edge at the mockup's own
       declared 230px width -- the mockup fits this exact text at that width, so something about
       how text renders here (most likely Inter not actually loading, falling back to a wider
       system font -- flagged earlier as a suspected but unconfirmed cause of the nav links also
       looking less bold than the mockup's) is eating slightly more horizontal room per item.
       Trimming 4px of horizontal padding reclaims enough width to stop the clipping without
       changing the dropdown's own 230px (which does match the mockup) or wrapping text to 2
       lines. If the font-loading issue gets confirmed/fixed later, this padding can likely go
       back to 12px. */
    padding: 9px 8px;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 13.5px;
    color: var(--ink) !important;
    /* nowrap (corrected from normal, 2026-10-01): mockup's .nav-dd-menu a{white-space:nowrap} --
       with the dropdown now a fixed 230px, nowrap keeps each label on one line like the mockup
       instead of wrapping differently depending on how much room is left after the icon/gap. */
    white-space: nowrap;
    /* line-height:normal (2026-10-01): same uncontested-legacy-default pattern as the top-level
       nav links (.navbarcsslink's 180.023% line-height, fixed earlier) -- these items were
       inheriting a large line-height (main.css's body{font:400 14px/26px ...} shorthand sets
       line-height:26px) since nothing here set its own, which is why each row measured roughly
       63px tall instead of the mockup's tight ~38px. */
    line-height: normal !important;
}
.dropdown-menu.dropdownstylecss .dropdown-item.menuincontext:hover{
    /* Restored to the mockup's own hover (2026-10-05, "the text hover style is still different with
       mockup" / "need the color change style"). Removing the cream background last week just
       exposed Bootstrap's own .dropdown-item:hover grey-blue (#e9ecef), which is what looked
       wrong. Mockup: .nav-dd-menu a:hover{background:cream-2} plus
       .n4l-public-page .site-nav nav a:hover{opacity:1;color:orange} (higher specificity than the
       purple in .nav-dd-menu a:hover, so dropdown item text goes ORANGE on hover). */
    background: var(--cream-2) !important;
    color: var(--orange) !important;
    opacity: 1;
    font-size: 13.5px !important;
}
.dropdown-menu.dropdownstylecss .menuiconright{ flex: 0 0 auto; width: 17px; height: 17px; }
/* Removed (2026-10-05, "the icons is still different with mockup"): this rule forced fill AND stroke
   purple on every <path> in the dropdown icons. It existed to recolor the old gray #5A5A5A inline
   svgs, but the icons are now the mockup's own svgs with their colors in the markup -- so it was
   filling the About Us outline icons solid (mockup: fill none, 2px stroke) and adding an extra
   stroke to the Services filled icons, making them look heavier than the mockup's. */

/* Services dropdown as a 2-column icon grid (2026-10-01), matching the mockup's
   .nav-dd-menu.services -- .services-grid/.all-services modifier classes added in
   _Layout_V2.cshtml only (About Us's dropdown-menu.dropdownstylecss, with no modifier, keeps the
   single-column list above).
   .show required on the selector (2026-10-01 fix, "Services menu is always active" bug): Bootstrap
   hides a closed dropdown-menu via a plain (non-!important) `display:none`, and toggles `display:
   block` by adding its own `.show` class -- an unconditional `display:grid !important` here, with
   no `.show` qualifier, beat Bootstrap's `display:none` even while CLOSED, which left the menu
   permanently laid out and very plausibly confused Bootstrap's open/close state tracking (hence
   "Services" staying stuck in its active/orange color after close). Scoping to `.show` means this
   rule does nothing at all until Bootstrap itself has already opened the dropdown. */
.dropdown-menu.dropdownstylecss.services-grid.show{
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto repeat(5, auto) !important;
    gap: 4px 14px !important;
    width: 460px !important;
    min-width: 460px !important;
    max-width: 90vw !important;
}
.dropdown-menu.dropdownstylecss.services-grid .dropdown-item.menuincontext{
    white-space: nowrap !important;
}
.dropdown-menu.dropdownstylecss.services-grid .dropdown-item.menuincontext.all-services{
    grid-column: 1 / -1;
    grid-row: 1;
    background: var(--cream-2) !important;
    color: var(--purple) !important;
    margin-bottom: 4px;
}

/* ===================== USER ACCOUNT DROPDOWN (logged-in header, top-right) =====================
   Real selectors confirmed in _Layout.cshtml (appears twice, desktop + a responsive duplicate --
   same classes both times, so one set of rules covers both): trigger =
   a.navbarcsslink.dropdown-toggle (plus .userIconDropdown on one copy), with
   img.navuserlogo_id / div.n4lAvatarFallback for the avatar. Menu = div.dropdown-menu.dropdownlocation,
   containing .boxred (company-name header bar), .user-inner > .cidNumber + a.user-login.dropdown-item
   .menuincontext per row, and a.sign-out. The company/Partner-ID line shown under the pill on the
   page itself is .n4l-ctx-subline. */
/* Unifies the trigger (<a>, avatar+name) and the .n4l-ctx-subline sibling below it into one
   cohesive rounded cream pill (2026-10-01), matching the mockup's .user-pill -- both children are
   real, separate elements (see the Fix 2026-09-08 comment above them) so this styles their shared
   parent, .n4l-user-pill-wrap, as the pill card instead of moving any markup. */
.n4l-user-pill-wrap{
    display: flex !important;
    flex-direction: column;
    background: var(--cream) !important;
    border-radius: var(--radius-md) !important;
    padding: 6px 14px !important;
    transition: background .15s ease;
}
.n4l-user-pill-wrap:hover{ background: var(--cream-2) !important; }
.n4l-user-pill-wrap .nav-item.dropdown.navbarcss_right{ padding: 0 !important; margin: 0 !important; }
.n4l-user-pill-wrap .n4l-ctx-subline{ margin-left: 45px; margin-top: -2px; }

.navbarcsslink.dropdown-toggle .n4lAvatarFallback,
.navbarcsslink.dropdown-toggle .navuserlogo_id{
    border: 2px solid var(--cream-2) !important;
}
.n4lAvatarFallback{
    background: var(--purple) !important;
    color: #fff !important;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    font-size: 13px;
}
.n4l-pill-name,
.navbarcsslink.userIconDropdown{
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
}
.n4l-ctx-subline{
    font-family: var(--font-body) !important;
    font-size: 11.5px !important;
    color: var(--ink-soft) !important;
}
.n4l-ctx-subline-copy{ color: var(--purple) !important; cursor: pointer; }

.dropdown-menu.dropdownlocation{
    border: 1px solid #F1E2CE !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 24px 48px -18px rgba(42,0,124,.28) !important;
    overflow: hidden;
    padding: 0 !important;
}
.dropdown-menu.dropdownlocation .boxred{
    background: var(--purple) !important;
    padding: 14px 16px !important;
}
.dropdown-menu.dropdownlocation .boxred h5{
    color: #fff !important;
    font-family: var(--font-heading) !important;
    font-size: 14px;
}
.dropdown-menu.dropdownlocation .user-inner{ padding: 10px !important; }
.dropdown-menu.dropdownlocation .cidNumber h6{
    color: var(--ink-soft) !important;
    font-family: var(--font-body) !important;
    font-size: 11.5px;
    font-weight: 600 !important;
    padding: 4px 8px;
}
.dropdown-menu.dropdownlocation a.user-login.dropdown-item.menuincontext{
    border-radius: 10px !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 13.5px;
    color: var(--ink) !important;
}
.dropdown-menu.dropdownlocation a.user-login.dropdown-item.menuincontext:hover{
    background: var(--cream-2) !important;
    color: var(--orange) !important;
}
.dropdown-menu.dropdownlocation a.sign-out{
    background: var(--cream-2) !important;
    color: #B4590A !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    border: none !important;
}
.dropdown-menu.dropdownlocation a.sign-out:hover{ background: #FFE3C4 !important; }
.dropdown-menu.dropdownlocation a.sign-out svg path{ fill: #B4590A !important; }

/* ===================== BUTTONS (Bootstrap base, used across most of the 160 views) ===================== */
.btn{
    border-radius: 12px !important;
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
    transition: transform .15s ease, box-shadow .15s ease;
}
.btn-primary,
.btn.btn-primary{
    background: var(--orange) !important;
    border-color: var(--orange) !important;
    box-shadow: var(--shadow-warm) !important;
}
.btn-primary:hover,
.btn.btn-primary:hover{
    background: #E65400 !important;
    border-color: #E65400 !important;
    transform: translateY(-2px);
}
.btn-outline-primary{
    color: var(--purple) !important;
    border-color: var(--purple) !important;
}
.btn-outline-primary:hover{
    background: var(--purple) !important;
    border-color: var(--purple) !important;
}

/* The header's real Login/Join Now buttons use .dc-btn/.dc-btn-white (2026-10-01 fix) -- NOT
   Bootstrap's .btn-primary/.btn-outline-primary above, which never matched them at all. Found
   because .dc-btn-white's own 2px solid purple border (style_theme.css) was rendering as a bold
   outline the mockup's borderless/subtle Login button doesn't have. These two classes are reused
   across many of the 160 views as the site's general CTA pair, not just in the header. */
.btn.dc-btn{
    background: linear-gradient(135deg, var(--orange) 0%, #FF8541 100%) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 12px !important;
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: none !important;
    line-height: normal !important;
    padding: 10px 22px !important;
    width: auto !important;
    box-shadow: var(--shadow-warm) !important;
}
.btn.dc-btn:hover{
    /* mockup's .btn:hover is ONLY the lift -- no box-shadow change (2026-10-01, confirmed
       against index.html's .btn:hover{transform:translateY(-2px)}; the extra glow below was
       an unrequested enhancement, removed to match exactly). */
    transform: translateY(-2px);
}
.btn.dc-btn-white{
    background: #fff !important;
    border: 1.5px solid #E7D8C6 !important;
    color: var(--purple) !important;
    border-radius: 12px !important;
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: none !important;
    line-height: normal !important;
    padding: 10px 22px !important;
    width: auto !important;
}
.btn.dc-btn-white:hover{ border-color: var(--purple) !important; }

/* ===================== SESSION-GATED SIDEBAR (logged-in dashboard nav) =====================
   Real selectors confirmed in _Layout.cshtml's "//====new===" sidebar block: aside#left-panel.
   dashboard-nav > nav.dashboard-nav-list > .dashboard-nav-dropdown.sidebar-nav-item, each with a
   group-toggle row (.sidebar-menu > .text > a.dashboard-nav-item.dashboard-nav-dropdown-toggle >
   .parent-text > .for-icon img + .for-text h6) and child rows
   (.dashboard-nav-dropdown-menu > .dashboard-nav-dropdown-item > .child-node > .horizontal-line/
   .vertical-line (tree-branch connector lines) + .text > a > h6). */
aside#left-panel.dashboard-nav{
    background: #FFFFFF !important;
    border-right: 1px solid #F0E4D6 !important;
}
.dashboard-nav-dropdown-toggle .for-icon img{
    /* Icons ship as colored SVG files (not currentColor-aware), so they're left as-is rather than
       forced to a single color; sizing/alignment only. */
    width: 20px;
    height: 20px;
}
.dashboard-nav-dropdown-toggle .for-text h6{
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    font-size: 14px;
}
.sidebar-nav-item:hover > .sidebar-menu .for-text h6{ color: var(--purple) !important; }
.sidebar-nav-item .sidebar-menu{ border-radius: 10px; transition: background .15s ease; }
.sidebar-nav-item:hover .sidebar-menu{ background: var(--cream-2) !important; }
/* The tree-branch connector lines (horizontal-line/vertical-line) are a deliberate visual
   language the mockup doesn't use, but removing them would be a structural change -- recolored to
   the warm palette instead of hidden. */
.child-node .horizontal-line,
.child-node .vertical-line{
    background: #F0E4D6 !important;
    border-color: #F0E4D6 !important;
}
.dashboard-nav-dropdown-item .text h6{
    color: var(--ink-soft) !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 13px;
    border-radius: 10px;
    transition: color .15s ease, background .15s ease;
}
.dashboard-nav-dropdown-item .text a:hover h6{
    color: var(--orange) !important;
    background: var(--cream-2) !important;
}

/* ===================== FOOTER =====================
   Real selectors confirmed in _Layout.cshtml: footer.site-footer > .footer-inner, with
   .dc-fwidgettitle (h3 headings), .dc-fwidgetcontent (link lists), .footeraddress,
   .dc-simplesocialicons.footer-icons. */
footer.site-footer{
    /* 2026-10-01: was an approximated 160deg/#341552->var(--purple) gradient -- replaced with the
       mockup's own exact declared gradient (index.html .n4l-public-page footer.site), which is why
       the color never matched. */
    background: linear-gradient(135deg, #341552, #7A2C4E) !important;
    color: #fff !important;
    /* Height fix (2026-10-01): legacy footer.site-footer{padding:0 1.875em} already zeroes this
       element's own top/bottom padding, but the real inflation is .footer-inner's own
       `padding:2.45em 1.125em` (style_theme.css) stacking on top of whatever we add here --
       ~39px top AND bottom on top of this. Zeroed that below and set the mockup's own exact
       footer padding (index.html: padding:64px 0 20px) here instead of splitting it across
       two nested elements. */
    padding: 48px 0 16px !important;
}
footer.site-footer .footer-inner{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* Height (2026-10-05, "need to decrease the height of site-footer"): the remaining height was the
   legacy typography, not padding -- .dc-fwidgettitle{margin-top:20px;line-height:40px;font-size:24px},
   .footeraddress h5{font-size:20px!important} (style_theme.css), .dc-fwidgetcontent li{padding:7px 0}
   (main.css). Set to the mockup's own footer values (index.html .footer-grid): h4 14-15px with
   10px margin, address 12.5px/1.55, link rows 13px with 6px gap (= 3px padding each side). */
footer.site-footer .dc-fwidgettitle{
    margin-top: 0 !important;
    line-height: 1.3 !important;
}
footer.site-footer .dc-fwidgettitle h3{
    font-size: 15px !important;
    margin-bottom: 10px !important;
}
/* Second height pass (2026-10-05, "need to decrease the height more"), measured at 1536px: the left
   column set the footer height (logo 50px + <br> 17px + two address blocks whose h5 rows were 40px
   because of a legacy line-height:40px). Mockup: .footer-logo{height:34px;margin-bottom:16px},
   h4 at normal line-height. Same h3 line-height fix for the other columns' titles (50px -> ~30px). */
footer.site-footer img.logosize{
    /* Logo size match (2026-10-05, "size of nav bar logo and site footer logo consistent"): the header logo
       is NETFORLOG_LOGO_V2.png (5.78:1) at 32px high = 185px wide; the footer logo is NETFORLOG_LOGO_W.png
       (5.0:1), so the same 32-34px HEIGHT gave a visibly narrower footer logo (170px). Matched on WIDTH
       (what the eye compares): 185px on desktop, 143px at <=640px like the header. */
    height: auto !important;
    width: 185px !important;
    display: block;
    margin-bottom: 16px;
}
footer.site-footer .col-sm-3 > br{
    display: none;
}
footer.site-footer .dc-fwidgettitle h3,
footer.site-footer .footeraddress h5{
    line-height: 1.3 !important;
}
footer.site-footer .contact-us.dc-fwidgettitle{
    margin-top: 18px !important;
}
footer.site-footer .footeraddress h5{
    font-size: 15px !important;
    margin: 0 0 10px !important;
}
footer.site-footer .footeraddress p{
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    margin: 0 0 8px !important;
}
footer.site-footer .dc-fwidgetcontent li{
    padding: 3px 0 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}
footer.site-footer .dc-fwidgetcontent.footeraddress{
    line-height: 1.55 !important;
}
footer.site-footer h3,
footer.site-footer h5{
    color: #fff !important;
    font-family: var(--font-heading) !important;
    font-size: 16px;
    margin-bottom: 14px;
}
footer.site-footer .dc-fwidgetcontent,
footer.site-footer .footeraddress{
    color: rgba(255,255,255,.75) !important;
    font-family: var(--font-body) !important;
}
footer.site-footer .dc-fwidgetcontent li a,
footer.site-footer a{
    color: rgba(255,255,255,.78) !important;
}
footer.site-footer .dc-fwidgetcontent li a:hover,
footer.site-footer a:hover{
    color: var(--orange-light) !important;
}
/* Net4Log Services 2-column wrap (2026-10-01, "Services need to wrapped to two side"): the
   _Layout_V2.cshtml markup already splits the 10 service links into two separate
   <ul class="dc-fwidgetcontent"> inside a .footer-services-grid wrapper (matching the mockup's
   own 2-column footer list), but no CSS ever laid them out side by side -- .dc-fwidgetcontent's
   own width:100% (main.css) made each ul take the full column width and stack, so all 10 links
   rendered as one long single list. This was also the main driver of the footer still looking too
   tall: 10 stacked rows instead of 5. */
footer.site-footer .footer-services-grid{
    /* clear:both fix (2026-10-01, "its broken now ... why we need this much space above the
       net4log icon and after the address" -- the services column collapsed to 0 width and
       overlapped the next column): root cause was .dc-fwidgettitle{float:left;width:100%}
       (main.css) -- a full-width LEGACY FLOAT immediately before this div. A sibling that
       establishes its own formatting context (this flex row does) computes its available width
       as the space beside an uncleared float, which is 0 once the float already spans the full
       column, so the flex row got squeezed to 0 width and rendered flush against the float's
       right edge instead of dropping below it. clear:both forces it below the floated heading. */
    clear: both;
    display: flex;
    gap: 16px;
}
footer.site-footer .footer-services-grid .dc-fwidgetcontent{
    width: auto;
    flex: 1;
}
footer.site-footer .dc-simplesocialicons.footer-icons{
    /* CustomLayout.css's own .dc-simplesocialicons{display:flex;width:200px} (loaded twice,
       uncontested) was squeezing all 6 icons' flex-basis down from 34px to 25px via flex-shrink --
       6*34px + 5*10px gaps = 254px needed vs a fixed 200px container. Freed to its natural content
       width so the explicit 34px circles below aren't shrunk. */
    width: auto !important;
}
footer.site-footer .dc-simplesocialicons.footer-icons li{
    /* mockup's .social a is a fixed 34x34 circle (index.html .n4l-public-page .social a) --
       without an explicit width/height here the li only ever took the image's own box (30x25,
       not square), so border-radius:50% never actually drew a circle. Icons themselves are kept
       as the real brand PNGs (Instagram/Facebook/LinkedIn/X/YouTube) rather than swapped for the
       mockup's flat glyphs -- that's an asset change, not a style one. */
    flex-shrink: 0;
    background: rgba(255,255,255,.14) !important;
    border-radius: 50% !important;
    width: 34px;
    height: 34px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: background .15s ease;
}
/* Social glyphs (2026-10-05, "icons different with mockup"): icons are now the mockup's own white
   inline svgs instead of the colored brand PNGs. The legacy .dc-socialiconsborder li.dc-googleplus a
   rules (main.css) gave each <a> its own bordered/colored box, which is what sat the white circle
   below the translucent one -- zeroed so the glyph centers inside the li circle. */
footer.site-footer .dc-simplesocialicons.footer-icons li a{
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #fff !important;
    line-height: 1;
}
footer.site-footer .dc-simplesocialicons.footer-icons li:hover{
    background: var(--orange) !important;
}

/* ===================== GENERIC CARD/PANEL TREATMENT (best-effort, body content) =====================
   Bootstrap's own .card is the one body-content class common enough across the 160 views to touch
   safely here; anything more specific to an individual page's own markup is left for that page's
   own incremental restyle pass (see rollout plan). */
.card{
    border: 1px solid #F0E4D6 !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-soft) !important;
}
.badge{
    font-family: var(--font-body) !important;
    font-weight: 700 !important;
    border-radius: 20px !important;
}

/* ===================== LOGIN POPUP (#loginbox) =====================
   2026-10-05, "need to change the login popup like this". Restyle of the existing Bootstrap modal in
   _Layout_V2.cshtml to the mockup's .n4l-modal / .n4l-form (index.html:481-512), using its exact values
   and its own locally-scoped palette (--n4l-*: purple #2B0A78, ink #1B1530, muted #5B5670, orange
   #FF6B1A / dark #D9530A, field #FFF6EF, line #F1E3D6). Everything is #loginbox-scoped so other modals
   are untouched; legacy login rules in CustomLayout.css (65% dialog, 550px row, image column, gray
   #ACACAC input borders) are overridden here rather than edited. */
#loginbox{
    --n4l-purple:#2B0A78; --n4l-ink:#1B1530; --n4l-muted:#5B5670;
    --n4l-orange:#FF6B1A; --n4l-orange-dark:#D9530A; --n4l-field:#FFF6EF; --n4l-line:#F1E3D6;
    background: rgba(30,20,50,.55) !important;
    backdrop-filter: none !important;
    font-family: var(--font-body);
    color: var(--n4l-ink);
}
body:has(#loginbox.show) .modal-backdrop{ opacity: 0 !important; }
#loginbox .modal-dialog{
    max-width: 460px !important;
    width: min(460px, calc(100% - 48px));
    margin: 60px auto 24px !important;
}
/* Phone fix (2026-10-05, "in mobile view login popup need to fix"): CustomLayout.css has a
   @media(max-width:768px) rule that takes .login-model-content .row .right-section out of flow
   (position:absolute; top:50%; height:100%; translateY(-50%)) for the old image+form layout -- with the
   image column gone it collapsed the card to 16px tall and shoved the form out of it. Reset to normal flow.
   Dialog also keeps the mockup's 24px side gutters (overlay padding 60px 24px 24px). */
#loginbox .login-model-content .row .right-section{
    position: static !important;
    top: auto !important;
    height: auto !important;
    transform: none !important;
    width: 100%;
}
#loginbox .modal-content.login-model-content{
    padding: 8px;
    background: #fff;
    border: 0 !important;
    border-radius: 22px !important;
    box-shadow: 0 30px 80px rgba(20,4,64,.35) !important;
    overflow: visible;
}
#loginbox .login-model-content .row{ height: auto !important; margin: 0; }
#loginbox .login-model-content .row .right-section .form-section,
#loginbox .form-section{
    position: relative;
    width: 100% !important;
    height: auto !important;
    padding: 44px 32px 16px !important;
}
#loginbox .warm-login-avatar{
    position: absolute;
    top: -44px;
    left: 50%;
    transform: translateX(-50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--n4l-orange);
    border: 6px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(255,107,26,.3);
}
#loginbox .form-section .close-section{
    position: absolute;
    top: 2px;
    right: 2px;
    height: auto !important;
    z-index: 2;
}
#loginbox .close-section .close{
    width: 44px;
    height: 44px;
    padding: 0;
    float: none;
    opacity: 1;
    color: var(--n4l-ink);
    display: flex;
    align-items: center;
    justify-content: center;
}
#loginbox .heading-section{ text-align: center; margin-bottom: 14px !important; }
#loginbox .heading-section .loginHeading{
    text-transform: none !important;
    margin: 0 0 6px !important;
    font: 700 24px/1.2 var(--font-heading);
    color: var(--n4l-purple);
    text-align: center;
}
#loginbox .warm-login-lede{ margin: 0; font-size: 14px; color: var(--n4l-muted); text-align: center; }
#loginbox .home-login{ display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
#loginbox .home-login label{
    margin: 0 !important;
    font-size: 13px;
    font-weight: 600;
    color: var(--n4l-ink);
}
#loginbox .home-login > *{ flex-shrink: 0; }
#loginbox .home-login{ height: auto !important; }
#loginbox .home-login input{
    flex: 0 0 auto;
    width: 100% !important;
    max-width: 100% !important;
    height: 40px;
    padding: 0 16px !important;
    border: 1px solid var(--n4l-line) !important;
    border-radius: 10px !important;
    background: var(--n4l-field);
    font: inherit;
    font-size: 14px;
    color: var(--n4l-ink);
}
#loginbox .home-login input:focus{
    outline: none;
    border: 1px solid var(--n4l-orange) !important;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255,107,26,.15);
}
#loginbox .home-login .password-input input{ padding-right: 48px !important; }
#loginbox .password-input img{ right: 16px; margin-right: 0; width: 20px; }
#loginbox .form-group.d-flex{ align-items: center; margin: 0 0 14px !important; font-size: 13px; }
#loginbox .dc-checkbox label{ color: var(--n4l-muted) !important; font-size: 13px; }
#loginbox a{ color: var(--n4l-orange) !important; font-weight: 600; text-decoration: none; }
#loginbox a:hover{ color: var(--n4l-orange-dark) !important; }
#loginbox .login-button .btn.dc-btn{
    width: 100% !important;
    height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 22px !important;
    background: var(--n4l-orange) !important;
    color: #fff !important;
    font: 600 16px var(--font-heading) !important;
    box-shadow: 0 10px 24px rgba(255,107,26,.28) !important;
}
#loginbox .login-button .btn.dc-btn:hover{ background: var(--n4l-orange-dark) !important; transform: none; }
#loginbox .join-now{ margin-top: 12px !important; font-size: 13px; color: var(--n4l-muted); }
#loginbox .join-now .DontHaveAnAccount{ font-size: 13px; font-weight: 400; color: var(--n4l-muted); }
#loginbox .join-now a{ color: var(--n4l-purple) !important; }
@media (max-width: 480px){
    #loginbox .form-section{ padding: 44px 16px 16px !important; }
}

/* ===================== MOBILE NAV + FOOTER (<=1200px header / <=1020px footer) =====================
   2026-10-05, "mobile view nav bar will be like this need like in the mockup / the site-footer also refer
   the mockup". Mockup (index.html .n4l-public-page): header = logo + Join Now + burger (Login moves into
   the panel at <=640px), burger opens a full-width white panel under the header with 15px/600 rows divided
   by hairlines, accordion groups with a chevron, 13.5px sub-items, and a Login + Join Now row at the
   bottom. The real site's own mobile menu (#toggleSidebar -> nav#sidebar, .sidebarlist accordion JS) is
   kept; only its look/position changed here, plus the Login/Join row added in _Layout_V2.cshtml. */
#toggleSidebar{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    margin: 0 !important;
    border-radius: 8px;
    color: var(--ink);
    cursor: pointer;
}
#toggleSidebar:hover{ background: var(--cream-2); }
/* Desktop width: the mobile menu panel must never show. Without this, a menu left open on a phone-sized window re-appeared as the legacy
   250px off-canvas sidebar (CustomLayout.css .sidebar.open) once the window was widened again (e.g. leaving Chrome's device mode). */
@media (min-width: 1201px){
    #sidebar.sidebar, #sidebar.sidebar.open{ display: none !important; }
}
.mobile-nav-actions{ display: none; }
@media (max-width: 1200px){
    header#header .res-right .navbarcss_right{ margin-top: 0 !important; }
    header#header .res-right{ gap: 10px !important; }
    header#header .res-right .btn.navResBtn{ white-space: nowrap; }
    #sidebar.sidebar{
        display: none;
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        width: auto;
        height: auto;
        max-height: calc(100vh - 70px);
        overflow-x: hidden;
        overflow-y: auto;
        background: #fff;
        border-bottom: 1px solid #F0E7DC;
        box-shadow: 0 16px 28px -12px rgba(43,33,64,.18);
        padding: 8px 24px 20px;
        transition: none;
    }
    #sidebar.sidebar.open{ display: block; right: 0; }
    #sidebar, #sidebar .menu-bar, #sidebar .sidebarUl li, #sidebar .sidebarUl li a{ text-align: left !important; }
    #sidebar .menu-bar{ padding: 0; }
    #sidebar .sidebarUl{ list-style: none; margin: 0; padding: 0; }
    #sidebar .sidebarUl li.sidebarlist{
        position: relative;
        margin: 0;
        padding: 0;
        border-bottom: 1px solid #F5EDE3;
        background: transparent !important;
    }
    #sidebar .sidebarUl li.sidebarlist:hover,
    #sidebar .sidebarlist.active{ background: transparent !important; }
    #sidebar .sidebarUl li.sidebarlist > a{
        display: block;
        padding: 13px 2px;
        font-family: var(--font-body);
        font-size: 15px;
        font-weight: 600;
        color: var(--ink) !important;
    }
    #sidebar .sidebarUl li.sidebarlist > a:hover,
    #sidebar .sidebarUl li.sidebarlist.show > a{ color: var(--orange) !important; }
    #sidebar .sidebarUl li i.fa-angle-down{
        top: 17px;
        right: 2px;
        margin-top: 0;
        font-size: 14px;
        line-height: 14px;
        color: var(--ink-soft);
        transition: transform .18s ease;
        pointer-events: none;
    }
    #sidebar .sidebarlist.show i.fa-angle-down{ transform: rotate(180deg); color: var(--orange); }
    #sidebar .sidebarlist .node-sideList{ padding-left: 14px; background: transparent; }
    #sidebar .sidebarlist .node-sideList a{
        display: block;
        height: 0;
        padding: 0 8px;
        font-family: var(--font-body);
        font-size: 13.5px;
        font-weight: 600;
        color: var(--ink-soft) !important;
        background: transparent;
        overflow: hidden;
        transition: none;
    }
    #sidebar .sidebarlist.show .node-sideList a{ height: auto; padding: 11px 8px !important; line-height: 1.4; }
    #sidebar .sidebarlist .node-sideList a:hover{ color: var(--purple) !important; background: transparent; }
    #sidebar .node-sideList img.menuiconright,
    #sidebar .node-sideList svg.menuiconright{ display: none; }
    #sidebar .mobile-nav-actions{ display: flex; gap: 10px; margin-top: 16px; }
    #sidebar .mobile-nav-actions .btn{
        flex: 1;
        min-height: 42px;
        padding: 0 18px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
        font-family: var(--font-body) !important;
        font-weight: 700 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: auto !important;
    }
}
@media (max-width: 640px){
    /* Swapped on request (2026-10-05, "instead of Join Now show login ... easy for an existing user"):
       the mockup shows Join Now here; the phone header now shows Login and Join Now stays one tap away in
       the menu panel (and the hero's Register Now button). */
    header#header .res-right .navbarcss_right:has(> .btn.dc-btn){ display: none; }
    /* phone width: logo + Join Now + burger have to share 375px (24px side padding) -- the 185px / 32px
       logo plus the 24px header gap pushed the burger off-screen (page scrollWidth 391 at 375). Logo
       scaled to ~143px wide (the width it renders at in the mockup's own 375px view) and the gap tightened. */
    header#header.header{ gap: 12px; }
    header#header .top-left{ min-width: 0; flex: 0 1 auto; }
    header#header .navbar-header{ height: auto !important; }
    header#header .logosize{ height: auto !important; width: 143px !important; max-width: 100%; top: 0; left: 0; }
}
/* Footer columns: mockup .foot-grid is 2 columns at <=1020px, 1 column at <=640px. */
@media (max-width: 1020px){
    footer.site-footer .footer-inner > .row > [class*="col-"]{
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 22px;
    }
}
@media (max-width: 640px){
    footer.site-footer .footer-inner > .row > [class*="col-"]{
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 640px){
    footer.site-footer img.logosize{ width: 143px !important; }
}

/* ===================== PROFILE CARD (.n4l-pill-v2) =====================
   2026-10-05, "this will be the new layout user profile card". Mockup .user-pill (index.html:88-94):
   cream pill, 34px purple avatar, name + registered/trusted badge, "Company . Partner ID" underneath.
   The trigger <a> is the pill; the dropdown below it keeps the existing menu. Replaces the old white
   .profileDet card, its absolutely-positioned badge link and the separate .n4l-ctx-subline line. */
header#header .n4l-pill-v2{
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    height: auto !important;
}
header#header .n4l-pill-v2 > a.dropdown-toggle{
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: auto !important;
    height: auto !important;
    background: var(--cream) !important;
    padding: 6px 14px 6px 6px !important;
    border-radius: 40px !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--ink) !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
    transition: background .15s ease;
}
header#header .n4l-pill-v2 > a.dropdown-toggle:hover,
header#header .n4l-pill-v2.show > a.dropdown-toggle{ background: var(--cream-2) !important; }
header#header .n4l-pill-v2 > a.dropdown-toggle::after{ display: none !important; }
header#header .n4l-pill-v2 .navuserlogo_id,
header#header .n4l-pill-v2 .navuserlogo_fallback{
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    object-fit: cover;
    flex: 0 0 34px;
}
header#header .n4l-pill-v2 .navuserlogo_fallback{
    background: var(--purple) !important;
    color: #fff !important;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}
header#header .n4l-pill-v2 .n4l-who{ display: block; min-width: 0; text-align: left; }
header#header .n4l-pill-v2 .n4l-who-name{
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
}
header#header .n4l-pill-v2 .n4l-who-text{
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
header#header .n4l-pill-v2 .n4l-who-sub{
    display: block;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 400;
    color: var(--ink-soft);
}
header#header .n4l-pill-v2 .n4l-ctx-subline-copy{ color: inherit !important; cursor: pointer; }
header#header .n4l-pill-v2 .n4l-badge-ic{ flex: 0 0 18px; width: 18px; height: 18px; }
/* Phone/tablet header: avatar-only pill, like the mockup (#dashHeader .user-pill .who{display:none}) */
@media (max-width: 1200px){
    header#header .res-right .n4l-pill-v2 > a.dropdown-toggle{ padding: 4px !important; gap: 0; }
    header#header .res-right .n4l-pill-v2 .n4l-who{ display: none; }
}

/* ===================== LOGGED-IN LEFT MENU (V2) =====================
   2026-10-05, "the left side menu list should come from the v2". Restyles the existing menu in
   _Layout_V2.cshtml (aside#left-panel, same markup, same links, same expand/collapse script) to the
   mockup's .dash-sidebar / .dash-nav-item / .dash-subnav (index.html:339-382): 264px white drawer,
   Poppins 700 rows with a 34px cream icon tile, chevron that flips when open, and a dashed rail with
   13px sub-links. The old blue (#e3eff9 / #165f9d) hover/open colours and the black tree connector lines
   are replaced; the blue came from legacy rules in style_theme.css. */
aside#left-panel.left-panel.dashboard-nav{
    width: 264px;
    min-width: 264px;
    max-width: 264px;
    left: -270px;
    background: #fff !important;
    border-right: 1px solid #F0E7DC;
    box-shadow: 0 18px 40px -18px rgba(42,0,124,.3);
    padding: 0;
}
aside#left-panel.left-panel.dashboard-nav.open{ left: 0; }
/* The open left menu is an overlay drawer at every width (2026-10-05, "when taking left side menu the screen is going to right side that is not required"):
   the page and footer stay where they are and the drawer simply sits over them. (A page-push rule added for the old Partner Directory filter sidebar
   was removed -- that sidebar is gone in V2.) */
aside#left-panel .dashboard-nav-list{ padding: 22px 14px; }
aside#left-panel .header-main{ display: none; }
aside#left-panel .dashboard-nav-dropdown.padding.mainlist{ padding: 0 !important; row-gap: 4px; }
aside#left-panel .sidebar-menu .text{ border-radius: 14px; margin: 0 !important; }
aside#left-panel .sidebar-menu .text:hover,
aside#left-panel .sidebar-nav-item.show > .sidebar-menu .text{ background: var(--cream-2) !important; }
aside#left-panel a.dashboard-nav-item.dashboard-nav-dropdown-toggle{
    margin: 0;
    min-height: 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: transparent !important;
}
aside#left-panel .parent-text{ padding-left: 0; gap: 12px; }
aside#left-panel .parent-text .for-icon{
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--cream-2);
    display: flex;
    align-items: center;
    justify-content: center;
}
aside#left-panel .parent-text .for-icon img{ width: 20px; margin: 0; }
aside#left-panel .parent-text .for-text{ padding-left: 0; align-items: center; }
aside#left-panel .parent-text .for-text h6{
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    color: var(--ink) !important;
    text-transform: none;
}
aside#left-panel .sidebar-menu .text:hover .for-text h6,
aside#left-panel .sidebar-nav-item.show > .sidebar-menu .text .for-text h6{ color: var(--purple) !important; }
aside#left-panel .dropArrow .fa-angle-down{
    margin-right: 0;
    color: var(--ink-soft) !important;
    font-size: 14px;
    top: 0 !important;
    transition: transform .18s ease;
}
aside#left-panel .sidebar-nav-item.show > .sidebar-menu .text .dashboard-nav-item .parent-text .dropArrow .fa-angle-down{
    transform: rotate(180deg);
    top: 0 !important;
    color: var(--ink-soft) !important;
}
aside#left-panel .dashboard-nav-dropdown-menu{
    margin: 0 0 0 17px;
    padding-left: 22px;
    border-left: 2px dashed #F0DCC5;
}
aside#left-panel .child-node .horizontal-line,
aside#left-panel .child-node .vertical-line{ display: none; }
aside#left-panel .dashboard-nav-dropdown-item .child-node{ height: auto; }
aside#left-panel .child-node .text{
    margin: 0;
    width: 100%;
    height: auto;
    padding: 9px 14px;
    border-radius: 10px;
}
aside#left-panel .child-node .text h6{
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    color: var(--ink-soft);
    text-transform: none;
}
aside#left-panel .child-node .text:hover{ background: var(--cream-2) !important; }
aside#left-panel .child-node .text:hover h6{ color: var(--purple) !important; }
aside#left-panel .dashboard-nav-dropdown.show > .dashboard-nav-dropdown-menu .dashboard-nav-dropdown-item{ height: 42px; }
/* Gaps so the hover / active backgrounds never touch (2026-10-05, "when hovering the first menu it is touching the main menu"):
   4px between the parent row and its first sub-item, 2px above and below every sub-item's own highlight. The dashed rail stays
   continuous because it is a border on the sub-menu, not on the sub-item. */
aside#left-panel .sidebar-menu + .dashboard-nav-dropdown-menu{ margin-top: 4px; }
aside#left-panel .child-node .text{ margin: 2px 0; }

/* ===================== LEFT-MENU TOGGLE + PROFILE DROPDOWN (V2) =====================
   2026-10-05 ("3 line is not well aligned with nav bar", "icons need to change as per new UI",
   "Sign Out button need to stretch like mockup"). Mockup: .hamburger-ic = 22px purple 3-line svg in an
   8px-padded rounded box (cream on hover), vertically centred with the logo; .user-dropdown = white
   card, 13.5px/600 rows with a 16px purple line icon, divider, full-width cream Sign Out. */
header#header .navbar-header{ display: flex !important; align-items: center !important; }
header#header .menutoggle{
    position: static !important;
    top: auto !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: auto !important;
    height: auto !important;
    margin: 0 6px 0 0 !important;
    padding: 8px;
    border-radius: 8px;
    line-height: 1;
    color: var(--purple) !important;
    transition: background .15s ease;
}
header#header .menutoggle:hover{ background: var(--cream-2); }
header#header .menutoggle svg{ display: block; }

header#header .n4l-pill-v2 .dropdown-menu.dropdownlocation{
    width: 252px;
    min-width: 252px;
    padding: 10px;
    background: #fff;
    border: 1px solid #F1E2CE;
    border-radius: 18px;
    box-shadow: 0 24px 48px -18px rgba(42,0,124,.35);
    margin-top: 12px;
    overflow: visible;
}
header#header .n4l-pill-v2 .dropdownlocation .boxred,
header#header .n4l-pill-v2 .dropdownlocation .cidNumber{ display: none; }
header#header .n4l-pill-v2 .dropdownlocation .user-inner{ padding: 0; margin: 0; }
header#header .n4l-pill-v2 .dropdownlocation a.user-login.dropdown-item{
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink) !important;
    background: transparent;
    white-space: nowrap;
}
header#header .n4l-pill-v2 .dropdownlocation a.user-login.dropdown-item:hover{ background: var(--cream-2) !important; color: var(--orange) !important; }
header#header .n4l-pill-v2 .dropdownlocation .ic{ flex: 0 0 16px; display: flex; color: var(--purple); }
header#header .n4l-pill-v2 .dropdownlocation a.user-login img{ display: none; }
header#header .n4l-pill-v2 .dropdownlocation div[style*="text-align:center"]{ text-align: initial !important; }
header#header .n4l-pill-v2 .dropdownlocation a.sign-out{
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100% !important;
    margin: 12px 0 0 !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--cream-2) !important;
    color: #B4590A !important;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 700;
    box-shadow: none !important;
}
header#header .n4l-pill-v2 .dropdownlocation a.sign-out:hover{ background: #FFE3C4 !important; }
header#header .n4l-pill-v2 .dropdownlocation a.sign-out .ic{ color: #B4590A; }
header#header .n4l-pill-v2 .dropdownlocation #deleteAccountBtn{
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100% !important;
    margin: 6px 0 0 !important;
    padding: 9px 12px !important;
    border: 1.5px solid #F3C9C9 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #C0392B !important;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 700;
}
header#header .n4l-pill-v2 .dropdownlocation #deleteAccountBtn:hover{ background: #FDEDEC !important; }
header#header .n4l-pill-v2 .dropdownlocation #deleteAccountBtn .ic{ color: #C0392B; }

/* ===================== LOGGED-IN MOBILE DRAWER (V2) =====================
   2026-10-05, "check the mobile view need like in the mockup after login". Mockup (<=860px): header =
   hamburger + logo + avatar; the hamburger opens ONE drawer with the public menu on top, a divider, then
   the partner menu. Real site had two burgers (left = partner menu, right = public menu): at <=1200px a
   logged-in user now gets the single left burger/drawer; the public links are repeated inside the drawer
   (_Layout_V2.cshtml .n4l-mobile-public-menu) and the right burger is hidden. */
.n4l-mobile-public-menu, .n4l-mobile-public-divider{ display: none !important; }
aside#left-panel .parent-text .for-icon svg{ width: 18px; height: 18px; color: var(--purple); }
@media (max-width: 1200px){
    aside#left-panel .dashboard-nav-dropdown.n4l-mobile-public-menu{ display: flex !important; }
    aside#left-panel .n4l-mobile-public-divider{ display: block !important; height: 1px; background: #F0E7DC; margin: 14px 6px; }
    header#header .res-right:has(.n4l-pill-v2) .navbarcss_right:has(> #toggleSidebar){ display: none; }
}

/* ===================== PROFILE DROPDOWN: COMPANY/ID LINE + MOBILE POSITION (V2) =====================
   2026-10-05. Mockup .user-dropdown-meta: company . Partner ID centred under Sign Out, shown only where the
   header pill is avatar-only (<=1200px; the pill already shows it above that). On phone/tablet the legacy rule
   (style_theme.css, .res-right ... .show {position:fixed; top:90px}) left a 20px gap under the 70px header;
   the menu now drops straight from the nav bar's bottom edge. */
.n4l-dd-meta{ display: none; }
@media (max-width: 1200px){
    header#header .n4l-pill-v2 .dropdownlocation .n4l-dd-meta{
        display: block;
        padding: 10px 12px 2px;
        font-family: var(--font-body);
        font-size: 12px;
        font-weight: 600;
        color: var(--ink-soft);
        text-align: center;
        word-break: break-word;
    }
}
/* Profile dropdown top = the About Us / Services dropdown top, desktop AND phone/tablet (2026-10-05).
   Measured on the live header (70px, fixed): those menus start at y = 62.8px, so the profile menu is pinned
   to the viewport at 63px instead of hanging off the pill. Right edge = the header's 24px side padding
   (<=1200px keeps the 10px right inset from style_theme.css). transform:none cancels Bootstrap/Popper's
   inline translate3d, which would otherwise offset the fixed box. */
header#header .n4l-pill-v2 .dropdown-menu.dropdownlocation.show{
    position: fixed !important;
    top: 63px !important;
    right: 24px !important;
    left: auto !important;
    margin-top: 0 !important;
    transform: none !important;
}
@media (max-width: 1200px){
    header#header .res-right .n4l-pill-v2 .dropdown-menu.dropdownlocation.show{ right: 10px !important; }
}

/* ===================== SITE FOOTER (footer.n4l-ftr) -- 2026-10-05 =====================
   The supplied net4log-footer design, replacing the old footer.site-footer block (kept above for _Layout.cshtml-era rules; not used by _Layout_V2).
   !important only where the global WarmTheme rules (h1-h6 / a colours) or legacy footer/ul/h3 styles would otherwise win. */
footer.n4l-ftr{ background: linear-gradient(105deg,#341552 0%,#4f1e50 45%,#68264f 80%,#792c4e 100%); color: #fff; font-family: var(--font-body); font-size: 14px; line-height: 1.5; clear: both; padding: 0; }
footer.n4l-ftr .ftr-in{ max-width: 1290px; margin: 0 auto; padding: 32px 40px 16px; box-sizing: border-box; display: flex; flex-direction: column; }
footer.n4l-ftr .ftr-top{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.18); }
footer.n4l-ftr img.ftr-logo{ width: 185px; height: auto; display: block; }
footer.n4l-ftr .ftr-contact{ display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
footer.n4l-ftr a{ color: rgba(255,255,255,.84) !important; text-decoration: none; }
footer.n4l-ftr a.ftr-strong{ color: #fff !important; font-weight: 500; }
footer.n4l-ftr a:hover{ color: var(--orange-light) !important; }
footer.n4l-ftr .ftr-social{ display: flex; gap: 8px; }
footer.n4l-ftr .ftr-social a{ width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; color: #fff !important; transition: background .15s ease; }
footer.n4l-ftr .ftr-social a:hover{ background: var(--orange); color: #fff !important; }
footer.n4l-ftr .ftr-links{ display: flex; flex-wrap: wrap; align-items: stretch; column-gap: 48px; row-gap: 24px; padding: 22px 0; }
footer.n4l-ftr .ftr-group{ display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-align: left; }
/* main.css has a global `nav a{ text-align:center; Lato 16px; line-height:180%; capitalize }` that the footer's <nav> columns inherit -- reset it so the lists read left-aligned at 14px like the mockup */
footer.n4l-ftr nav a{ text-align: left; font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.5; text-transform: none; }
footer.n4l-ftr .ftr-sub{ justify-items: start; text-align: left; }
footer.n4l-ftr .ftr-group h3 a{ color: #fff; }
footer.n4l-ftr .ftr-group h3 a:hover{ color: #FFB27A; }
footer.n4l-ftr .ftr-group + .ftr-group{ padding-left: 48px; border-left: 1px solid rgba(255,255,255,.14); }
footer.n4l-ftr .ftr-group h3{ margin: 0 0 2px; font-family: var(--font-heading); font-weight: 800; font-size: 16px; line-height: 1.3; color: #fff !important; }
footer.n4l-ftr .ftr-sub{ display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, auto); grid-template-columns: repeat(2, max-content); column-gap: 36px; row-gap: 8px; }
footer.n4l-ftr .ftr-offices{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 32px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.18); font-size: 13px; }
footer.n4l-ftr .ftr-offices > div{ display: flex; flex-direction: column; gap: 2px; }
footer.n4l-ftr .ftr-offices span{ color: rgba(255,255,255,.84); }
footer.n4l-ftr .ftr-offices .ftr-ot{ font-family: var(--font-heading); font-weight: 800; font-size: 14px; color: #fff; }
footer.n4l-ftr .ftr-bottom{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.18); font-size: 13px; color: rgba(255,255,255,.84); }
footer.n4l-ftr .ftr-bottom > div{ display: flex; gap: 20px; }
footer.n4l-ftr .ftr-bottom a{ text-decoration: underline; }
@media (max-width: 900px){
    footer.n4l-ftr .ftr-in{ padding: 28px 24px 14px; }
    footer.n4l-ftr .ftr-group + .ftr-group{ padding-left: 0; border-left: 0; }
}
@media (max-width: 600px){
    footer.n4l-ftr .ftr-in{ padding: 26px 16px 12px; }
    footer.n4l-ftr img.ftr-logo{ width: 143px; }
    footer.n4l-ftr .ftr-top{ flex-direction: column; align-items: flex-start; }
    footer.n4l-ftr .ftr-sub{ grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 20px; }
    footer.n4l-ftr .ftr-offices{ grid-template-columns: minmax(0,1fr); }
}

/* ===================== FUNCTIONAL-PAGE HERO (2026-10-05) =====================
   "This will be the static hero header colour for every functional page": the plum gradient used by the site footer (--plum-gradient).
   Put .n4l-hero-plum on a page's hero section (with its own .sec-head kicker / h2 / p inside) and it gets the plum background and the
   light-on-dark text; page-specific extras (map, pills, search) stay in that page's own stylesheet. First user: Partner Directory.
   !important only on the text colours, which the global h1-h6 / p rules above force to purple. */
.n4l-hero-plum{ background: var(--plum-gradient); color: #fff; min-height: var(--func-hero-h); display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
.n4l-hero-plum > .wrap{ width: 100%; }
.n4l-hero-plum .sec-head .kicker{ color: #FFB27A !important; }
.n4l-hero-plum .sec-head h1, .n4l-hero-plum .sec-head h2{ color: #fff !important; }
.n4l-hero-plum .sec-head h1 span, .n4l-hero-plum .sec-head h2 span{ color: #FF9A56 !important; }
.n4l-hero-plum .sec-head p{ color: rgba(255,255,255,.84) !important; }

/* ===================== LEFT MENU, FINAL STYLE (2026-10-09) =====================
   Mirrors the approved mockup (index.html .dash-nav-item / .dash-subnav), overriding the earlier left-menu rules above:
   labels use the top-nav text colour (#554D66 = ink at 80%), hover and the open group turn orange, and the dashed rail is
   replaced by a solid rail drawn on each sub-item (so the current page can colour its own piece of it). No icons on sub-items.
   Desktop drawer = aside#left-panel, phone/tablet drawer = nav#sidebar. */
aside#left-panel .parent-text .for-text h6{ color: #554D66 !important; }
aside#left-panel .sidebar-menu .text:hover .for-text h6,
aside#left-panel .sidebar-nav-item.show > .sidebar-menu .text .for-text h6{ color: var(--orange) !important; }
aside#left-panel .sidebar-menu .text:hover,
aside#left-panel .sidebar-nav-item.show > .sidebar-menu .text{ background: var(--cream-2) !important; }
aside#left-panel .dashboard-nav-dropdown-menu{
    margin: 0 0 0 30px;
    padding-left: 0;
    border-left: 0;
}
aside#left-panel .child-node .text{
    margin: 0;
    padding: 9px 14px 9px 28px;
    border-left: 2px solid #F0E3D3;
    border-radius: 0 10px 10px 0;
    transition: background .15s ease, border-color .15s ease;
}
aside#left-panel .child-node .text h6,
aside#left-panel .dashboard-nav-dropdown-item .text h6{
    color: #554D66 !important;
    font-weight: 600;
    font-size: 13px;
    background: transparent !important;
    transition: color .15s ease;
}
aside#left-panel .child-node .text:hover,
aside#left-panel .child-node .text a:hover{ background: #FFF8F0 !important; }
aside#left-panel .child-node .text:hover{ border-left-color: #FFC9A3; }
aside#left-panel .child-node .text:hover h6,
aside#left-panel .dashboard-nav-dropdown-item .text a:hover h6{ color: var(--orange) !important; background: transparent !important; }
aside#left-panel .child-node .text.n4l-current{ border-left-color: var(--orange); background: #FFF4E8 !important; }
aside#left-panel .child-node .text.n4l-current h6{ color: var(--orange) !important; font-weight: 700; }
aside#left-panel .sidebar-menu + .dashboard-nav-dropdown-menu{ margin-top: 4px; margin-bottom: 0; }
/* Every sub-item sits in its own .dashboard-nav-dropdown-menu, so a bottom margin on the first one made the first gap bigger than the rest;
   the 6px of breathing room now goes after the LAST sub-item of a group instead, and every sub-item has the same pitch. */
aside#left-panel .dashboard-nav-dropdown > .dashboard-nav-dropdown-menu:last-child{ margin-bottom: 6px; }
/* Even gaps between the main menu rows (2026-10-13, "mismatch in the gap between the left side menus"): a collapsed group's hidden sub-items have height 0 but the
   4px above the first one and the 6px below the last one still took space, so a row with sub-items (Partner World, Net4Log Digital) sat ~10px further from the next
   row than a row without (Net4Log Marketplace). Collapsed groups now add no space; the margins apply only while the group is open. */
aside#left-panel .dashboard-nav-dropdown.sidebar-nav-item:not(.show) > .dashboard-nav-dropdown-menu{ margin-top: 0 !important; margin-bottom: 0 !important; }
aside#left-panel .dashboard-nav-dropdown.sidebar-nav-item > .dashboard-nav-dropdown-menu{ transition: margin .3s ease-out; }

#sidebar .sidebarUl li.sidebarlist > a{ color: #554D66 !important; }
#sidebar .sidebarUl li.sidebarlist > a:hover,
#sidebar .sidebarUl li.sidebarlist.show > a{ color: var(--orange) !important; }
#sidebar .sidebarlist .node-sideList{ padding-left: 0; margin-left: 14px; }
#sidebar .sidebarlist .node-sideList a{
    color: #554D66 !important;
    border-left: 2px solid #F0E3D3;
    border-radius: 0 10px 10px 0;
    padding-left: 16px !important;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
#sidebar .sidebarlist .node-sideList a:hover{ color: var(--orange) !important; border-left-color: #FFC9A3; background: #FFF8F0 !important; }
#sidebar .sidebarlist .node-sideList a.n4l-current{ color: var(--orange) !important; font-weight: 700; border-left-color: var(--orange); background: #FFF4E8 !important; }

/* User menu rows (2026-10-09): sized like the About Us / Services dropdowns -- same 10px card padding, 9px row padding and
   line-height:normal (main.css's body line-height:26px otherwise inflates every row), with the icon inset 12px so it sits fully
   inside the orange hover highlight. */
header#header .n4l-pill-v2 .dropdownlocation .user-inner{ padding: 10px !important; }
header#header .n4l-pill-v2 .dropdownlocation a.user-login.dropdown-item{
    padding: 9px 12px !important;
    line-height: normal !important;
    margin: 0 !important;
    gap: 12px;
}

/* ===== Date picker (calendar plugin) -- one look for every date field (2026-10-12) =====
   The house daterangepicker (single date, DD-MMM-YYYY) in the warm theme: plum header, orange selected day, compact cells.
   Several pages style bare table/td/th (padding, nowrap, big text), which blew the calendar cells up -- the cell rules below reset that. */
.daterangepicker{font-family:'Inter',sans-serif !important;border:1px solid #F0E4D6 !important;border-radius:16px !important;box-shadow:0 22px 44px -18px rgba(27,19,48,.45) !important;padding:6px !important;z-index:3000 !important;}
.daterangepicker .calendar{margin:0 !important;max-width:none !important;}
.daterangepicker .calendar-date{border:0 !important;background:#fff !important;padding:4px !important;}
.daterangepicker .calendar table{width:auto !important;margin:0 !important;border-collapse:separate !important;border-spacing:0 2px !important;background:transparent !important;}
.daterangepicker .calendar th,.daterangepicker .calendar td{box-sizing:border-box !important;width:34px !important;min-width:34px !important;max-width:34px !important;height:32px !important;padding:0 !important;font:500 13px 'Inter',sans-serif !important;line-height:32px !important;vertical-align:middle !important;text-align:center !important;white-space:nowrap !important;border:0 !important;border-radius:8px !important;background:transparent !important;color:#2B2140 !important;}
.daterangepicker .calendar thead tr:first-child th{background:#4f1e50 !important;color:#fff !important;height:38px !important;border-radius:0 !important;vertical-align:middle !important;}
.daterangepicker .calendar thead tr:first-child th:first-child{border-radius:10px 0 0 10px !important;}
.daterangepicker .calendar thead tr:first-child th:last-child{border-radius:0 10px 10px 0 !important;}
.daterangepicker .calendar thead tr:first-child th.month{width:auto !important;max-width:none !important;}
.daterangepicker .calendar thead tr:first-child th.prev,.daterangepicker .calendar thead tr:first-child th.next{cursor:pointer;}
.daterangepicker .calendar thead tr:first-child th i{color:#fff !important;line-height:38px !important;vertical-align:middle !important;}
.daterangepicker .calendar thead tr:first-child th.available:hover{background:#FE5F00 !important;}
.daterangepicker .calendar thead tr:nth-child(2) th{height:28px !important;font:700 11.5px 'Inter',sans-serif !important;line-height:28px !important;color:#5B5470 !important;text-transform:uppercase;}
.daterangepicker .calendar td.available{cursor:pointer;}
.daterangepicker .calendar td.available:hover{background:#FFEFE0 !important;color:#2A007C !important;}
.daterangepicker .calendar td.off,.daterangepicker .calendar td.off.available{color:#B9B1C9 !important;}
.daterangepicker .calendar td.active,.daterangepicker .calendar td.active:hover{background:#FE5F00 !important;color:#fff !important;font-weight:700 !important;}
.daterangepicker .calendar td.disabled{color:#D9D3E6 !important;cursor:not-allowed;text-decoration:line-through;}
.daterangepicker select.monthselect,.daterangepicker select.yearselect{vertical-align:middle !important;height:26px !important;width:auto !important;min-width:0 !important;margin:0 2px !important;padding:0 4px !important;border:0 !important;border-radius:8px !important;font:600 12px 'Inter',sans-serif !important;color:#2A007C !important;background:#fff !important;}
.daterangepicker .calendar th.month{padding:0 !important;}
.app-date-ui{cursor:pointer;}
@media (max-width: 480px){ .daterangepicker{max-width:calc(100vw - 16px);} }

/* ===== Modal headers: one default look for every dialog (2026-10-12) =====
   The E-Invoice (Manual) header is the default: plum gradient, white Poppins title, plain white close. Covers Bootstrap modals (.modal-header) and the
   custom dialogs (.es-dh E-Shipments, .mk-dh Marketplace, .mp-dlg-h My Profile, .rg-dlg-h Registration). Red danger headers (.modalheaderred,
   .soa-delete-mhead) stay red on purpose. */
.modal-header:not(.modalheaderred):not(.soa-delete-mhead),
.es-dh, .mk-dh, .mp-dlg-h, .rg-dlg-h{
    background: linear-gradient(105deg, #341552 0%, #4f1e50 55%, #792c4e 100%) !important;
    border-bottom: 0 !important;
    border-top-left-radius: inherit; border-top-right-radius: inherit;
}
.modal-header:not(.modalheaderred):not(.soa-delete-mhead) .modal-title,
.modal-header:not(.modalheaderred):not(.soa-delete-mhead) h1, .modal-header:not(.modalheaderred):not(.soa-delete-mhead) h2,
.modal-header:not(.modalheaderred):not(.soa-delete-mhead) h3, .modal-header:not(.modalheaderred):not(.soa-delete-mhead) h4,
.modal-header:not(.modalheaderred):not(.soa-delete-mhead) h5, .modal-header:not(.modalheaderred):not(.soa-delete-mhead) h6,
.es-dh h3, .mk-dh h3, .mp-dlg-h h3, .rg-dlg-h h3{
    color: #fff !important; font-family: 'Poppins', sans-serif; font-weight: 700; text-transform: none;
}
.modal-header:not(.modalheaderred):not(.soa-delete-mhead) .close,
.es-x, .mk-x, .mp-dlg-x, .rg-dlg-x{
    color: #fff !important; background: transparent !important; opacity: .9; text-shadow: none; transition: color .15s, opacity .15s;
}
.modal-header:not(.modalheaderred):not(.soa-delete-mhead) .close:hover,
.es-x:hover, .mk-x:hover, .mp-dlg-x:hover, .rg-dlg-x:hover{ background: transparent !important; color: #FFB27A !important; opacity: 1; }   /* hover colours the X only, no box */

/* One fixed header height for every dialog, red danger headers included (2026-10-12): the same bar on every screen whatever the title or the page's own padding. */
:root{ --n4l-modal-head-h: 54px; }
.modal-header, .es-dh, .mk-dh, .mp-dlg-h, .rg-dlg-h{
    box-sizing: border-box !important; height: var(--n4l-modal-head-h) !important; min-height: var(--n4l-modal-head-h) !important;
    padding-top: 0 !important; padding-bottom: 0 !important;
    display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important;
}
.modal-header > .row{ flex: 1 1 auto; width: 100%; margin: 0; }
.modal-header .modal-title, .modal-header h1, .modal-header h2, .modal-header h3, .modal-header h4, .modal-header h5, .modal-header h6,
.es-dh h3, .mk-dh h3, .mp-dlg-h h3, .rg-dlg-h h3{
    margin: 0 !important; font-size: 17px !important; line-height: 1.25 !important;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.modal-header .close, .es-x, .mk-x, .mp-dlg-x, .rg-dlg-x{
    float: none !important; margin: 0 !important; padding: 0 !important; flex: 0 0 34px; width: 34px; height: 34px;
    display: flex !important; align-items: center; justify-content: center; font-size: 24px; line-height: 1; border-radius: 8px;
}

/* Same inset for every dialog (2026-10-12): header, body and footer all use 22px each side, so the icon / first letter of the title lines up with the form labels
   below it and the close button lines up with the right edge of the fields. No leftover coloured left border or inner row/column padding. */
html body .modal-header, html body .es-dh, html body .mk-dh, html body .mp-dlg-h, html body .rg-dlg-h{
    padding-left: 22px !important; padding-right: 22px !important; border-left: 0 !important;
}
html body .modal-body:not(.p-0){ padding-left: 22px; padding-right: 22px; }
html body .modal-footer{ padding-left: 22px; padding-right: 22px; }
html body .modal-header > .row{ margin: 0 !important; width: 100%; }
html body .modal-header > .row > [class*="col-"]{ padding-left: 0 !important; padding-right: 0 !important; }
html body .modal-header .modal-title{ margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; }