/* =========================================================
   CYBER CITY — MY ACCOUNT
   Premium Customer Hub + Easier First-Time Registration
========================================================= */

body.woocommerce-account {
    --cc-green:#66F238;
    --cc-bg:#020503;
    --cc-panel:#061008;
    --cc-panel-2:#08120A;
    --cc-line:rgba(102,242,56,.14);
    --cc-line-strong:rgba(102,242,56,.34);
    --cc-text:#F3F6F3;
    --cc-muted:#859087;
    --cc-soft:#AAB4AC;

    background:
        radial-gradient(circle at 50% 0%, rgba(102,242,56,.07), transparent 28%),
        #020503 !important;

    color:var(--cc-text);
}

/* =========================================================
   PAGE WRAPPER
========================================================= */

body.woocommerce-account .site-content {
    background:transparent !important;
}

body.woocommerce-account .ast-container {
    width:100% !important;
    max-width:1500px !important;
    padding-left:28px !important;
    padding-right:28px !important;
    box-sizing:border-box;
}

body.woocommerce-account .site-main {
    padding-top:42px;
    padding-bottom:100px;
}

body.woocommerce-account article,
body.woocommerce-account .entry-content,
body.woocommerce-account .woocommerce {
    width:100%;
    max-width:100%;
}

body.woocommerce-account .entry-title {
    display:none !important;
}

/* =========================================================
   NOTICES
========================================================= */

body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-error {
    margin:0 0 24px !important;
    padding:18px 22px !important;
    border:1px solid var(--cc-line) !important;
    border-top:1px solid var(--cc-green) !important;
    border-radius:10px !important;
    background:#071009 !important;
    color:#DCE4DE !important;
    box-shadow:0 18px 50px rgba(0,0,0,.22);
}

body.woocommerce-account .woocommerce-error {
    border-top-color:#ff6868 !important;
}

/* =========================================================
   LOGGED-IN LAYOUT
========================================================= */

body.woocommerce-account.logged-in .woocommerce {
    display:grid !important;
    grid-template-columns:300px minmax(0,1fr) !important;
    grid-template-areas:"nav content";
    gap:30px !important;
    align-items:start !important;
}

