/* =============================================================================
   portal-shell.css — the chrome every portal page shares: the blue top bar, the
   main nav, the mobile drawer, and the "daily updates" subscribe strip above the
   footer. The styling half of html/partials/portal-nav.php.

   THIS FILE IS THE SOURCE OF TRUTH. It began as an extraction from portal.html's
   inline <style>, but portal.html now links it and no longer carries a copy, so
   edit HERE — there is nothing left to regenerate from.
============================================================================= */

/* ── Top bar (My Account / Checkout / Logout) ── */
        .gn-topbar {
            background: linear-gradient(90deg, #467EFE 0%, #61CAFF 100%);
            padding: 10px 24px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 72px;
        }

.navbar-brand {
            margin: 0px;
        }

.navbar-brand img {
            width: 180px;
        }

.gn-topbar__inner {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 24px;
        }

.gn-topbar__link {
            display: flex;
            align-items: center;
            gap: 7px;
            color: #fff;
            font-size: 13px;
            font-weight: 500;
            text-decoration: none;
            opacity: .9;
            transition: opacity .15s;
            white-space: nowrap;
        }

.gn-topbar__link div {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            background-color: white;
            border-radius: 20px;
        }

.gn-topbar__link div {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            background-color: white;
            border-radius: 20px;
        }

.gn-topbar__link:hover {
            opacity: 1;
            color: #fff;
        }

.gn-topbar__link img {
            width: 16px;
            height: 16px;
        }

.gn-topbar__link--logout {
            color: #fff;
        }

/* ── Main header ── */
        .gn-header {
            /* Light ground so the active tab's white surface reads as a raised tab.
               A white bar would make the active state invisible. */
            background: #f8f9fc;
            border-bottom: 1px solid #e8ecf5;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
        }

.gn-header__inner {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0;
            height: 68px;
        }

/* Nav fills the header so its tabs span the SAME width as .gn-main below */
        .gn-header__inner > nav {
            flex: 1;
        }

.nav-number {
            display: flex;
            align-items: center;
            gap: 12px;
        }

.gn-logo img {
            height: 36px;
        }

/* ── Nav ── */
        .gn-nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            list-style: none;
            margin: 0;
            padding: 0;
        }

.gn-nav__item {
            position: relative;
        }

.gn-nav__link {
            display: flex;
            align-items: center;
            gap: 6px;
            height: 68px;
            padding: 0 40px;
            font-size: 16px;
            font-weight: 400;
            color: #444;
            text-decoration: none;
            border: none;
            border-bottom: 3px solid transparent;
            white-space: nowrap;
            transition: color .15s, border-color .15s;
            cursor: pointer;
            background: none;
        }

.gn-nav__link:hover {
            color: #4260CB;
        }

.gn-nav__link img {
            width: 24px;
            height: 24px;
            opacity: .65;
        }

.gn-nav__link:hover img,
        .gn-nav__link.active img {
            opacity: 1;
        }

/* Active top-nav tab — a WHITE tab sitting on the bar's light ground, with
           the label and icon in brand blue. No underline: the tab reads as selected
           by its own surface, and an underline would also cut the Account tab off
           from the panel that opens directly beneath it. */
        .gn-nav__link.active {
            color: rgba(66, 96, 203, 1);
            background: rgba(255, 255, 255, 1);
            border-bottom-color: transparent;
        }

/* While the Account menu is open, its tab wears the same selected look even
           when Account isn't the current page — so the tab and the panel below it
           read as one surface. */
        .gn-nav__item--dropdown.open > .gn-nav__link {
            color: rgba(66, 96, 203, 1);
            background: rgba(255, 255, 255, 1);
            border-bottom-color: transparent;
        }

.gn-nav__item--dropdown.open > .gn-nav__link img {
            opacity: 1;
            filter: invert(38%) sepia(87%) saturate(485%) hue-rotate(202deg) brightness(97%) contrast(92%);
        }

.gn-nav__link.active img {
            filter: invert(38%) sepia(87%) saturate(485%) hue-rotate(202deg) brightness(97%) contrast(92%);
        }

