/*
 * register.css
 * Page-specific styles for account/register.php
 * Extracted from the inline <style> block in the page markup.
 */

        body { background: #1b2e2a; }

        .main-container {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            width: 100%;
            padding: 30px 20px;
        }

        .main-content { width: 100%; display: flex; justify-content: center; }
        .row { width: 100%; display: flex; justify-content: center; margin: 0; }

        .col-sm-10 {
            width: 100%;
            max-width: 520px;
            margin: 0 auto;
            float: none;
        }

        .login-container {
            width: 100%;
            max-width: 520px;
            margin: 0 auto;
        }

        @media (max-width: 768px) {
            .main-container { padding: 15px; }
            .col-sm-10 { padding: 0; }
            .widget-box { margin: 0; }
            .clearfix .pull-right { float: none !important; width: 100% !important; margin-top: 10px; }
        }
        @media (max-width: 480px) {
            .main-container { padding: 10px; }
            .widget-main { padding: 20px 15px !important; }
            .logo-wrapper { margin: 10px 0 20px 0 !important; }
            .main-logo { max-width: 80px !important; }
            h4.blue { font-size: 14px; }
            .header { font-size: 18px !important; }
        }

        * { max-width: 100%; }
        html, body { overflow-x: hidden; position: relative; }

        .logo-wrapper { text-align: center; margin: 20px 0 30px 0; }
        .main-logo {
            max-width: 100px;
            height: auto;
            display: inline-block;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        .is-invalid { border-color: #dc3545 !important; }
        .is-invalid:focus { box-shadow: 0 0 0 0.2rem rgba(220,53,69,0.25) !important; }
        .invalid-feedback {
            display: none;
            width: 100%;
            margin-top: 0.25rem;
            font-size: 80%;
            color: #dc3545;
        }
        .is-invalid ~ .invalid-feedback { display: block; }

        .toast-success { background-color: #2A7BE4 !important; }
        .toast-error   { background-color: #dc3545 !important; }
        .toast-warning { background-color: #f0ad4e !important; }

        .spinner-border-sm {
            display: inline-block;
            width: 1rem; height: 1rem;
            border: 0.15em solid currentColor;
            border-right-color: transparent;
            border-radius: 50%;
            animation: spinner-border .75s linear infinite;
            margin-right: 0.5rem;
            vertical-align: middle;
        }
        @keyframes spinner-border { to { transform: rotate(360deg); } }

        .btn-primary:disabled { opacity: 0.65; cursor: not-allowed; }

        /* Password field with lock + eye icons */
        .input-icon.has-toggle > input.form-control {
            padding-right: 60px;
        }

        /* Keep the built-in Ace lock icon at the edge */
        .input-icon.has-toggle > .ace-icon {
            left: auto;
            right: 5px;
        }

        /* Eye visibility toggle sits before the lock */
        .password-toggle {
            position: absolute;
            right: 32px;
            top: 50%;
            transform: translateY(-50%);
            width: 30px;
            height: 28px;
            padding: 0;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            background: none;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            color: #9aa0a6;
            z-index: 10;
            transition: color 0.2s ease, background-color 0.2s ease;
        }
        .password-toggle:hover,
        .password-toggle:focus-visible {
            color: #438eb9;
            background: rgba(67, 142, 185, 0.08);
            outline: none;
        }
        .password-toggle i { font-size: 15px; }
        .input-icon-right { position: relative; }

        .form-row-flex {
            display: flex;
            gap: 10px;
        }
        .form-row-flex > label { flex: 1; }

        @media (max-width: 480px) {
            .form-row-flex { flex-direction: column; gap: 0; }
        }

        .pwd-strength {
            height: 4px;
            background: #eee;
            border-radius: 2px;
            margin-top: 6px;
            overflow: hidden;
        }
        .pwd-strength .bar {
            height: 100%;
            width: 0;
            transition: width 0.3s ease, background 0.3s ease;
            background: #dc3545;
        }
        .pwd-hint {
            font-size: 11px;
            color: #888;
            margin-top: 4px;
        }

        .terms-text { font-size: 12px; color: #666; margin: 10px 0; }
        .terms-text a { color: #438eb9; }

        .back-home {
            text-align: center;
            margin-top: 20px;
        }
        .back-home a {
            display: inline-block;
            padding: 6px 16px;
            border-radius: 4px;
            background: #1b2e2a;
            color: #f5efe1;
            font-size: 13px;
            font-weight: 500;
            text-decoration: none;
            transition: background 0.2s ease;
        }
        .back-home a i { margin-right: 5px; }
        .back-home a:hover {
            background: #14704a;
            color: #e0b659;
            text-decoration: none;
        }