/* LEFT NAV */
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation {
    grid-area:nav !important;
    width:300px !important;
    min-width:300px !important;
    float:none !important;
    position:sticky;
    top:160px;

    padding:18px;
    box-sizing:border-box;

    border:1px solid var(--cc-line);
    border-radius:14px;

    background:
        linear-gradient(rgba(102,242,56,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(102,242,56,.018) 1px, transparent 1px),
        #040A05;

    background-size:32px 32px;

    box-shadow:0 25px 70px rgba(0,0,0,.28);
}

body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation::before {
    content:"CUSTOMER HUB";
    display:block;
    margin:5px 8px 16px;
    color:var(--cc-green);
    font-size:10px;
    line-height:1;
    font-weight:900;
    letter-spacing:1.6px;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li {
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation a {
    min-height:56px;
    padding:0 15px;
    box-sizing:border-box;

    display:flex;
    align-items:center;

    border-bottom:1px solid rgba(255,255,255,.05);

    color:#9BA59D !important;
    text-decoration:none !important;

    font-size:11px;
    font-weight:800;
    letter-spacing:.5px;
    text-transform:uppercase;

    transition:.2s ease;
}

body.woocommerce-account .woocommerce-MyAccount-navigation a::after {
    content:"→";
    margin-left:auto;
    color:rgba(102,242,56,.34);
    font-size:15px;
}

body.woocommerce-account .woocommerce-MyAccount-navigation a:hover,
body.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
    color:var(--cc-green) !important;
    background:linear-gradient(90deg, rgba(102,242,56,.07), transparent);
    padding-left:20px;
}

/* RIGHT CONTENT */
body.woocommerce-account.logged-in .woocommerce-MyAccount-content {
    grid-area:content !important;
    width:100% !important;
    min-width:0 !important;
    float:none !important;
    overflow:hidden;

    padding:clamp(28px,4vw,52px);
    box-sizing:border-box;

    border:1px solid var(--cc-line);
    border-radius:14px;

    background:
        radial-gradient(circle at 100% 0%, rgba(102,242,56,.055), transparent 27%),
        linear-gradient(180deg,#061008,#020503);

    box-shadow:0 30px 90px rgba(0,0,0,.30);

    color:#A9B2AB;
}

body.woocommerce-account.logged-in .woocommerce-MyAccount-content::before {
    content:"CYBER CITY • MY ACCOUNT";
    display:block;
    margin-bottom:22px;
    color:var(--cc-green);
    font-size:9px;
    font-weight:900;
    letter-spacing:1.7px;
}

/* Fix long usernames / emails */
body.woocommerce-account.logged-in .woocommerce-MyAccount-content,
body.woocommerce-account.logged-in .woocommerce-MyAccount-content p,
body.woocommerce-account.logged-in .woocommerce-MyAccount-content strong,
body.woocommerce-account.logged-in .woocommerce-MyAccount-content a {
    word-break:normal !important;
    overflow-wrap:anywhere !important;
}

body.woocommerce-account.logged-in .woocommerce-MyAccount-content p {
    color:#8E9991;
    font-size:14px;
    line-height:1.8;
}

body.woocommerce-account.logged-in .woocommerce-MyAccount-content > p:first-of-type {
    color:#EEF2EF !important;
    font-size:18px !important;
    line-height:1.7 !important;
    font-weight:700;
}

/* =========================================================
   HEADINGS
========================================================= */

body.woocommerce-account .woocommerce h2,
body.woocommerce-account .woocommerce h3 {
    color:#F3F6F3 !important;
    font-weight:900 !important;
}

/* =========================================================
   BUTTONS
========================================================= */

body.woocommerce-account .woocommerce .button,
body.woocommerce-account .woocommerce button.button,
body.woocommerce-account .woocommerce input.button {
    min-height:50px;
    padding:0 22px !important;

    display:inline-flex !important;
    align-items:center;
    justify-content:center;

    border:1px solid var(--cc-green) !important;
    border-radius:7px !important;

    background:var(--cc-green) !important;
    color:#041004 !important;

    font-size:10px !important;
    font-weight:900 !important;
    letter-spacing:.65px;
    text-transform:uppercase;

    box-shadow:none !important;
    transition:.2s ease;
}

body.woocommerce-account .woocommerce .button:hover,
body.woocommerce-account .woocommerce button.button:hover {
    transform:translateY(-1px);
    filter:brightness(1.06);
    box-shadow:0 10px 28px rgba(102,242,56,.12) !important;
}

/* =========================================================
   INPUTS / FORMS
========================================================= */

body.woocommerce-account .woocommerce form .form-row label {
    margin-bottom:8px;
    color:#A0AAA2;
    font-size:10px;
    font-weight:800;
    letter-spacing:.45px;
    text-transform:uppercase;
}

body.woocommerce-account .woocommerce input.input-text,
body.woocommerce-account .woocommerce input[type="text"],
body.woocommerce-account .woocommerce input[type="email"],
body.woocommerce-account .woocommerce input[type="password"],
body.woocommerce-account .woocommerce input[type="tel"],
body.woocommerce-account .woocommerce select,
body.woocommerce-account .woocommerce textarea {
    width:100% !important;
    min-height:56px;
    padding:0 16px !important;
    box-sizing:border-box;

    border:1px solid rgba(102,242,56,.15) !important;
    border-radius:7px !important;

    background:#050B06 !important;
    color:#FFF !important;

    outline:none !important;
    box-shadow:none !important;
}

body.woocommerce-account .woocommerce textarea {
    min-height:120px;
    padding:14px 16px !important;
}

body.woocommerce-account .woocommerce input:focus,
body.woocommerce-account .woocommerce textarea:focus,
body.woocommerce-account .woocommerce select:focus {
    border-color:rgba(102,242,56,.68) !important;
    box-shadow:0 0 0 3px rgba(102,242,56,.05) !important;
}

/* =========================================================
   FIRST-TIME CUSTOMER / LOGIN + REGISTER
========================================================= */

body.woocommerce-account:not(.logged-in) .woocommerce {
    width:min(1240px,100%);
    margin:0 auto;
    padding:44px;
    box-sizing:border-box;

    border:1px solid var(--cc-line);
    border-radius:16px;

    background:
        linear-gradient(rgba(102,242,56,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(102,242,56,.018) 1px, transparent 1px),
        radial-gradient(circle at 50% 0%, rgba(102,242,56,.08), transparent 32%),
        #030804;

    background-size:40px 40px,40px 40px,auto,auto;

    box-shadow:0 40px 100px rgba(0,0,0,.34);
}

body.woocommerce-account:not(.logged-in) .woocommerce::before {
    content:"CYBER CITY CUSTOMER ACCESS";
    display:block;
    margin-bottom:8px;
    text-align:center;
    color:var(--cc-green);
    font-size:10px;
    font-weight:900;
    letter-spacing:2px;
}

body.woocommerce-account:not(.logged-in) .woocommerce::after {
    content:"Orders • Tracking • Addresses • Faster Checkout";
    display:block;
    clear:both;
    padding-top:30px;
    text-align:center;
    color:#626D64;
    font-size:9px;
    font-weight:700;
    letter-spacing:1px;
}

/* Register first visually, Login second */
body.woocommerce-account:not(.logged-in) #customer_login {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:"register login";
    gap:20px;
    margin-top:34px;
}

body.woocommerce-account:not(.logged-in) #customer_login .u-column2 {
    grid-area:register;
}

body.woocommerce-account:not(.logged-in) #customer_login .u-column1 {
    grid-area:login;
}

body.woocommerce-account:not(.logged-in) #customer_login .u-column1,
body.woocommerce-account:not(.logged-in) #customer_login .u-column2 {
    width:100% !important;
    float:none !important;
    position:relative;

    padding:34px;
    box-sizing:border-box;

    border:1px solid var(--cc-line);
    border-radius:12px;

    background:rgba(0,0,0,.24);
}