.gn-nav__caret {
            font-size: 10px;
            color: #aaa;
            margin-left: 2px;
        }

/* ── Account dropdown ── */
        .gn-nav__dropdown {
            display: none;
            position: absolute;
            top: 100%;          /* flush under the tab — no gap between tab and panel */
            right: 0;
            background: #fff;
            min-width: 210px;
            padding: 8px 0;
            z-index: 9999;
            box-shadow: 0 2px 16px rgba(42, 82, 190, .07);
        }

.gn-nav__item--dropdown.open .gn-nav__dropdown {
            display: block;
        }

.gn-dropdown__item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 20px;
            font-size: 15px;
            font-weight: 500;
            color: rgba(34, 35, 40, 1);
            text-decoration: none;
            transition: background .12s, color .12s;
        }

.gn-dropdown__item:hover {
            background: #f5f7ff;
            color: #4260CB;
        }

.gn-dropdown__item.active {
            color: #4260CB;
        }

.gn-dropdown__item img {
            width: 18px;
            height: 18px;
            opacity: .7;
        }

.gn-dropdown__item.active img {
            opacity: 1;
            filter: invert(38%) sepia(87%) saturate(485%) hue-rotate(202deg) brightness(97%) contrast(92%);
        }

.gn-dropdown__divider {
            border: none;
            border-top: 1px solid #f0f0f0;
            margin: 6px 0;
        }

.gn-dropdown__search {
            display: block;
            text-align: center;
            padding: 10px 20px;
            font-size: 13px;
            color: #666;
            text-decoration: none;
        }

.gn-dropdown__search:hover {
            color: #4260CB;
        }

/* ── Subscribe / Don't miss section ── */
        .gn-subscribe-wrap {
            background: #fff;
            margin-top: 16px;
        }

.contactus-section {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding: 24px 0;
        }

.subscribe-with-email {
            text-align: center;
            max-width: 380px;
        }

.subscribe-with-email .title {
            font-size: 22px;
            font-weight: 700;
            color: #1a2258;
            margin-bottom: 16px;
        }

.subscribe-with-email .gradient-text {
            background: linear-gradient(90deg, #4260CB, #5b9ff5);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

.subscribe-email {
            border: 1.5px solid #d4daf0;
            border-radius: 999px;
            padding: 10px 20px;
            font-size: 13px;
            outline: none;
            width: 100%;
            margin-bottom: 12px;
            font-family: 'Poppins', sans-serif;
        }

.subscribe-email:focus {
            border-color: #4260CB;
        }

/* ── Burger button ── */
        .gn-burger {
            display: none;
            flex-direction: column;
            justify-content: center;
            gap: 5px;
            cursor: pointer;
            padding: 7px 5px;
            border: none;
            background: none;
            border-radius: 6px;
            transition: background 0.15s;
        }

.gn-burger:hover { background: #f5f7ff; }

.gn-burger__line {
            display: block;
            width: 22px;
            height: 2px;
            background: #444;
            border-radius: 2px;
            transition: transform 0.3s ease, opacity 0.3s ease;
        }

.gn-burger.open .gn-burger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }

.gn-burger.open .gn-burger__line:nth-child(2) { opacity: 0; transform: scaleX(0); }

.gn-burger.open .gn-burger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile drawer overlay ── */
        .gn-drawer-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.45);
            z-index: 2000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

.gn-drawer-overlay.active {
            opacity: 1;
            pointer-events: auto;
        }

/* ── Mobile drawer panel ── */
        .gn-drawer {
            position: fixed;
            top: 0;
            right: -300px;
            width: 280px;
            height: 100vh;
            background: #fff;
            z-index: 2001;
            transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            box-shadow: -4px 0 28px rgba(0, 0, 0, 0.13);
        }

.gn-drawer.open { right: 0; }

.gn-drawer__header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 20px;
            border-bottom: 1px solid #f0f4ff;
            flex-shrink: 0;
        }

.gn-drawer__header img { height: 26px; }

.gn-drawer__close {
            background: none;
            border: none;
            cursor: pointer;
            padding: 5px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            transition: background 0.15s;
        }

