/* =========================================================
   ZAKI SUB - REGISTER PAGE
   DARK MODE  : Brown + Gold
   LIGHT MODE : Emerald + Navy + Gold
========================================================= */


/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}


/* =========================================================
   DARK MODE - DEFAULT
========================================================= */

:root {

    /* Main background */

    --bg: rgb(37, 13, 13);

    --bg-secondary: #170707;


    /* Brand */

    --brand: rgb(37, 13, 13);

    --brand-light: #3A1818;

    --brand-dark: #170707;


    /* Accent */

    --accent: #F5C451;

    --accent-hover: #FFD66B;

    --accent-dark: #D99A18;


    /* Text */

    --text: #FFFFFF;

    --text-soft: #F3EAEA;

    --muted: #D6CACA;

    --placeholder: #CFC2C2;


    /* Card */

    --card: rgba(255, 255, 255, 0.08);

    --card-hover: rgba(255, 255, 255, 0.11);


    /* Inputs */

    --input-bg: rgba(255, 255, 255, 0.08);

    --input-focus: rgba(255, 255, 255, 0.12);

    --input-border: rgba(255, 255, 255, 0.20);


    /* Border */

    --border: rgba(255, 255, 255, 0.15);


    /* Shadows */

    --shadow:
        0 15px 35px rgba(0, 0, 0, 0.40);


    /* Accent glow */

    --accent-glow:
        0 8px 25px rgba(245, 196, 81, 0.18);


    /* Checkbox */

    --checkbox-bg: rgba(255, 255, 255, 0.08);

    --checkbox-border: rgba(255, 255, 255, 0.25);
}


/* =========================================================
   LIGHT MODE
========================================================= */

[data-theme="light"] {

    /* Main background */

    --bg: #F4F8F6;

    --bg-secondary: #E8F1EE;


    /* Brand */

    --brand: #0B1F33;

    --brand-light: #163B5C;

    --brand-dark: #071522;


    /* Accent */

    --accent: #0F766E;

    --accent-hover: #159B90;

    --accent-dark: #0B5F59;


    /* Text */

    --text: #10202F;

    --text-soft: #243746;

    --muted: #64748B;

    --placeholder: #84909C;


    /* Card */

    --card: rgba(255, 255, 255, 0.80);

    --card-hover: rgba(255, 255, 255, 0.95);


    /* Inputs */

    --input-bg: rgba(255, 255, 255, 0.75);

    --input-focus: #FFFFFF;

    --input-border: rgba(11, 31, 51, 0.14);


    /* Border */

    --border: rgba(11, 31, 51, 0.12);


    /* Shadows */

    --shadow:
        0 15px 35px rgba(11, 31, 51, 0.10);


    /* Accent glow */

    --accent-glow:
        0 8px 25px rgba(15, 118, 110, 0.18);


    /* Checkbox */

    --checkbox-bg: #FFFFFF;

    --checkbox-border: rgba(11, 31, 51, 0.18);
}


/* =========================================================
   BODY
========================================================= */

body {

    background:

        radial-gradient(
            circle at top left,
            rgba(245, 196, 81, 0.08),
            transparent 35%
        ),

        radial-gradient(
            circle at bottom right,
            rgba(15, 118, 110, 0.08),
            transparent 35%
        ),

        var(--bg);

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 20px;

    color: var(--text);

    transition:
        background 0.35s ease,
        color 0.35s ease;
}


/* =========================================================
   CONTAINER
========================================================= */

.container {

    width: 100%;

    max-width: 420px;

    position: relative;
}


/* =========================================================
   LOGO
========================================================= */

.logo {

    text-align: center;

    color: var(--text);

    margin-bottom: 25px;
}


.logo h1 {

    font-size: 32px;

    font-weight: 700;

    color: var(--text);

    letter-spacing: -0.5px;
}


.logo p {

    margin-top: 8px;

    color: var(--muted);

    font-size: 16px;

    line-height: 1.5;
}


/* =========================================================
   CARD
========================================================= */

.card {

    background:

        linear-gradient(
            145deg,
            var(--card),
            rgba(255, 255, 255, 0.04)
        );

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border: 1px solid var(--border);

    border-radius: 20px;

    padding: 30px;

    box-shadow: var(--shadow);

    transition:
        background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}


.card:hover {

    background:

        linear-gradient(
            145deg,
            var(--card-hover),
            rgba(255, 255, 255, 0.05)
        );
}


/* =========================================================
   CARD TITLE
========================================================= */

.card h2 {

    color: var(--text) !important;

    text-align: center;

    margin-bottom: 20px;

    font-size: 23px;

    font-weight: 700;
}


/* =========================================================
   LABELS
========================================================= */

label {

    display: block;

    margin-top: 15px;

    margin-bottom: 6px;

    color: var(--text);

    font-weight: bold;

    font-size: 14px;
}


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

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"] {

    width: 100%;

    height: 45px;

    padding: 0 15px;

    border: 1px solid var(--input-border);

    border-radius: 10px;

    background: var(--input-bg);

    color: var(--text);

    outline: none;

    font-size: 15px;

    transition:
        border-color 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}