/* Make registration more obvious */
body.woocommerce-account:not(.logged-in) #customer_login .u-column2 {
    border-color:rgba(102,242,56,.34);
    background:
        radial-gradient(circle at 80% 0%, rgba(102,242,56,.07), transparent 36%),
        rgba(0,0,0,.26);
}

body.woocommerce-account:not(.logged-in) #customer_login .u-column2::before {
    content:"NEW CUSTOMER";
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:0 9px;
    margin-bottom:14px;

    border:1px solid rgba(102,242,56,.28);
    border-radius:999px;

    color:var(--cc-green);
    font-size:7px;
    font-weight:900;
    letter-spacing:1px;
}

body.woocommerce-account:not(.logged-in) #customer_login .u-column1::before {
    content:"RETURNING CUSTOMER";
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:0 9px;
    margin-bottom:14px;

    border:1px solid rgba(255,255,255,.08);
    border-radius:999px;

    color:#89938B;
    font-size:7px;
    font-weight:900;
    letter-spacing:1px;
}

body.woocommerce-account:not(.logged-in) #customer_login h2 {
    margin:0 0 11px !important;
    color:#FFF !important;
    font-size:30px !important;
    line-height:1.1 !important;
    font-weight:900 !important;
}

/* Helpful text under Register title */
body.woocommerce-account:not(.logged-in) #customer_login .u-column2 h2::after {
    content:"Create your account to see orders, save addresses and track purchases.";
    display:block;
    margin-top:10px;
    max-width:420px;
    color:#7D887F;
    font-size:11px;
    line-height:1.6;
    font-weight:500;
    letter-spacing:0;
}

body.woocommerce-account:not(.logged-in) .woocommerce-form-login,
body.woocommerce-account:not(.logged-in) .woocommerce-form-register {
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
}

/* Stronger register button */
body.woocommerce-account:not(.logged-in) .woocommerce-form-register .button {
    width:100% !important;
    min-height:56px;
    margin-top:6px !important;
}

/* Login button full width too */
body.woocommerce-account:not(.logged-in) .woocommerce-form-login .button {
    min-width:150px;
}

/* Password notice / privacy text */
body.woocommerce-account:not(.logged-in) .woocommerce-form-register p,
body.woocommerce-account:not(.logged-in) .woocommerce-privacy-policy-text {
    color:#768078 !important;
    font-size:11px !important;
    line-height:1.65 !important;
}

