/* jqGrid ships with a hardcoded pixel width (often 1000px) baked into each page's
   JS config, which overflows the narrower cards in this redesign. Forcing the
   grid's own wrapper elements to fill their container overrides that regardless
   of what pixel width the JS computed or when - immune to any JS/CSS load timing. */
.ez-card .ui-jqgrid,
.ez-card .ui-jqgrid-view,
.ez-card .ui-jqgrid-hdiv,
.ez-card .ui-jqgrid-bdiv,
.ez-card .ui-jqgrid-htable,
.ez-card .ui-jqgrid-btable {
    width: 100% !important;
}
.ez-card .ui-jqgrid-hdiv,
.ez-card .ui-jqgrid-bdiv {
    overflow-x: hidden !important;
}

/* The pager row (page selector, rows-per-page dropdown, "view X of Y" text) was
   being clipped - force it and its contents to take whatever height they need
   instead of the fixed height jqGrid's own CSS assumes. */
.ez-card .ui-jqgrid-pager {
    height: auto !important;
    min-height: 34px;
    overflow: visible !important;
    line-height: normal !important;
    box-sizing: border-box;
    padding: 4px 0;
}
.ez-card .ui-jqgrid-pager .ui-pg-table {
    height: auto !important;
    width: auto !important;
}
.ez-card .ui-jqgrid-pager td {
    height: auto !important;
    vertical-align: middle !important;
}
.ez-card .ui-jqgrid-pager .ui-pg-selbox {
    height: 22px;
}
.ez-card .ui-jqgrid-pager input.ui-pg-input {
    height: 18px;
}

/* jqGrid's add/edit popup (a jQuery UI dialog) was rendering off-screen to the
   left. The previous "body > .ui-dialog" selector never matched because this
   jqGrid version doesn't append the dialog as a direct child of body, so that
   rule silently did nothing. Using position:fixed centers the dialog relative
   to the viewport itself, independent of wherever in the DOM it actually lives
   and regardless of any ancestor's positioning/width. */
.ui-dialog {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    max-width: 95vw;
    height: auto !important;
    /* NOT overflow:auto here - jQuery UI's own auto-height math on the outer
       wrapper is consistently a few px off from the sum of its children
       (title bar + content + button pane), so overflow:auto was turning that
       harmless rounding gap into an always-visible scrollbar wrapped around
       the ENTIRE dialog (title and buttons included), which is why the error
       text below the fold needed scrolling to see. Scrolling only belongs on
       the content area itself (below), not the whole dialog chrome. */
    overflow: visible !important;
}

/* Some edit forms/messages (e.g. Add Pinless Number's helper text, or a saved
   error message appended after the input) are taller than the fixed pixel
   height these dialogs were originally configured with, which was clipping
   content or forcing the whole dialog to scroll. Capping and scrolling just
   the content area - not the title bar or button pane - keeps the buttons
   always visible while still handling genuinely long content safely. */
.ui-dialog-content,
.ui-jqdialog-content {
    height: auto !important;
    max-height: calc(90vh - 110px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* jqGrid's edit/add form lays out labels (CaptionTD) and inputs (DataTD) in a
   table sized by the input's HTML "size" attribute (e.g. size="40"), which is
   wider than this codebase's fixed dialog widths (usually 450px). The table
   was overflowing its dialog, and the browser was auto-scrolling the
   overflowed dialog horizontally to keep the focused element in view - which
   is what was clipping the title bar and the left edge of every label. Forcing
   the table and inputs to size to the dialog's own width instead of the
   HTML size attribute keeps everything inside the dialog so there is nothing
   to scroll. */
.ui-dialog table.EditTable,
.ui-dialog table.FormTable {
    width: 100% !important;
    table-layout: fixed;
}
.ui-dialog table.EditTable .CaptionTD,
.ui-dialog table.FormTable .CaptionTD {
    width: 38% !important;
    white-space: normal !important;
    word-wrap: break-word;
}
.ui-dialog table.EditTable .DataTD,
.ui-dialog table.FormTable .DataTD {
    width: 62% !important;
}
.ui-dialog .DataTD input[type="text"],
.ui-dialog .DataTD textarea,
.ui-dialog .FormElement {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ---------- Site nav (header.php) ----------
   Scoped to #menu-0 (the nav's own wrapper in header.php) since the redesign
   lives inside .ez-theme on each page's content, but the nav itself sits
   outside that wrapper and is shared, unstyled, by every page including ones
   not yet redesigned. Only visual styling here - the Bootstrap collapse/
   dropdown markup and behavior are untouched. */
#menu-0 {
    border-bottom: none !important;
}
#menu-0 .navbar {
    background: linear-gradient(120deg, #073d70, #0b5aa5) !important;
}
/* logo.jpg is a JPEG with a solid white background baked into the file (JPEGs
   can't hold transparency), which looked like a stray white rectangle once
   the nav itself went dark. Rather than trying to re-touch a photo of text
   to remove its background, giving it a deliberate white "chip" turns that
   same white background into an intentional badge instead of an accident -
   and sizing it up a little keeps the small tagline text legible. */
#menu-0 .navbar-brand {
    background: #fff;
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
#menu-0 .navbar-brand img {
    height: 48px;
    width: auto;
}

#menu-0 .nav > li > a,
#menu-0 .menu_btn > a.dropdown-toggle {
    font-family: 'Poppins', 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #fff;
    transition: color .15s ease, opacity .15s ease;
}
#menu-0 .nav > li > a:hover,
#menu-0 .nav > li > a:focus,
#menu-0 .menu_btn > a.dropdown-toggle:hover {
    color: #fd7f04;
    background: transparent;
}
#menu-0 .nav > li > a .bi,
#menu-0 .menu_btn > a.dropdown-toggle .bi {
    margin-right: 6px;
    font-size: 15px;
    vertical-align: -1px;
}
#menu-0 .menu_btn > a.dropdown-toggle .bi-person-circle {
    font-size: 20px;
    vertical-align: -5px;
    margin-right: 5px;
}
#menu-0 a[data-target="#menu"] {
    color: #fff;
    font-size: 18px;
}

