/*──────────────────────────────
  0  FONT-FACES  (kept intact)
──────────────────────────────*/
@font-face{font-family:'Open Sans';font-style:normal;font-weight:300;src:local(''),url('../fonts/open-sans-v34-latin-300.woff2')format('woff2'),url('../fonts/open-sans-v34-latin-300.woff')format('woff')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:local(''),url('../fonts/open-sans-v34-latin-regular.woff2')format('woff2'),url('../fonts/open-sans-v34-latin-regular.woff')format('woff')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:500;src:local(''),url('../fonts/open-sans-v34-latin-500.woff2')format('woff2'),url('../fonts/open-sans-v34-latin-500.woff')format('woff')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;src:local(''),url('../fonts/open-sans-v34-latin-600.woff2')format('woff2'),url('../fonts/open-sans-v34-latin-600.woff')format('woff')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;src:local(''),url('../fonts/open-sans-v34-latin-700.woff2')format('woff2'),url('../fonts/open-sans-v34-latin-700.woff')format('woff')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:800;src:local(''),url('../fonts/open-sans-v34-latin-800.woff2')format('woff2'),url('../fonts/open-sans-v34-latin-800.woff')format('woff')}
@font-face{font-family:'Open Sans';font-style:italic;font-weight:300;src:local(''),url('../fonts/open-sans-v34-latin-300italic.woff2')format('woff2'),url('../fonts/open-sans-v34-latin-300italic.woff')format('woff')}
@font-face{font-family:'Open Sans';font-style:italic;font-weight:400;src:local(''),url('../fonts/open-sans-v34-latin-italic.woff2')format('woff2'),url('../fonts/open-sans-v34-latin-italic.woff')format('woff')}
@font-face{font-family:'Open Sans';font-style:italic;font-weight:500;src:local(''),url('../fonts/open-sans-v34-latin-500italic.woff2')format('woff2'),url('../fonts/open-sans-v34-latin-500italic.woff')format('woff')}
@font-face{font-family:'Open Sans';font-style:italic;font-weight:600;src:local(''),url('../fonts/open-sans-v34-latin-600italic.woff2')format('woff2'),url('../fonts/open-sans-v34-latin-600italic.woff')format('woff')}
@font-face{font-family:'Open Sans';font-style:italic;font-weight:700;src:local(''),url('../fonts/open-sans-v34-latin-700italic.woff2')format('woff2'),url('../fonts/open-sans-v34-latin-700italic.woff')format('woff')}
@font-face{font-family:'Open Sans';font-style:italic;font-weight:800;src:local(''),url('../fonts/open-sans-v34-latin-800italic.woff2')format('woff2'),url('../fonts/open-sans-v34-latin-800italic.woff')format('woff')}

/*──────────────────────────────
  1  RESET & BASICS
──────────────────────────────*/
html,body{
    margin:0 auto;
    padding:0;
    max-width:2560px;
    font-family:'Open Sans',sans-serif;
    text-align:center;
    color:var(--n-700);
    background:var(--n-000);
}
a{
    color:var(--p-600);
    text-decoration:none;
    transition: color 0.2s;
}
a:hover {
    color: var(--c-500);
    text-decoration: underline;
}
*:focus{
    outline: 2px solid rgba(var(--p-500-rgb), .5);
    outline-offset:2px;
    border-radius: 4px;
}
* { box-sizing: border-box; }

/* Scrollbar (webkit only) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--n-050); border-radius: 8px; }
::-webkit-scrollbar-thumb { background: var(--n-100); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--p-500); } /* MODIFIED */