body.woocommerce-account:not(.logged-in) .woocommerce-form-register p a,
body.woocommerce-account:not(.logged-in) .woocommerce-privacy-policy-text a {
    color:var(--cc-green) !important;
}

/* Lost password */
body.woocommerce-account .woocommerce-LostPassword {
    margin-top:16px !important;
}

body.woocommerce-account .woocommerce-LostPassword a {
    color:#7D877F !important;
    font-size:11px;
    text-decoration:none !important;
}

body.woocommerce-account .woocommerce-LostPassword a:hover {
    color:var(--cc-green) !important;
}

/* =========================================================
   ORDERS TABLE
========================================================= */

body.woocommerce-account .woocommerce-orders-table {
    overflow:hidden;
    border:1px solid var(--cc-line) !important;
    border-radius:10px !important;
    background:#030804 !important;
}

body.woocommerce-account .woocommerce-orders-table th {
    padding:17px !important;
    border-color:var(--cc-line) !important;
    background:rgba(102,242,56,.035);
    color:var(--cc-green) !important;
    font-size:9px;
    font-weight:900;
    letter-spacing:.8px;
    text-transform:uppercase;
}

body.woocommerce-account .woocommerce-orders-table td {
    padding:18px 17px !important;
    border-color:rgba(255,255,255,.06) !important;
    color:#ADB6AF !important;
}

/* =========================================================
   ADDRESS CARDS
========================================================= */

body.woocommerce-account .woocommerce-Address {
    padding:24px !important;
    box-sizing:border-box;
    border:1px solid var(--cc-line);
    border-radius:9px;
    background:rgba(0,0,0,.18);
}

body.woocommerce-account .woocommerce-Address address {
    color:#8D9890;
    font-style:normal;
    line-height:1.8;
}

/* =========================================================
   ACCOUNT DETAILS
========================================================= */

body.woocommerce-account fieldset {
    margin-top:24px !important;
    padding:22px !important;
    border:1px solid var(--cc-line) !important;
    border-radius:9px;
}

body.woocommerce-account legend {
    padding:0 8px;
    color:var(--cc-green);
    font-size:10px;
    font-weight:900;
    letter-spacing:.7px;
    text-transform:uppercase;
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:950px) {

    body.woocommerce-account.logged-in .woocommerce {
        grid-template-columns:1fr !important;
        grid-template-areas:
            "nav"
            "content";
        gap:18px !important;
    }

    body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation {
        width:100% !important;
        min-width:0 !important;
        position:relative;
        top:auto;
    }

    body.woocommerce-account .woocommerce-MyAccount-navigation ul {
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:5px;
    }

    body.woocommerce-account .woocommerce-MyAccount-navigation a {
        border:1px solid rgba(102,242,56,.08);
    }

    body.woocommerce-account:not(.logged-in) #customer_login {
        grid-template-columns:1fr;
        grid-template-areas:
            "register"
            "login";
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px) {

    body.woocommerce-account .ast-container {
        padding-left:12px !important;
        padding-right:12px !important;
    }

    body.woocommerce-account .site-main {
        padding-top:18px;
        padding-bottom:60px;
    }

    body.woocommerce-account:not(.logged-in) .woocommerce {
        padding:18px 12px;
        border-radius:10px;
    }

    body.woocommerce-account:not(.logged-in) #customer_login {
        margin-top:24px;
        gap:14px;
    }

    body.woocommerce-account:not(.logged-in) #customer_login .u-column1,
    body.woocommerce-account:not(.logged-in) #customer_login .u-column2 {
        padding:22px 16px;
        border-radius:9px;
    }

    body.woocommerce-account:not(.logged-in) #customer_login h2 {
        font-size:25px !important;
    }

    body.woocommerce-account.logged-in .woocommerce-MyAccount-content {
        padding:23px 16px;
    }

    body.woocommerce-account .woocommerce-MyAccount-navigation {
        padding:12px;
    }

    body.woocommerce-account .woocommerce-MyAccount-navigation ul {
        grid-template-columns:1fr;
    }

    body.woocommerce-account .woocommerce-orders-table {
        font-size:11px;
    }

    body.woocommerce-account .woocommerce .button,
    body.woocommerce-account .woocommerce button.button,
    body.woocommerce-account .woocommerce input.button {
        width:100%;
    }
}