.gn-drawer__close:hover { background: #f5f5f5; }

.gn-drawer__nav { flex: 1; padding: 8px 0; }

.gn-drawer__link {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 13px 20px;
            font-size: 14px;
            font-weight: 500;
            color: #444;
            text-decoration: none;
            transition: background 0.15s, color 0.15s;
        }

.gn-drawer__link:hover { background: #f5f7ff; color: #4260CB; }

.gn-drawer__link img {
            width: 18px;
            height: 18px;
            opacity: 0.55;
            flex-shrink: 0;
        }

.gn-drawer__link:hover img { opacity: 1; }

.gn-drawer__divider {
            border: none;
            border-top: 1px solid #f0f4ff;
            margin: 6px 0;
        }

/* Account expandable row inside drawer */
        .gn-drawer__account-btn {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 13px 20px;
            font-size: 14px;
            font-weight: 500;
            color: #444;
            cursor: pointer;
            border: none;
            background: none;
            width: 100%;
            text-align: left;
            transition: background 0.15s, color 0.15s;
        }

.gn-drawer__account-btn:hover { background: #f5f7ff; color: #4260CB; }

.gn-drawer__account-left {
            display: flex;
            align-items: center;
            gap: 12px;
        }

.gn-drawer__account-left img {
            width: 18px;
            height: 18px;
            opacity: 0.55;
            flex-shrink: 0;
        }

.gn-drawer__account-btn:hover .gn-drawer__account-left img { opacity: 1; }

.gn-drawer__account-caret {
            transition: transform 0.25s ease;
            flex-shrink: 0;
        }

.gn-drawer__account-btn.open .gn-drawer__account-caret { transform: rotate(180deg); }

.gn-drawer__sub {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.32s ease;
            background: #fafbff;
            border-top: 1px solid transparent;
        }

.gn-drawer__sub.open {
            max-height: 400px;
            border-top-color: #f0f4ff;
        }

.gn-drawer__sub-link {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 11px 20px 11px 50px;
            font-size: 13px;
            font-weight: 500;
            color: #555;
            text-decoration: none;
            transition: background 0.12s, color 0.12s;
        }

.gn-drawer__sub-link:hover { color: #4260CB; background: #f0f4ff; }

.gn-drawer__sub-link.active {
            color: #4260CB;
            font-weight: 600;
        }

.gn-drawer__sub-link img {
            width: 16px;
            height: 16px;
            opacity: 0.55;
            flex-shrink: 0;
        }

.gn-drawer__sub-link.active img {
            opacity: 1;
            filter: invert(38%) sepia(87%) saturate(485%) hue-rotate(202deg) brightness(97%) contrast(92%);
        }

/* Current page in the drawer. The .active class was already being set on the
           drawer's Numbers link but nothing styled it, so the mobile menu never showed
           where you were — these match the desktop nav's active treatment. */
        .gn-drawer__link.active,
        .gn-drawer__account-btn.active {
            color: #4260CB;
            font-weight: 600;
        }

.gn-drawer__link.active img {
            opacity: 1;
            filter: invert(38%) sepia(87%) saturate(485%) hue-rotate(202deg) brightness(97%) contrast(92%);
        }

/* Checkout and Logout. The site's responsive.css hides every .nav-number below 992px
   (meant for the marketing header), which took them out of the portal on tablets and
   phones - and the drawer has neither, so there was no way to check out or log out. */
.gn-topbar .nav-number { display: flex !important; }
/* Cart and Logout icons as in the marketplace header: dark icon on a white circle.
   responsive.css paints .nav-icon-bg with a blue gradient and inverts its icon below
   992px; the marketplace undoes that for its header (search-nav.css), the portal did not. */
.gn-topbar .nav-icon-bg { background: #fff !important; }
.gn-topbar .nav-icon-bg img { filter: none !important; }
@media (max-width: 768px) {
	.gn-topbar .nav-icon-bg.nav-icon-bg { width: 24px; height: 24px; min-width: 24px; }
	/* The logout mark is heavier than the cart: a size down keeps it inside its circle */
	.gn-topbar a[href*="logout"] .nav-icon-bg img { width: 13px; }
}
@media (max-width: 280px) {
	.gn-topbar .nav-icon-bg.nav-icon-bg { width: 22px; height: 22px; min-width: 22px; }
}
@media (max-width: 768px) {
	.gn-topbar { justify-content: space-between; padding: 10px 16px; height: 60px; }
	/* Icons only, each with its label kept for screen readers */
	.gn-topbar .nav-number > span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.gn-topbar__inner { gap: 8px; }
	/* The cart menu spans the screen under the bar (anchored to the icon it ran off the
	   left edge); its arrow still points at the cart icon, 48px in from the menu's right
	   edge (16px padding + 24px Logout + 8px gap + half the icon, less the 12px inset) */
	.gn-topbar .checkuot-dropdown .resources-dropdown.nav-dropdowns {
		position: fixed !important;
		top: 60px !important;
		left: 12px !important;
		right: 12px !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
	}
	.gn-topbar .checkuot-dropdown .resources-dropdown.nav-dropdowns::after { right: 36px; }
}

/* Section name: phones only (the nav names the section on wider screens) */
.gn-header__title { display: none; }

/* Laptops / landscape tablets: 7 links at 40px padding each needed ~1,170px, so the
   nav ran past the screen (and the page scrolled sideways) below 1200px */
@media (max-width: 1199.98px) and (min-width: 769px) {
	.gn-header__inner { padding: 0 16px; }
	.gn-nav__item { flex: 1 1 0; min-width: 0; }
	.gn-nav__link { justify-content: center; padding: 0 10px; font-size: 15px; width: 100%; }
	.gn-nav__link img { width: 20px; height: 20px; }
}
/* Portrait tablets: an app-style tab bar - the icon above its label */
@media (max-width: 991.98px) and (min-width: 769px) {
	.gn-header__inner { height: 64px; padding: 0 8px; }
	.gn-nav__link { flex-direction: column; gap: 3px; height: 64px; padding: 0 4px; font-size: 12.5px; line-height: 1.2; }
	.gn-nav__link img { width: 22px; height: 22px; }
	.gn-nav__caret { display: none; }
}

@media (max-width: 768px) {
	.gn-header__inner {
				justify-content: space-between;
				gap: 12px;
				height: 56px;
				padding: 0 16px;
			}
	.gn-header__title {
				display: block;
				min-width: 0;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 17px;
				font-weight: 600;
				color: #222328;
			}
	.gn-burger { padding: 8px 6px; }
    .gn-nav {
                display: none;
            }
    .gn-burger { display: flex; }
    .gn-drawer-overlay { display: block; }
    .contactus-section {
                justify-content: center;
            }
    /* Topbar: icons only, hide text labels */
            .gn-topbar {
                padding: 8px 16px;
            }
    .gn-topbar__inner {
                gap: 12px;
            }
    .gn-topbar__link-text {
                display: none;
            }
    .navbar-brand img {
                width: 150px;
            }
}

@media (max-width: 480px) {
    .gn-topbar {
                padding: 8px 12px;
            }
    .gn-topbar__inner {
                gap: 8px;
            }
    .navbar-brand img {
                width: 130px;
            }
}

@media (max-width: 320px) {
    .gn-topbar {
                padding: 7px 8px;
            }
    .gn-topbar__inner {
                gap: 6px;
            }
    .navbar-brand img {
                width: 110px;
            }
    .gn-topbar__link div {
                width: 22px;
                height: 22px;
            }
    .gn-topbar__link img {
                width: 13px;
                height: 13px;
            }
}

/* Arrow points at the portal's (icon-left) Checkout cart icon */
        .gn-topbar .checkuot-dropdown .resources-dropdown::after { right: 83px; }

/* ── Checkout trigger — matches allnumbers.html (text + cart-icon circle + badge) ── */
        .gn-topbar .nav-number { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; line-height: 24px; color: #fff; text-decoration: none; white-space: nowrap; }

.gn-topbar .nav-number:hover { color: #fff; opacity: .9; }

.gn-topbar .nav-icon-bg { width: 32px; height: 32px; min-width: 32px; border-radius: 100%; background-color: #fff; display: flex; align-items: center; justify-content: center; }

.gn-topbar .search-icon3 { width: 16px; }

.gn-topbar .checkout-count { position: relative; }

.gn-topbar .checkout-notify { color: #fff; background-color: rgb(192, 4, 4); position: absolute; top: -3px; left: 57%; border-radius: 50px; display: flex; justify-content: center; align-items: center; font-size: 11px; z-index: 1; padding: 0 4px; height: 18px; min-width: 18px; }

/* ── Login | Signup hover dropdown (matches allnumbers .login-dropdown) ── */
        .gn-topbar .login-dropdown { position: relative; }

.gn-topbar .login-dropdown .resources-dropdown { position: absolute; right: 0; left: auto; top: 100%; padding: 20px 0 0; min-width: 462px; background: transparent; box-shadow: none; border-radius: 0; animation: none; z-index: 3000; }

.gn-topbar .login-dropdown .login-checkuot-dropdown-box { position: relative; background: #fff; border-radius: 20px; box-shadow: 0 16px 48px rgba(42,82,190,.22); padding: 18px; }

.gn-topbar .login-dropdown .login-checkuot-dropdown-box::after { content: ""; position: absolute; top: -10px; right: 34px; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 12px solid #fff; }

/* style.css also draws a .login-dropdown .resources-dropdown::after arrow — hide it so only one shows */
        .gn-topbar .login-dropdown .resources-dropdown::after { display: none; }

.gn-topbar .login-dropdown .checkout-btns { display: flex; flex-direction: row; gap: 18px; margin: 0; padding: 0; }

.gn-topbar .login-dropdown .new-fill-btn { flex: 1; display: flex; align-items: center; justify-content: center; text-decoration: none; }

/* ── Tables on phones: one card per row ────────────────────────────────────────
   Orders, offers, call logs, the Sell sheet, the billing plan summary and blocked
   numbers were tables 520-1080px wide in a 340-720px space, so most columns sat off
   screen. portal-tables.js copies each column's header onto its cells (data-label);
   here the header row goes and each row becomes a card of "label - value" lines. */
@media (max-width: 767.98px) {
	table.nr-cardtable { display: block; width: 100%; min-width: 0 !important; }
	table.nr-cardtable thead { display: none; }
	table.nr-cardtable tbody { display: block; }
	table.nr-cardtable tbody tr {
		display: block;
		padding: 12px 16px;
		background: #fff !important;
		border-bottom: 1px solid #eef0f7;
	}
	table.nr-cardtable tbody tr:last-child { border-bottom: 0; }
	/* The label floats left and the cell's own content stays on the right, so a cell
	   holding two lines (a name over a number) stacks them instead of squeezing them
	   side by side */
	table.nr-cardtable tbody td {
		display: block;
		height: auto;
		max-width: none;
		padding: 5px 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: none !important;
		box-shadow: none !important;
		font-size: 14px;
		line-height: 1.45;
		text-align: right !important;
		white-space: normal !important;
		overflow-wrap: anywhere;
	}
	table.nr-cardtable tbody td::after { content: ""; display: table; clear: both; }
	table.nr-cardtable tbody td[data-label]::before {
		content: attr(data-label);
		float: left;
		max-width: 45%;
		margin-right: 14px;
		text-align: left;
		color: #8c94b0;
		font-size: 13px;
		font-weight: 500;
		overflow-wrap: normal;
	}
	/* Nothing to show (no action left on an answered offer): no empty labelled line */
	table.nr-cardtable tbody td[data-label]:empty { display: none; }
	/* A message across the whole table ("No orders yet") */
	table.nr-cardtable tbody td[colspan] { display: block; padding: 18px 0 !important; text-align: center !important; }
	/* A "Loading..." row: nr-loading.css keeps an upgraded cell a table-cell (!important),
	   which in a card list shrank it to its dots and text, on the left */
	table.nr-cardtable tbody td.nr-loading-inline { display: flex !important; justify-content: center; gap: 0; }
}