/*──────────────────────────────
  2  UTILITIES
──────────────────────────────*/
.bold { font-weight: bold; }
.italic { font-style: italic; font-weight: 300; }
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.uppercase { text-transform: uppercase; }
.inline { display: inline-block; vertical-align: top; }
.relative { position: relative; }
.absolute { position: absolute; }
.clear { clear: both; }
.vspacer { display: inline-block; padding: 0 10px; }
.underline, .select2-rendered__match { text-decoration: underline; }
.pre { overflow-x: scroll; }
.blur, .censorblur { color: transparent; text-shadow: 0 0 8px rgba(var(--n-700-rgb), 0.7); }
.break_anywhere { word-wrap: break-word; word-break: break-all; }
.col-1 { width: 1%; } .col-2 { width: 2%; } .col-3 { width: 3%; }
.col-5 { width: 5%; } .col-7 { width: 7%; } .col-10 { width: 10%; }
.col-15 { width: 15%; } .col-20 { width: 20%; } .col-25 { width: 25%; }
.col-30 { width: 30%; } .col-40 { width: 40%; } .col-50 { width: 50%; }

/* Statuses */
.status-red { padding: 2px 10px; background: var(--danger-500); color: var(--n-000); font-size: small; font-weight: bold; border-radius: 4px; }
.status-green { padding: 2px 10px; background: var(--c-500); color: var(--n-000); font-size: small; font-weight: bold; border-radius: 4px; }
.payment_required { background: var(--c-500); padding: 10px; display: block; font-weight: bold; margin-bottom: 10px; color: var(--n-000); }
.remote-admin { width: 100%; position: absolute; left: 0; top: 0; background-color: var(--t-500); font-weight: bold; padding: 5px; z-index: 10001; }
.message { padding: 12px 15px; font-weight: bold; border: 1px solid var(--n-900); margin: 10px 0px; border-radius: 6px; }
.message.yellow { background-color: var(--t-050); border-color: var(--t-500); color: var(--t-600); }

/*──────────────────────────────
  3  LOGO & HEADLINES
──────────────────────────────*/
.logo { margin-top: 20px; display: inline-block; }
.logo img { width: 120px; }
.inner { margin: auto; max-width: 1240px; position: relative; }

h1.main, h2.main {
    margin: 50px 0 20px;
    font-size:35px;
    font-weight: 600;
    text-transform:uppercase;
    color: var(--n-900);
}
h2.main { font-size: 28px; margin-top: 60px; padding: 5px; border-bottom: 2px solid var(--n-100); display: inline-block; }


/*──────────────────────────────
  5  BUTTONS & LINKS
──────────────────────────────*/
.button,
.button.white,
a.clear,
a.search-02,
input.search-02,
button.search-02{
    font-family:'Open Sans',sans-serif;
    font-weight:700;
    text-transform:uppercase;
    cursor:pointer;
    white-space:nowrap;
    border: 1px solid transparent;
    position:relative;
    border-radius: 25px; /* Modern rounded corners */
    padding: 10px 25px;
    font-size: 15px;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
}

.button:hover,
a.clear:hover,
a.search-02:hover,
input.search-02:hover,
button.search-02:hover {
    text-decoration: none; /* Remove default underline on hover */
    transform: translateY(-2px); /* Subtle lift effect */
    box-shadow: 0 4px 12px rgba(var(--n-900-rgb), 0.1);
}

.button,
a.clear,
a.search-02,
input.search-02,
button.search-02{
    background:var(--c-500);
    color:var(--n-000);
}

.button:hover,
a.clear:hover,
a.search-02:hover,
input.search-02:hover,
button.search-02:hover {
    background: var(--c-600);
}

/* REMOVE all the old :after rules for the angled button effect */

.button.white{
    background:var(--n-000);
    border-color: var(--p-600);
    color: var(--p-600);
}

.button.white:hover {
    background: var(--p-050);
    border-color: var(--p-500);
}

.button.small {
    padding: 5px 15px;
    font-size: 12px;
}

/* Disabled state */
button:disabled,
.button:disabled,
.button:disabled:hover {
    background:var(--n-050);
    color:var(--n-700);
    cursor:not-allowed;
    transform: none;
    box-shadow: none;
}

/*──────────────────────────────
  6  SECTIONS / SUBHEADERS
──────────────────────────────*/
.subheader{
    background:var(--p-500);
    color:var(--n-000);
    text-transform:uppercase;
    padding:20px 0;
}
.subheader a{color:inherit}
.subheader-gray{background:var(--n-700)}