#menu-0 .dropdown-menu {
    border: none;
    border-radius: 12px;
    box-shadow: 0 20px 45px rgba(11,90,165,0.18);
    padding: 8px;
    margin-top: 10px;
    min-width: 250px;
}
/* This theme's dropdown links are display:inline by default (from
   assets/dropdown/css/style.css), which breaks two things at once: a
   wrapped second line loses its left indent (it isn't part of the same
   block box as line one), and combining border-radius with an inline
   element makes the browser paint the box as separate per-line fragments -
   which is what turned the leftover ".active" underline (see below) into a
   curved "swoosh" instead of a straight line. display:block fixes both. */
#menu-0 .dropdown-menu > li > a {
    display: block !important;
    border-radius: 8px;
    padding: 11px 16px !important;
    font-size: 14px;
    line-height: 1.4;
    color: var(--ez-ink, #1c2733);
    /* One item (Account Info) carries a leftover class="active" from the
       original theme, which draws a border-bottom meant for a top-level
       nav's current-page indicator. It doesn't reflect the actual current
       page here and doesn't belong on one arbitrary dropdown item, so it's
       turned off for every item in this menu. */
    border-bottom: none !important;
    text-decoration: none !important;
}
#menu-0 .dropdown-menu > li:not(:last-child) > a {
    border-bottom: 1px solid #eef2f6 !important;
}
#menu-0 .dropdown-menu > li > a:hover,
#menu-0 .dropdown-menu > li > a:focus {
    background: var(--ez-blue-light, #eaf2fb) !important;
    color: var(--ez-blue, #0b5aa5) !important;
}
#menu-0 .dropdown-menu > li > a .bi {
    margin-right: 8px;
    color: var(--ez-blue, #0b5aa5);
    font-size: 15px;
    vertical-align: -1px;
}

#menu-0 .but {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 13px;
    border-radius: 999px !important;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
#menu-0 .but:hover {
    transform: translateY(-2px);
    text-decoration: none;
    color: #fff;
}
#menu-0 a[href="sign-up.php"].but {
    box-shadow: 0 8px 20px rgba(253,127,4,0.35);
}
#menu-0 .but-outline {
    background: rgba(255,255,255,0.08);
}
#menu-0 .but-outline:hover {
    background: rgba(255,255,255,0.2);
}

#menu-0 #menu a,
#menu-0 .nav li a {
    font-family: 'Poppins', 'Roboto', sans-serif;
}

/* The mobile hamburger panel (#menu, shown below ~979px) never had its own
   background - it's a plain block nested inside the fixed nav, so opening it
   let the hero section underneath show straight through the link text
   instead of a proper opaque dropdown panel. */
#menu-0 #menu.collapse {
    background: #fff;
    box-shadow: 0 16px 32px rgba(11,90,165,0.18);
    padding: 6px 20px;
    position: relative;
    z-index: 1031;
}
#menu-0 #menu .nav > li > a {
    display: block;
    padding: 12px 4px !important;
    border-bottom: 1px solid #eef2f6;
    /* This panel has a white background (see above), but the site-wide nav
       link color is white too (for the gradient bar) - without overriding it
       here explicitly the mobile menu text would be invisible, white on
       white. */
    color: var(--ez-ink, #1c2733) !important;
}
#menu-0 #menu .nav > li:last-child > a {
    border-bottom: none;
}
#menu-0 #menu .nav > li > a:hover,
#menu-0 #menu .nav > li > a:focus {
    color: var(--ez-blue, #0b5aa5) !important;
}
#menu-0 #menu .bi {
    margin-right: 8px;
    color: var(--ez-blue, #0b5aa5);
    font-size: 15px;
    vertical-align: -1px;
}