/* =========================================================
   INPUT PLACEHOLDER
========================================================= */

input::placeholder {

    color: var(--placeholder);

    opacity: 1;
}


/* =========================================================
   INPUT FOCUS
========================================================= */

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus {

    border-color: var(--accent);

    background: var(--input-focus);

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--accent) 12%,
            transparent
        );
}


/* =========================================================
   TERMS
========================================================= */

.terms {

    margin-top: 18px;

    display: flex;

    align-items: flex-start;

    gap: 8px;

    font-size: 14px;

    color: var(--muted);

    line-height: 1.5;
}


/* =========================================================
   TERMS CHECKBOX
========================================================= */

.terms input {

    margin-top: 3px;

    width: 15px;

    height: 15px;

    accent-color: var(--accent);

    flex-shrink: 0;

    cursor: pointer;
}


/* =========================================================
   TERMS LINKS
========================================================= */

.terms a {

    color: var(--accent);

    font-weight: bold;

    text-decoration: none;

    transition: 0.3s ease;
}


.terms a:hover {

    color: var(--accent-hover);

    text-decoration: underline;
}


/* =========================================================
   REGISTER BUTTON
========================================================= */

.btn {

    width: 100%;

    height: 48px;

    margin-top: 25px;

    border: none;

    border-radius: 30px;

    background:

        linear-gradient(
            135deg,
            var(--accent),
            var(--accent-dark)
        );

    color: #FFFFFF;

    font-size: 16px;

    font-weight: bold;

    cursor: pointer;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;

    box-shadow: var(--accent-glow);
}


/* =========================================================
   BUTTON HOVER
========================================================= */

.btn:hover {

    background:

        linear-gradient(
            135deg,
            var(--accent-hover),
            var(--accent)
        );

    transform: translateY(-2px);

    box-shadow:

        0 10px 30px
        color-mix(
            in srgb,
            var(--accent) 25%,
            transparent
        );
}


/* =========================================================
   BUTTON ACTIVE
========================================================= */

.btn:active {

    transform: translateY(0);
}


/* =========================================================
   LOGIN LINKS
========================================================= */

.links {

    text-align: center;

    margin-top: 20px;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.5;
}


.links a {

    color: var(--accent);

    font-weight: bold;

    text-decoration: none;

    transition: 0.3s ease;
}


.links a:hover {

    color: var(--accent-hover);

    text-decoration: underline;
}


/* =========================================================
   GLOBAL LINKS
========================================================= */

a {

    color: var(--accent);

    font-weight: bold;

    text-decoration: none;

    transition: 0.3s ease;
}


a:hover {

    text-decoration: underline;

    color: var(--accent-hover);
}


/* =========================================================
   FOOTER
========================================================= */

.footer {

    text-align: center;

    margin-top: 25px;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.7;
}


.footer a {

    color: var(--accent);

    font-weight: normal;

    text-decoration: none;

    transition: 0.3s ease;
}


.footer a:hover {

    color: var(--accent-hover);

    text-decoration: underline;
}


/* =========================================================
   OPTIONAL THEME TOGGLE
=========================================================

   If you later add:

   <button class="theme-toggle"
           onclick="toggleTheme()">
       🌙
   </button>

========================================================= */

.theme-toggle {

    position: fixed;

    top: 20px;

    right: 20px;

    width: 44px;

    height: 44px;

    border-radius: 50%;

    border: 1px solid var(--border);

    background: var(--card);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    color: var(--text);

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    font-size: 18px;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}


.theme-toggle:hover {

    transform: rotate(15deg) scale(1.08);

    background: var(--accent);

    color: #111;

    border-color: var(--accent);
}


/* =========================================================
   GLOBAL TRANSITIONS
========================================================= */

body,
.card,
.logo,
.logo h1,
.logo p,
label,
input,
.btn,
.terms,
.links,
.footer {

    transition:
        background-color 0.35s ease,
        background 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}


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

@media (max-width: 600px) {

    body {

        padding: 15px;

        align-items: center;
    }


    .container {

        max-width: 100%;
    }


    .card {

        padding: 25px 20px;

        border-radius: 18px;
    }


    .logo {

        margin-bottom: 20px;
    }


    .logo h1 {

        font-size: 28px;
    }


    .logo p {

        font-size: 14px;
    }


    .card h2 {

        font-size: 21px;
    }


    .theme-toggle {

        top: 15px;

        right: 15px;

        width: 40px;

        height: 40px;

        font-size: 16px;
    }
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    body {

        padding: 12px;
    }


    .card {

        padding: 22px 17px;
    }


    .logo {

        margin-bottom: 17px;
    }


    .logo h1 {

        font-size: 26px;
    }


    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"] {

        height: 43px;
    }


    .btn {

        height: 46px;
    }


    .terms {

        font-size: 13px;
    }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

button:focus-visible,
a:focus-visible,
input:focus-visible {

    outline: 2px solid var(--accent);

    outline-offset: 3px;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        transition: none !important;

        animation: none !important;
    }
}