/*──────────────────────────────
  7  CONTENT OVERVIEW BOXES
──────────────────────────────*/
.overview .box{
    position:relative;
    display:inline-block;
    padding:20px 40px 40px;
    margin:70px 30px;
    font-size:15px;
    max-width:300px;
    min-height:340px;
    vertical-align:top;
    background:linear-gradient(180deg,#f8f8f8 0%,#fafafa 100%);
    border:1px solid transparent;
    transition:border .2s;
}
.overview .box h2{
    color:#777;
    text-transform:uppercase;
    margin:0 0 10px;
    font-weight:800;
    font-size:16px;
}
.overview .box hr{
    border:none;
    border-bottom:1px solid #ddd;
    margin:20px -42px;
}
.overview .box img{
    width:30px;
    position:absolute;
    right:10px;
    bottom:10px;
    opacity:.1;
}
.overview .active{
    border:1px solid var(--p-500);
}
.overview .active .circle{background:var(--p-500);color:var(--n-000)}
.overview .active .circle img{filter:invert(1)}

/*──────────────────────────────
  8  MAIN + HERO
──────────────────────────────*/
main{}
main .box{display:inline-block;vertical-align:top}
main .box-center{
    background:var(--p-500);
    color:var(--n-000);
    padding:20px;
    margin:0 20px;
    max-width:600px;
    min-height:383px;
}
.inner
{
    margin: auto;
    max-width: 1240px;
    position: relative;
}

main .big
{
    margin: 20px;
    text-align: left;
}
main .big input[type="text"],
main .big input[type="password"]
{
    margin-left: 0px;
}

main h2.landing
{
    margin-top: 0;
    color: #fff;
    border-bottom: 1px solid #fff;
    border-top: 1px solid #fff;
}

main .box img{width:600px}
@media(max-width:1900px){main .box img{width:400px}}
@media(max-width:1520px){main .box img{width:300px}}
@media(max-width:1320px){
    main .box img{display:block;max-width:60%;margin:10px 20%}
    .overview .box{margin:30px 10px}
}

/* Headings */
main h2, h2.main{
    margin-top:60px;
    color:var(--n-700);
    display:inline-block;
    padding:5px;
    border-bottom:1px solid #ccc;
    font-size:28px;
    font-weight:600;
    text-transform:uppercase;
}
.toggle-admin-menu { position: absolute; right: 5px; top: 5px; z-index: 10000; opacity: 0.5; }
main.admin { min-height: 550px; }
main.admin h2{margin-top:20px}

/*──────────────────────────────
  8.5  NAVIGATION MENU
──────────────────────────────*/
:root {
    --nav-top-height: 40px;
    --nav-main-height: 52px;
    --nav-total-height: 92px;
}

/* ─── TOP STRIP: Logo + Profile/Logout ─── */
.nav-top {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 1001;
    width: 100%;
    height: var(--nav-top-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    background: var(--n-900);
    box-sizing: border-box;
    transition: transform .3s ease, opacity .3s ease;
}

.nav-top.collapsed {
    transform: translateY(-100%);
    opacity: 0;
}

.nav-top-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.nav-top-left img {
    width: 24px;
    height: 24px;
}

.nav-top-left .wordmark {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--n-000);
    text-decoration: none;
}

.nav-top-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-top-right a {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--n-050);
    text-decoration: none;
    border-radius: 0.25rem;
    transition: background .2s ease, color .2s ease;
}

.nav-top-right a:hover {
    background: rgba(var(--n-000-rgb), .1);
    color: var(--n-000);
}

.nav-top-right a i {
    font-size: 0.9rem;
}

/* ─── MAIN NAV BAR: Links + Register CTA ─── */
nav {
    position: sticky;
    top: var(--nav-top-height);
    left: 0;
    z-index: 1000;
    width: 100%;
    height: var(--nav-main-height);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    box-sizing: border-box;
    background: rgba(var(--p-500-rgb), 1);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    box-shadow: 0 2px 6px rgba(var(--n-900-rgb), .15);
    transition: top .3s ease, background .2s ease;
}