/* Site-wide design system for the redesign - scoped to .ez-theme so it never
   affects pages that haven't been redesigned yet. */
.ez-theme {
    --ez-blue: #0b5aa5;
    --ez-blue-dark: #073d70;
    --ez-blue-light: #eaf2fb;
    --ez-red: #fa274c;
    --ez-orange: #fd7f04;
    --ez-ink: #1c2733;
    --ez-muted: #64707c;
    color: var(--ez-ink);
}

.ez-theme h1, .ez-theme h2, .ez-theme h3, .ez-theme .ez-display {
    font-family: 'Poppins', 'Roboto', sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.ez-eyebrow {
    display: inline-block;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.28);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 20px;
}

/* ---------- Buttons ---------- */
.ez-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 15px;
    padding: 13px 26px;
    border-radius: 999px;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
    border: none;
    cursor: pointer;
}

.ez-btn:hover { transform: translateY(-2px); text-decoration: none; }

.ez-btn-primary {
    background: var(--ez-orange);
    color: #fff;
    box-shadow: 0 10px 24px rgba(253,127,4,0.35);
}
.ez-btn-primary:hover { color: #fff; box-shadow: 0 14px 30px rgba(253,127,4,0.45); }

.ez-btn-outline {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.55);
}
.ez-btn-outline:hover { color: #fff; background: rgba(255,255,255,0.18); }

.ez-btn-blue {
    background: var(--ez-blue);
    color: #fff;
    box-shadow: 0 10px 24px rgba(11,90,165,0.3);
}
.ez-btn-blue:hover { color: #fff; box-shadow: 0 14px 30px rgba(11,90,165,0.4); }

/* ---------- Reusable white card (forms, widgets) ---------- */
.ez-card {
    position: relative;
    z-index: 2;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(11,90,165,0.14);
    padding: 32px;
}

.ez-card h1, .ez-card h3 { margin: 0 0 4px; color: var(--ez-ink); }
.ez-card > p:first-of-type { color: var(--ez-muted); margin: 0 0 20px; font-size: 14px; }

.ez-card .form-group label,
.ez-card label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ez-muted);
    margin-bottom: 6px;
    display: inline-block;
}

.ez-card .form-control,
.ez-card input[type="text"],
.ez-card input[type="password"],
.ez-card input[type="email"] {
    border-radius: 8px;
    border: 1.5px solid #e3e8ee;
    height: 44px;
    box-shadow: none;
    width: 100%;
    padding: 0 14px;
}

.ez-card .form-control:focus,
.ez-card input:focus {
    border-color: var(--ez-blue);
    box-shadow: 0 0 0 3px rgba(11,90,165,0.12);
    outline: none;
}

.ez-btn-block {
    width: 100%;
    justify-content: center;
    padding: 12px 20px;
    height: 44px;
}

.ez-rate-card { max-width: 1100px; margin: 0 auto; }

