/* =========================================
   1. FONTS & RESET
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

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

body {
    height: 100vh;
    background: #ffffff;
    top: 0px !important; /* Fix for Google Translate */
}

.auth-wrapper {
    display: flex;
    height: 100vh;
}

/* =========================================
   2. LEFT SIDE (Slider & Background)
   ========================================= */
.full-img {
    position: relative;
    width: 60%; /* Desktop Width */
    height: 100vh;
    background-image: url("../assets/images/register_bg.jpg"); /* Check path */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    overflow: hidden;
}

/* Overlay */
.full-img::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(29, 94, 109, 0.26), rgba(242, 106, 33, 0.238));
    z-index: 1;
}

/* Slider Container */
.slider-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    position: relative;
    z-index: 2;
}

.slide-content {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
}

/* Animation */
.fade-animation { animation-name: fade; animation-duration: 0.8s; }
@keyframes fade {
    from { opacity: 0.4; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

/* Slider Typography */
.trading-bottom-title {
    margin-top: 35px;
    font-size: 26px;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.35;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
    letter-spacing: 0.8px;
}

/* Navigation (Arrows & Dots) */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 3rem;
    cursor: pointer;
    z-index: 100;
    padding: 20px;
    transition: 0.3s ease;
}
.slider-arrow:hover { color: #ffffff; transform: translateY(-50%) scale(1.1); }
.left-arrow { left: 10px; }
.right-arrow { right: 10px; }

.dots-container {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 100;
}
.dot {
    cursor: pointer; height: 8px; width: 8px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%; transition: all 0.3s ease;
}
.dot.active, .dot:hover { background-color: white; width: 30px; border-radius: 10px; }

/* --- Glassmorphism Master Class --- */
/* --- Specific Slide Styles (Trading, Awards, Mobile, CFD) --- */

/* --- 1. Container Fix (Optional but Recommended) --- */
/* Jis div ke andar ye cards hain, usko sahi se align karne ke liye */
.trading-section-left {
    display: flex;
    flex-direction: column;
    align-items: center; /* Cards ko center me laane ke liye */
    width: 100%;
}

/* --- 2. Trading Card (Normal State) --- */
.trading-feature-card {
    /* Layout & Alignment */
    display: flex;
    align-items: center; /* Vertically center items */
    justify-content: flex-start;
    gap: 20px; /* Icon aur Text ke bich ka gap */
    
    /* Size & Spacing */
    width: 90%;          /* Mobile friendly width */
    max-width: 480px;    /* Zyada chaura na ho */
    padding: 20px 25px;
    margin: 0 auto 20px auto; /* Top:0, Right:Auto, Bottom:20px (Gap), Left:Auto (Center) */

    /* Appearance */
    background-color: #ffffff;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); /* Thoda soft shadow */
    border: 1px solid transparent; /* Layout shift rokne ke liye */

    /* Text Color */
    color: #333333;
    
    /* Transition */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: default;
}

/* --- Icon Box --- */
.trading-icon-box {
    width: 50px; 
    height: 50px; 
    flex-shrink: 0; /* Icon chipkega nahi */
    display: flex; 
    align-items: center; 
    justify-content: center;
}

/* --- Text Content --- */
.trading-text-content {
    flex: 1; /* Text bachi hui jagah lega */
    font-size: 15px; 
    line-height: 1.4; 
    text-align: left;
    font-weight: 400;
}
.trading-text-content strong {
    font-weight: 700;
    color: #000;
    transition: color 0.3s ease;
}

/* --- 3. HOVER STATE (Glass Effect) --- */
.trading-feature-card:hover {
    transform: translateY(-5px); /* Upar uthega */
    
    /* Glass Effect Background */
    background: rgba(255, 255, 255, 0.15); /* Thoda zyada visible glass */
    backdrop-filter: blur(16px);           /* Strong blur */
    -webkit-backdrop-filter: blur(16px);
    
    /* Border & Shadow */
    border: 1px solid rgba(255, 255, 255, 0.4); 
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); /* Deep shadow */
    
    /* Text Color Change */
    color: #ffffff;
}

/* Hover par Strong text bhi white ho */
.trading-feature-card:hover .trading-text-content strong {
    color: #ffffff;
}

/* --- SVG Icons Color Change on Hover --- */
.trading-feature-card:hover .trading-icon-box svg circle,
.trading-feature-card:hover .trading-icon-box svg line,
.trading-feature-card:hover .trading-icon-box svg path,
.trading-feature-card:hover .trading-icon-box svg rect {
    stroke: #ffffff !important;
    transition: stroke 0.3s ease;
}
.trading-feature-card:hover .trading-icon-box svg text {
    fill: #ffffff !important;
    transition: fill 0.3s ease;
}

/*2. Awards Cards (Hover Glass Effect) */

/* --- 1. Main Container (Center isko karna hai) --- */
.awards-container {
    display: flex;
    flex-direction: column;
    align-items: center;    /* Child elements ko center karega */
    justify-content: center; /* Vertically center karega */
    gap: 25px;
    
    width: 100%;            /* Full width lega */
    max-width: 800px;       /* Zyada failne se rokega */
    margin: 0 auto;         /* <--- SABSE ZARURI: Left-Right Auto Margin (Center) */
    padding: 0 10px;        /* Mobile me chipke na */
}

/* --- 2. Rows (Cards wali line) --- */
.awards-row {
    display: flex;
    justify-content: center; /* Cards ko line ke beech me layega */
    align-items: center;
    gap: 20px;
    width: 100%;
    flex-wrap: wrap;        /* Jagah kam hone par niche aayenge */
}

/* --- 3. Card Styling --- */
.award-card {
    background: white;
    border-radius: 14px;
    width: 160px;           /* Fixed Width */
    height: 150px;          /* Fixed Height */
    
    display: flex;
    flex-direction: column;
    align-items: center;    /* Logo aur text center */
    justify-content: center; 
    
    padding: 15px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    
    /* Animation */
    transition: all 0.4s ease;
    border: 1px solid transparent;
}

/* --- 4. Logo Image Styling --- */
.award-logo {
    margin-bottom: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Box ke center me rahe */
}

.award-logo img {
    width: 55px;
    height: 55px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* --- 5. Text Styling --- */
.award-text { 
    font-size: 13px; 
    font-weight: 600; 
    color: #2a2a2a; 
    line-height: 1.4;
    width: 100%;
}

/* --- HOVER EFFECT (Glass) --- */
.award-card:hover {
    transform: translateY(-8px);
    
    /* Glass Effect */
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.award-card:hover .award-text {
    color: #ffffff;
}

.award-card:hover .award-logo img {
    transform: scale(1.1); /* Hover par thoda zoom */
}


/* --- 3. CFD Grid Cards (Hover Glass Effect) --- */

/* --- Normal State --- */
.cfd-grid-container {
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 22px; 
    max-width: 880px; 
    width: 100%;
    margin: 0 auto; /* Center alignment fix */
}

.cfd-card {
    position: relative;
    /* Original Background (Light mix) */
    background: rgb(240 240 240 / 85%); 
    border-radius: 18px;
    padding: 30px 20px;
    min-height: 140px;
    
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    gap: 14px;
    
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    transition: all 0.4s ease;
    border: 1px solid transparent;
}

/* Gradient Lines (Always visible) */
.cfd-card::before { content: ""; position: absolute; top: 14px; left: 14px; width: 42px; height: 3px; background: linear-gradient(90deg, #ff6a2b, transparent); border-radius: 3px; }
.cfd-card::after { content: ""; position: absolute; bottom: 14px; right: 14px; width: 42px; height: 3px; background: linear-gradient(270deg, #ff6a2b, transparent); border-radius: 3px; }

.cfd-icon-circle {
    width: 60px;
    height: 60px;
    background: transparent;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* Image Styling (Same as before) */
.cfd-icon-circle img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* Hover zoom effect (Optional - agar chahiye to rakho) */
.cfd-card:hover .cfd-icon-circle img {
    transform: scale(1.1);
}
/* Image inside circle */
.cfd-icon-circle img {
    width: 62px;  /* Icon size inside circle */
    height: 62px;
    object-fit: contain;
    border-radius: 100%;
    /* Agar SVG black hai to ye line usko WHITE bana degi */
    /* filter: brightness(0) invert(1);  */
    
    transition: transform 0.3s ease;
}

.cfd-text { 
    font-size: 14px; 
    font-weight: 600; 
    color: #1f1f1f; 
    text-align: center; 
    transition: 0.3s; 
    letter-spacing: 0.3px;
}

/* --- HOVER STATE (Glass Effect) --- */
.cfd-card:hover {
    transform: translateY(-6px);
    
    /* Glass Properties */
    background: rgba(255, 255, 255, 0.1); /* Transparent Glass */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

/* Text turns white on hover */
.cfd-card:hover .cfd-text {
    color: #ffffff;
}

/* Icon thoda zoom hoga hover par */
.cfd-card:hover .cfd-icon-circle img {
    transform: scale(1.1);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .cfd-grid-container { grid-template-columns: repeat(2, 1fr); }
}

/* --- 3. Mobile Grid Cards (Hover Glass Effect) --- */
.mobile-slide-container { position: relative; height: 520px; width: 100%; max-width: 850px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.main-mobile-img { height: 500px; width: auto; object-fit: contain; z-index: 2; filter: drop-shadow(0 15px 35px rgba(0,0,0,0.45)); }
.float-icon { position: absolute; width: 100px; height: auto; z-index: 3; animation: float 3.5s ease-in-out infinite; }
.icon-left { top: 35%; left: 20%; animation-delay: 0s; }
.icon-right-up { top: 20%; right: 25%; animation-delay: 1s; }
.icon-right-down { bottom: 25%; right: 25%; animation-delay: 2s; }

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

/* FAQ Link */
.faq-link-fixed {
    position: absolute; bottom: 40px; left: 40px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none; font-size: 0.9rem;
    display: flex; align-items: center; gap: 10px;
    z-index: 100; transition: 0.3s;
}
.faq-circle {
    width: 24px; height: 24px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 14px;
}
.faq-link-fixed:hover { color: white; }
.faq-link-fixed:hover .faq-circle { background: rgba(255, 255, 255, 0.4); }


/* =========================================
   3. RIGHT SIDE (Form Section)
   ========================================= */
.auth-right {
    width: 40%;
    background: #fff;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    overflow-y: auto;
    padding: 30px 0;
}

/* Language Button */
.lang-wrapper-reg { position: absolute; top: 25px; right: 40px; z-index: 1000; }
.lang-btn-reg { min-width: 60px; height: 40px; border: none; cursor: pointer; border-radius: 20px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); transition: all .3s; font-size: 14px; font-weight: 600; padding: 8px 20px; color: #333; }
.lang-btn-reg:hover { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12); }
.lang-dropdown-reg { position: absolute; top: 50px; right: 0; width: 160px; background: #fff; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); padding: 8px 0; display: none; z-index: 1001; }
.lang-dropdown-reg.show { display: block; animation: fadeUp .25s ease; }
.lang-dropdown-reg .lang-item { padding: 10px 15px; cursor: pointer; font-size: 14px; transition: background .2s; color: #333; }
.lang-dropdown-reg .lang-item:hover { background: #f0f0f0; }

/* Register Card */
.register-card { width: 360px; text-align: Center; padding: 20px 0 40px 0; margin: auto; }
.register-card h2 { font-size: 22px; margin-bottom: 25px; font-weight: 600; }

/* Logo */
.logo-group { display: flex; justify-content: center; margin-top: 20px; margin-bottom: 25px; }
.main-logo { width: 90px; height: 90px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18), inset 0 1px 3px rgba(255, 255, 255, 0.35); animation: pulseGlow 2.5s infinite; }
.login-logo-img { width: 55px; height: 55px; object-fit: contain; }

/* =========================================
   4. FORM ELEMENTS (Inputs & Tabs)
   ========================================= */

/* Tab Switch */
.tab-switch { display: flex; background: #eef0f1; border-radius: 8px; overflow: hidden; margin-bottom: 25px; padding: 5px; }
.tab-switch button { flex: 1; padding: 10px; border: none; background: transparent; font-size: 14px; font-weight: 500; cursor: pointer; border-radius: 6px; color: #555; transition: 0.3s; }
.tab-switch .active { background: #0c4f57; color: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }

/* Wave Inputs */
.wave-group { position: relative; margin: 25px 0; width: 100%; }
.wave-group .input { font-size: 15px; padding: 12px 5px; display: block; width: 100%; border: none; border-bottom: 1.5px solid #ccc; background: transparent; color: #333; }
.wave-group .input:focus { outline: none; }
.wave-group .label { color: #999; font-size: 15px; position: absolute; pointer-events: none; left: 5px; top: 12px; display: flex; }
.wave-group .label-char { transition: 0.25s ease all; transition-delay: calc(var(--index) * 0.05s); }

/* Password Validation Hints */
.password-hints {
    display: none;
    margin-top: 8px;
    padding: 0 5px;
    font-size: 12px;
}

.password-hints.show {
    display: block;
    animation: fadeIn 0.3s ease;
}

.password-hints .hint-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 4px;
    color: #e53935;
    line-height: 1.4;
}

.password-hints .hint-item.valid {
    color: #43a047;
}

.password-hints .hint-item::before {
    content: "✗";
    font-weight: bold;
    font-size: 13px;
    flex-shrink: 0;
}

.password-hints .hint-item.valid::before {
    content: "✓";
}
/* Float Label Animation */
.wave-group .input:focus ~ .label .label-char,
.wave-group .input:valid ~ .label .label-char,
.wave-group .input[readonly] ~ .label .label-char {
    transform: translateY(-22px); font-size: 12px; color: #0c4f57;
}

/* Error State for inputs */
.wave-group .input.is-invalid {
    border-bottom-color: #dc2626 !important;
}

.wave-group .input.is-invalid:focus ~ .bar::before,
.wave-group .input.is-invalid:focus ~ .bar::after {
    background: #dc2626;
}

/* Error Icon */
.error-icon {
    position: absolute;
    right: 5px;
    top: 12px;
    font-size: 18px;
    color: #dc2626;
    font-weight: bold;
    display: none !important;
}

.wave-group .input.is-invalid ~ .error-icon {
    display: block !important;
}

/* Error Message */
.error-message {
    font-size: 12px;
    color: #dc2626;
    margin-top: 4px;
    margin-left: 0px;
    display: none !important;
    animation: fadeIn 0.3s ease;
    text-align: left;
}

.wave-group .input.is-invalid ~ .error-message {
    display: block !important;
}

.country-select-group .input.is-invalid {
    border-bottom-color: #dc2626 !important;
}

.country-select-group .input.is-invalid ~ .error-icon {
    display: block !important;
}

.country-select-group .input.is-invalid ~ .error-message {
    display: block !important;
}
/* Orange Bar */
.wave-group .bar { position: relative; display: block; width: 100%; }
.wave-group .bar::before, .wave-group .bar::after { content: ''; height: 2px; width: 0; bottom: 0; position: absolute; background: #f26a21; transition: 0.3s ease all; }
.wave-group .bar::before { left: 50%; }
.wave-group .bar::after { right: 50%; }
.wave-group .input:focus ~ .bar::before, .wave-group .input:focus ~ .bar::after { width: 50%; }

/* Phone Row Layout */
.phone-wave-row { display: flex; gap: 20px; align-items: flex-start; width: 100%; }
.code-wave-group { flex: 0 0 80px; position: relative; z-index: 50; }
.number-wave-group { flex: 1; }
#waveCodeInput { cursor: pointer;}

/* Country Dropdown */
.custom-dropdown { display: none; position: absolute; top: 100%; left: 0; width: 260px; background: #fff; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.15); padding: 10px; z-index: 100; border: 1px solid #eee; text-align: left; }
.custom-dropdown.active { display: block; }
.search-container { position: relative; margin-bottom: 8px; border-bottom: 1.5px solid #f26a21; }
.search-container input { width: 100%; border: none; padding: 8px; outline: none; font-size: 14px; background: transparent; }
.search-icon { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); font-size: 12px; color: #777; }
.country-list { list-style: none; padding: 0; margin: 0; max-height: 200px; overflow-y: auto; }
.country-list li { padding: 8px; cursor: pointer; font-size: 14px; color: #333; display: flex; gap: 10px; }
.country-list li:hover { background-color: #f9f9f9; }

/* --- Custom Country Dropdown Styles --- */
.country-select-group {
    position: relative;
    margin-bottom: 25px; /* Space below country input */
}


/* The Dropdown Box */
.custom-dropdown-list {
    display: none; /* Hidden by default */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    z-index: 1000;
    overflow: hidden;
    margin-top: 5px;
    border: 1px solid #eee;
}

.custom-dropdown-list.active {
    display: block;
    animation: fadeIn 0.2s ease-in-out;
}

/* Search Box Inside Dropdown */
.search-sticky {
    position: sticky;
    top: 0;
    background: #fff;
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
    z-index: 10;
}

.search-sticky input {
    width: 100%;
    padding: 8px 30px 8px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    outline: none;
}

.search-sticky input:focus {
    border-color: #ff4d00;
}

.search-lens {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #999;
}

/* List Items */
.custom-dropdown-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 250px;
    overflow-y: auto;
}

.custom-dropdown-list li {
    padding: 10px 15px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid #f9f9f9;
}

.custom-dropdown-list li:hover {
    background-color: #fff5f0; /* Light orange hover */
    color: #000;
}

/* Scrollbar styling */
.custom-dropdown-list ul::-webkit-scrollbar {
    width: 5px;
}
.custom-dropdown-list ul::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Other Inputs */
.radio-group { display: flex; gap: 20px; margin: 15px 0; justify-content: center; }
.radio-group label { display: flex; align-items: center; font-size: 14px; cursor: pointer; color: #333; }
.radio-group input[type="radio"] { margin-right: 8px; cursor: pointer; width: 18px; height: 18px; }

.checkbox-group { display: flex; flex-direction: column; gap: 12px; margin: 20px 0; font-size: 13px; text-align: left; }
.checkbox-group label { display: flex; align-items: flex-start; cursor: pointer; color: #333; }
.checkbox-group input[type="checkbox"] { margin-right: 10px; margin-top: 3px; cursor: pointer; width: 16px; height: 16px; flex-shrink: 0; }
.checkbox-group a { color: #e85b2a; text-decoration: none; }

/* Buttons & Links */
.login-btn { width: 100%; padding: 14px; border-radius: 30px; border: none; background: #e85b2a; color: #fff; font-size: 15px; margin-top: 10px; cursor: pointer; }
.login-btn:hover { background: #d94e1f; }

.bottom-links { margin-top: 25px; text-align: center; font-size: 13px; }
.bottom-links a { color: #e85b2a; text-decoration: none; margin: 0 8px; }
.bottom-links span { color: #999; }

/* Animations */
@keyframes pulseGlow {
    0% { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18), 0 0 0 0 #f26a21, inset 0 1px 3px rgba(255, 255, 255, 0.35); }
    70% { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18), 0 0 0 18px rgba(255, 180, 0, 0), inset 0 1px 3px rgba(255, 255, 255, 0.35); }
    100% { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18), 0 0 0 0 rgba(255, 180, 0, 0), inset 0 1px 3px rgba(255, 255, 255, 0.35); }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Utils */
.goog-te-banner-frame.skiptranslate, .goog-logo-link, .goog-te-gadget { display: none !important; }
.notranslate { translate: no; }

/* =========================================
   5. MOBILE RESPONSIVE
   ========================================= */
@media (max-width: 768px) {
    .auth-wrapper {
        flex-direction: column;
        height: auto;
    }

    .full-img {
        width: 100%;
        height: 0;
        padding: 0;
        min-height: 0;
        display: none;
        overflow: hidden;
    }

    .auth-right {
        width: 100%;
        min-height: 100vh;
        padding: 40px 20px;
        overflow-y: auto;
        justify-content: center;
        align-items: center;
    }

    .register-card {
        width: 100%;
        max-width: 360px;
        margin: auto;
        padding: 20px 0 40px 0;
    }

    .register-card h2 {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .wave-group {
        margin: 18px 0;
    }

    .login-btn {
        padding: 12px;
        font-size: 14px;
    }

    .bottom-links {
        margin-top: 20px;
        font-size: 12px;
    }

    .tab-switch {
        margin-bottom: 15px;
    }

    .tab-switch button {
        font-size: 13px;
        padding: 8px;
    }

    .phone-wave-row {
        gap: 12px;
    }

    .code-wave-group {
        flex: 0 0 70px;
    }

    .radio-group {
        gap: 15px;
        margin: 12px 0;
    }

    .radio-group label {
        font-size: 13px;
    }

    .checkbox-register {
        margin-top: 15px;
        gap: 10px;
    }

    .checkbox-register .checkbox-item {
        font-size: 13px;
    }

    .lang-wrapper-reg {
        top: 20px;
        right: 20px;
    }

    .logo-group {
        margin-top: 15px;
        margin-bottom: 20px;
    }

    .main-logo {
        width: 80px;
        height: 80px;
    }

    .login-logo-img {
        width: 50px;
        height: 50px;
    }
}

/* ROW */
.fancy-checkbox .checkbox-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;              /* left tight spacing */
    font-size: 14px;
    color: #111827;
    line-height: 1.5;
    cursor: pointer;
    margin-bottom: 12px;
    text-align: left;
}

/* =========================================
   6. MODAL POPUP (India/Australia)
   ========================================= */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-content {
    background: #fff;
    border-radius: 12px;
    padding: 40px 30px;
    max-width: 500px;
    width: 90%;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.modal-logo {
    margin-bottom: 20px;
}

.modal-title {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 15px;
}

.modal-body {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 25px;
    text-align: left;
}

.modal-body strong {
    color: #e85b2a;
}

.modal-body a {
    color: #e85b2a;
    text-decoration: none;
}

.modal-btn {
    width: 100%;
    padding: 14px;
    background: #e85b2a;
    color: #fff;
    border: none;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 15px;
    transition: background 0.3s;
}

.modal-btn:hover {
    background: #d94e1f;
}

.modal-footer {
    font-size: 12px;
    text-align: center;
}

.modal-footer a {
    color: #e85b2a;
    text-decoration: none;
    margin: 0 5px;
}

.modal-footer span {
    color: #999;
}

/* =========================================
   7. MESSAGE BOX (Success/Error)
   ========================================= */
.message-box {
    background: #f0f9ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 16px;
    margin-top: 15px;
    display: none;
    position: relative;
    animation: slideDown 0.3s ease;
}

.message-box.success {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.message-box.error {
    background: #fef2f2;
    border-color: #fecaca;
}

.message-close {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    line-height: 1;
}

.message-close:hover {
    color: #333;
}

.message-content {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
}

.message-box.success .message-content {
    color: #166534;
}

.message-box.error .message-content {
    color: #991b1b;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ROW */

/* THIN CHECKBOX */
.fancy-checkbox .checkbox-item input {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;            /* smaller */
    height: 16px;
    border-radius: 4px;
    border: 1px solid #d1d5db;   /* thinner border */
    background: #ffffff;
    cursor: pointer;
    position: relative;
    margin-top: 3px;
    flex-shrink: 0;         /* left fix */
}

/* CHECKED */
.fancy-checkbox .checkbox-item input:checked {
    background: #f04d23;
    border-color: #f04d23;
}

/* THIN CHECK MARK */
.fancy-checkbox .checkbox-item input:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 1.8px 1.8px 0;
    transform: rotate(45deg);
}

/* TEXT */
.fancy-checkbox .checkbox-item span {
    flex: 1;
    text-align: left;
}

/* ERROR MESSAGE – LEFT ALIGNED */
.fancy-checkbox .checkbox-error {
    font-size: 12px;
    color: #dc2626;
    margin-left: 26px;   /* checkbox width + gap */
    margin-top: -6px;
    margin-bottom: 10px;
    display: none;
}


.checkbox-register {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 18px;
    font-size: 13px;
    color: #555;
}

.checkbox-register .checkbox-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
    cursor: pointer;
}

.checkbox-register input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: #f26a21; /* Vantage Orange */
    cursor: pointer;
}

.checkbox-register a {
    color: #222;
    font-weight: 500;
    text-decoration: underline;
}

.checkbox-register a:hover {
    color: #f26a21;
}


.checkbox-error {
    display: none;
    color: #e53935;
    font-size: 12px;
    margin-left: 26px;
    margin-top: 4px;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}