nav.scrolled {
    top: 0;
    background: rgba(var(--p-500-rgb), .85);
}

nav > a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: .75rem 1.25rem;
    border-radius: .375rem;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--n-000);
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}

nav > a i {
    font-size: 1.125rem;
}

nav > a.active,
nav > a:hover {
    background: rgba(var(--n-000-rgb), .15);
    color: var(--n-000);
    text-decoration: none;
}

/* CTA Register Button */
nav .button {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1.75rem;
    background: var(--c-500);
    color: var(--n-000);
    border: none;
    border-radius: .375rem;
    font-weight: 700;
    font-size: .875rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    box-shadow: 0 2px 8px rgba(var(--c-500-rgb), .4);
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
    cursor: pointer;
}

nav .button:hover {
    background: var(--c-600);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--c-500-rgb), .5);
}

/* Mobile overflow menu */
.nav-overflow {
    display: none;
    position: relative;
}

.nav-overflow-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .75rem 1rem;
    border-radius: .375rem;
    background: rgba(var(--n-000-rgb), .1);
    cursor: pointer;
    transition: background .2s ease;
}

.nav-overflow-toggle:hover {
    background: rgba(var(--n-000-rgb), .2);
}

.nav-overflow-toggle i {
    font-size: 1.25rem;
    color: var(--n-000);
}

.nav-overflow-menu {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 180px;
    max-width: 220px;
    background: var(--n-000);
    border-radius: .375rem;
    box-shadow: 0 4px 12px rgba(var(--n-900-rgb), .2);
    overflow: hidden;
    z-index: 1002;
}

.nav-overflow-menu.active {
    display: block;
}

.nav-overflow-menu a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: .75rem 1rem;
    color: var(--n-700);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 600;
    text-transform: uppercase;
    transition: background .2s ease;
}

.nav-overflow-menu a:hover {
    background: var(--n-050);
}

.nav-overflow-menu a i {
    font-size: 1.125rem;
    color: var(--p-500);
}

.nav-overflow-menu a.active {
    background: var(--p-050);
    color: var(--p-600);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .nav-top {
        padding: 0 1rem;
    }

    .nav-top-left .wordmark {
        display: none;
    }

    nav {
        justify-content: flex-start;
        gap: 0.25rem;
        padding: 0 0.5rem;
    }

    nav > a {
        padding: .75rem .5rem;
    }

    nav > a span {
        display: none;
    }

    nav > a i {
        font-size: 1.25rem;
    }

    nav .button {
        position: relative;
        right: 0;
        padding: .5rem 1rem;
        font-size: .75rem;
    }
}

@media (max-width: 480px) {
    nav > a.overflow-item {
        display: none;
    }

    .nav-overflow {
        display: block;
        margin-left: auto;
    }
}

/*──────────────────────────────
  9  PRICING
──────────────────────────────*/
.pricing .box{
    border:1px solid #ccc;
    min-height:270px;
    padding:20px;
}
.pricing .box h2{
    font-weight:800;
    font-size:24px;
    padding-bottom:15px;
    border-bottom:1px solid var(--n-900);
}
.price{
    font-size:36px;
    font-weight:400;
    color:var(--n-700);
}
.price span{font-size:24px;font-weight:600;display:block}
.pricing ul{list-style:square;text-align:left}
.pricing li{line-height:28px;margin-top:5px}
.pricing .active{border:1px solid #aaa}
.pricing .active a.clear{background:var(--p-500)}

/*──────────────────────────────
  10  TABLES
──────────────────────────────*/
table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}
th, td {
    padding: 12px 15px; /* Increased padding */
    text-align: left;
    border-bottom: 1px solid var(--n-100);
    transition: background .2s;
}
th {
    background: var(--n-050);
    color: var(--n-900);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
}
tr:nth-child(even) td {
    background: var(--n-050);
}
tr:hover td {
    background: var(--p-050); /* Use brand color for hover */
}
tr.total td {
    border-top: 2px solid var(--n-700);
    font-weight: bold;
}
tr.bottom-line td {
    border-bottom: 2px solid var(--n-700);
}