/* ---------- Page header (inner pages) ---------- */
.ez-page-header {
    padding: 130px 0 60px;
    background: linear-gradient(135deg, var(--ez-blue-dark) 0%, var(--ez-blue) 60%, #1279c4 100%);
    color: #fff;
    text-align: center;
}
.ez-page-header h1 { color: #fff; font-size: 36px; margin: 10px 0 8px; }
.ez-page-header p { color: rgba(255,255,255,0.85); font-size: 16px; max-width: 560px; margin: 0 auto; }

/* ---------- Auth (login/signup) ---------- */
.ez-auth-wrap { max-width: 460px; margin: -50px auto 80px; padding: 0 16px; }
.ez-auth-wrap-wide { max-width: 820px; }
.ez-card .row { margin-left: -10px; margin-right: -10px; }
.ez-card .row > div { padding-left: 10px; padding-right: 10px; }
.ez-card .form-group,
.ez-card > .row > div { margin-bottom: 16px; }
.ez-card-label {
    display: block; font-size: 13px; font-weight: 600; color: var(--ez-blue);
    text-transform: uppercase; letter-spacing: 0.04em; margin: 22px 0 10px;
}
.ez-auth-card { text-align: left; }
.ez-auth-card h1 { font-size: 24px; text-align: center; }
.ez-auth-card > p:first-of-type { text-align: center; margin-bottom: 26px; }
.ez-auth-foot { text-align: center; margin-top: 18px; font-size: 14px; color: var(--ez-muted); }
.ez-auth-foot a { color: var(--ez-blue); font-weight: 600; text-decoration: none; }
.ez-auth-foot a:hover { text-decoration: underline; }

/* ---------- Section shell ---------- */
.ez-section { padding: 70px 0; }
.ez-section-alt { background: #f6f9fc; }

.ez-section-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.ez-section-head .ez-eyebrow { background: var(--ez-blue-light); border-color: var(--ez-blue-light); color: var(--ez-blue); }
.ez-section-head h2 { font-size: 32px; margin: 14px 0 10px; color: var(--ez-ink); }
.ez-section-head p { color: var(--ez-muted); font-size: 16px; line-height: 1.6; }

/* ---------- Steps ---------- */
.ez-steps { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }
.ez-step { flex: 1 1 260px; max-width: 320px; text-align: center; padding: 30px 22px; }
.ez-step-num {
    width: 52px; height: 52px; line-height: 52px; border-radius: 50%;
    background: var(--ez-blue-light); color: var(--ez-blue);
    font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 20px; margin: 0 auto 16px;
    /* Pages that left-align the step text (dailinginstruction.php) set
       text-align:left on the parent .ez-step card, which was inherited here
       too and pushed the digit to the left edge of the circle instead of its
       center. display:flex centers it directly, independent of whatever the
       parent's text-align is set to. */
    display: flex;
    align-items: center;
    justify-content: center;
}
.ez-step h3 { font-size: 18px; margin: 0 0 8px; }
.ez-step p { color: var(--ez-muted); font-size: 14px; line-height: 1.6; margin: 0; }

/* ---------- $1 trial banner ---------- */
.ez-trial {
    background: linear-gradient(120deg, var(--ez-red), #ff5f7a);
    border-radius: 20px; color: #fff; padding: 46px 40px; text-align: center;
    box-shadow: 0 20px 40px rgba(250,39,76,0.25);
}
.ez-trial .ez-price { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 46px; }
.ez-trial p { font-size: 17px; margin: 10px 0 26px; color: rgba(255,255,255,0.92); }
.ez-trial .ez-btn-primary { background: #fff; color: var(--ez-red); box-shadow: 0 10px 24px rgba(0,0,0,0.18); }
.ez-trial .ez-btn-primary:hover { color: var(--ez-red); }

/* ---------- Feature grid ---------- */
.ez-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 900px) { .ez-features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ez-features { grid-template-columns: 1fr; } }

.ez-feature {
    background: #fff; border: 1px solid #edf1f5; border-radius: 14px; padding: 26px;
    display: flex; gap: 16px; align-items: flex-start;
    transition: box-shadow .15s ease, transform .15s ease;
}
.ez-feature:hover { box-shadow: 0 14px 30px rgba(20,40,70,0.08); transform: translateY(-3px); }
.ez-feature-icon {
    flex: none; width: 48px; height: 48px; border-radius: 12px;
    background: var(--ez-blue-light); color: var(--ez-blue);
    display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.ez-feature h4 { margin: 2px 0 6px; font-size: 16px; font-family: 'Poppins', sans-serif; }
.ez-feature p { margin: 0; color: var(--ez-muted); font-size: 14px; line-height: 1.55; }

/* ---------- Video ---------- */
.ez-video-frame {
    border-radius: 18px; overflow: hidden; box-shadow: 0 24px 50px rgba(11,90,165,0.16);
    max-width: 860px; margin: 0 auto; aspect-ratio: 16 / 9;
}
.ez-video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Support band ---------- */
.ez-support {
    position: relative; border-radius: 20px; overflow: hidden; padding: 60px 40px; color: #fff;
    background: linear-gradient(120deg, rgba(7,61,112,0.92), rgba(11,90,165,0.88)), url(../assets/images/CustomerService.jpg) center/cover no-repeat;
}
.ez-support h2 { color: #fff; }
.ez-support p { color: rgba(255,255,255,0.85); max-width: 520px; }
.ez-support .ez-btn-outline { border-color: rgba(255,255,255,0.6); }

/* ---------- Final CTA ---------- */
.ez-final-cta { text-align: center; padding: 70px 0 90px; }
.ez-final-cta h2 { font-size: 30px; margin-bottom: 14px; }
.ez-final-cta p { color: var(--ez-muted); margin-bottom: 26px; }

@media (max-width: 767px) {
    .ez-page-header { padding: 110px 0 50px; }
    .ez-page-header h1 { font-size: 28px; }
    .ez-auth-wrap { margin-top: -30px; }
    .ez-card { padding: 22px; }
}