/*──────────────────────────────
  11  ACCORDION (FAQ / T&C)
──────────────────────────────*/
.header-accordion{
    color:var(--n-700);
    font-weight:600;
    cursor:pointer;
    padding:15px 15px 15px 45px;
    border-bottom:1px solid #ccc;
    text-align:left;
    transition:.3s;
    position:relative;
}
.header-accordion:before{
    content:'\25BA';
    color:var(--n-700);
    font-weight:bold;
    position:absolute;
    left:15px;
    font-size:11px;
}
.active-accordion,
.header-accordion:hover{background:#f2f2f2}
.active-accordion:before{content:'\25BC'}

.accordion{
    padding:0 45px;
    background:var(--n-000);
    max-height:0;
    overflow:hidden;
    transition:max-height .2s ease-out;
}
.accordion p{margin-bottom:20px}

/*──────────────────────────────
  12  MODAL
──────────────────────────────*/
.modal{
    position:fixed;left:0;top:0;width:100%;height:100%;
    background:rgba(0,0,0,.5);
    opacity:0;visibility:hidden;transform:scale(.8);
    transition:visibility 0s .25s,opacity .25s,transform .25s;
    z-index:9999;
}
.modal#modal-info{z-index:10000;}
.modal.show-modal{
    opacity:1;visibility:visible;transform:scale(1);
    transition:visibility 0s,opacity .25s,transform .25s;
}
.modal-container{
    position:absolute;top:45%;left:50%;
    transform:translate(-50%,-50%);
    background:var(--n-000);
    padding:20px;
    min-width:440px;
    border-radius:8px;
    /*box-shadow:0 0 50px #000;*/
    box-shadow: var(--modal-shadow);
}
.close-button{
    position:absolute;top:0;right:10px;
    cursor:pointer;padding:5px;
}
.close-button:hover{color:var(--p-500)}
.modal-container h2{font-size:20px;font-weight:bold;margin:0 0 20px}

.modal#modal-profile .modal-container, .modal#modal-checkout .modal-container { top: 100px; transform: translate(-50%, 0%); }
.modal#modal-checkout  {position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-height: 6000px;}
.modal hr { border: none; border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
.modal .link { cursor: pointer; }

.modal-header { padding-top: 10px; }
.modal-content { padding: 10px 0; }
.modal-footer { padding-top: 10px; }

.box { display: inline-block; vertical-align: top; text-align: left; margin: 10px; }




/*──────────────────────────────
  13  FORMS
──────────────────────────────*/
input,select{
    font-size:16px;
    padding:8px;
    background:var(--n-000);
    border:1px solid #aaa;
}
input:focus,select:focus{border:1px solid var(--p-500)}
input[type=submit],a.submit{
    font-weight:bold;
    font-size:16px;
    width:295px;
    background:var(--c-500);
    border:1px solid var(--c-500);
    color:var(--n-000);
    padding:8px;
}
input[type=submit]:hover{color:var(--n-000);opacity:.9;cursor:pointer}

/*──────────────────────────────
  14  PAGINATION
──────────────────────────────*/
.pagination{margin-top:30px}
.pagination span{
    display:inline-block;
    padding:5px 10px;
    border:1px solid var(--n-700);
    font-weight:bold;
    cursor:pointer;
}
.pagination span:hover,
.pagination span.active{background:#f2f2f2}


/*──────────────────────────────
  16  RESPONSIVE BREAKPOINTS
──────────────────────────────*/
@media(min-width:1920px){
    div.header{background-size:cover;background:#fff no-repeat top center}
}
@media(max-width:800px){
    h1.main{font-size:24px}
    .logo img{max-width:90%;margin:0 5%}
    .top-menu{font-size:14px}
    footer .headline{display:none}
}
@media(max-width:510px){
    .modal-container{min-width:initial;width:88%}
}