/* assets/css/login-page.css */

/* =============================================
   CSS VARIABLES (overridden by dynamic CSS)
   ============================================= */
:root {
    --rs-login-bg      : #0f0f1a;
    --rs-login-accent  : #e63946;
    --rs-login-card    : #1a1a2e;
    --rs-login-text    : #ffffff;
    --rs-login-accent-rgb : 230, 57, 70;
}

/* =============================================
   BODY
   ============================================= */
body.login {
    background-color    : var(--rs-login-bg) !important;
    background-size     : cover !important;
    background-position : center !important;
    background-repeat   : no-repeat !important;
    min-height          : 100vh;
    display             : flex;
    flex-direction      : column;
    align-items         : center;
    justify-content     : center;
    font-family         : 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    padding             : 0 !important;
    overflow-x          : hidden;
}

/* =============================================
   ANIMATED BACKGROUND
   ============================================= */
.rs-login-bg {
    position   : fixed;
    inset      : 0;
    z-index    : 0;
    overflow   : hidden;
    pointer-events: none;
}

/* Gradient overlay */
.rs-login-bg::before {
    content    : '';
    position   : absolute;
    inset      : 0;
    background :
        radial-gradient(ellipse at 20% 50%, rgba(var(--rs-login-accent-rgb), 0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(var(--rs-login-accent-rgb), 0.05) 0%, transparent 50%);
}

/* Animated grid lines */
.rs-login-bg::after {
    content    : '';
    position   : absolute;
    inset      : 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 50px 50px;
    animation  : rs-grid-move 20s linear infinite;
}

@keyframes rs-grid-move {
    0%   { transform: translateY(0); }
    100% { transform: translateY(50px); }
}

/* =============================================
   FLOATING PARTICLES
   ============================================= */
.rs-particles {
    position : absolute;
    inset    : 0;
}

.rs-particle {
    position      : absolute;
    border-radius : 50%;
    background    : rgba(var(--rs-login-accent-rgb), 0.15);
    animation     : rs-float linear infinite;
}

/* Individual particles with different sizes/positions/speeds */
.rs-particle-1  { width:6px;   height:6px;   left:10%;  top:20%;  animation-duration:12s; animation-delay:0s;    }
.rs-particle-2  { width:4px;   height:4px;   left:20%;  top:80%;  animation-duration:15s; animation-delay:2s;    }
.rs-particle-3  { width:8px;   height:8px;   left:30%;  top:50%;  animation-duration:10s; animation-delay:4s;    }
.rs-particle-4  { width:3px;   height:3px;   left:40%;  top:30%;  animation-duration:18s; animation-delay:1s;    }
.rs-particle-5  { width:5px;   height:5px;   left:55%;  top:70%;  animation-duration:14s; animation-delay:3s;    }
.rs-particle-6  { width:7px;   height:7px;   left:65%;  top:15%;  animation-duration:11s; animation-delay:5s;    }
.rs-particle-7  { width:4px;   height:4px;   left:75%;  top:60%;  animation-duration:16s; animation-delay:0.5s;  }
.rs-particle-8  { width:6px;   height:6px;   left:85%;  top:40%;  animation-duration:13s; animation-delay:2.5s;  }
.rs-particle-9  { width:3px;   height:3px;   left:90%;  top:80%;  animation-duration:17s; animation-delay:1.5s;  }
.rs-particle-10 { width:5px;   height:5px;   left:5%;   top:60%;  animation-duration:12s; animation-delay:3.5s;  }
.rs-particle-11 { width:8px;   height:8px;   left:45%;  top:90%;  animation-duration:9s;  animation-delay:0.8s;  }
.rs-particle-12 { width:4px;   height:4px;   left:95%;  top:10%;  animation-duration:20s; animation-delay:4.5s;  }

@keyframes rs-float {
    0%   { transform: translateY(0px) rotate(0deg); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; }
}

/* =============================================
   LOGO / BRAND AREA
   ============================================= */
.rs-login-brand {
    position  : relative;
    z-index   : 10;
    margin-bottom: 20px;
    text-align: center;
    margin-top:50px !important;
}

/* Hide the default WP H1 login link */
body.login #login h1 a {
    display: none !important;
}

.rs-login-logo-text {
    display     : flex;
    align-items : center;
    gap         : 14px;
    justify-content: center;
}

.rs-logo-icon {
    font-size      : 42px;
    filter         : drop-shadow(0 0 20px rgba(var(--rs-login-accent-rgb), 0.6));
    animation      : rs-logo-pulse 3s ease-in-out infinite;
}

@keyframes rs-logo-pulse {
    0%, 100% { filter: drop-shadow(0 0 20px rgba(var(--rs-login-accent-rgb), 0.6)); }
    50%       { filter: drop-shadow(0 0 35px rgba(var(--rs-login-accent-rgb), 0.9)); }
}

.rs-logo-words {
    display        : flex;
    flex-direction : column;
    text-align     : left;
}

.rs-logo-main {
    font-size      : 26px;
    font-weight    : 800;
    color          : var(--rs-login-text);
    letter-spacing : -0.5px;
    line-height    : 1.1;
    text-shadow    : 0 0 40px rgba(var(--rs-login-accent-rgb), 0.4);
}

.rs-logo-sub {
    font-size      : 11px;
    color          : rgba(255,255,255,0.5);
    letter-spacing : 2px;
    text-transform : uppercase;
    margin-top     : 3px;
}

/* Custom logo image */
.rs-login-logo-img {
    max-height : 70px;
    max-width  : 220px;
    object-fit : contain;
    filter     : drop-shadow(0 4px 20px rgba(0,0,0,0.4));
}

/* =============================================
   LOGIN FORM WRAPPER
   ============================================= */
body.login #login {
    position   : relative;
    z-index    : 10;
    width      : 100% !important;
    max-width  : 420px !important;
    padding    : 0 20px;
    box-sizing : border-box;
}

/* The form container */
body.login #loginform,
body.login #lostpasswordform,
body.login #registerform {
    background    : var(--rs-login-card) !important;
    border        : 1px solid rgba(255,255,255,0.08) !important;
    border-radius : 20px !important;
    padding       : 35px !important;
    box-shadow    :
        0 25px 60px rgba(0,0,0,0.5),
        0 0 0 1px rgba(255,255,255,0.05),
        inset 0 1px 0 rgba(255,255,255,0.08) !important;
    backdrop-filter: blur(20px);
    position      : relative;
    overflow      : hidden;
}

/* Glowing top border */
body.login #loginform::before,
body.login #lostpasswordform::before {
    content    : '';
    position   : absolute;
    top        : 0;
    left       : 0;
    right      : 0;
    height     : 2px;
    background : linear-gradient(
        90deg,
        transparent,
        var(--rs-login-accent),
        transparent
    );
    animation  : rs-border-glow 3s ease-in-out infinite;
}

@keyframes rs-border-glow {
    0%, 100% { opacity: 0.6; }
    50%       { opacity: 1; }
}

/* =============================================
   FORM LABELS
   ============================================= */
body.login #loginform label,
body.login #lostpasswordform label {
    color      : rgba(255,255,255,0.7) !important;
    font-size  : 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    margin-bottom : 6px !important;
    display    : block !important;
}

/* =============================================
   FORM INPUTS
   ============================================= */
body.login #loginform input[type="text"],
body.login #loginform input[type="password"],
body.login #loginform input[type="email"],
body.login #lostpasswordform input[type="text"],
body.login #lostpasswordform input[type="email"] {
    background    : rgba(255,255,255,0.06) !important;
    border        : 1px solid rgba(255,255,255,0.1) !important;
    border-radius : 10px !important;
    color         : var(--rs-login-text) !important;
    font-size     : 15px !important;
    padding       : 13px 16px !important;
    width         : 100% !important;
    box-sizing    : border-box !important;
    transition    : all 0.3s ease !important;
    outline       : none !important;
    box-shadow    : none !important;
    caret-color   : var(--rs-login-accent) !important;
}

body.login #loginform input[type="text"]:focus,
body.login #loginform input[type="password"]:focus,
body.login #lostpasswordform input[type="text"]:focus {
    background    : rgba(255,255,255,0.1) !important;
    border-color  : var(--rs-login-accent) !important;
    box-shadow    : 0 0 0 3px rgba(var(--rs-login-accent-rgb), 0.2) !important;
    transform     : translateY(-1px) !important;
}

/* Input placeholder */
body.login input::placeholder {
    color: rgba(255,255,255,0.2) !important;
}

/* =============================================
   REMEMBER ME CHECKBOX
   ============================================= */
body.login #loginform .forgetmenot {
    display     : flex !important;
    align-items : center !important;
    gap         : 8px !important;
    margin-top  : 5px !important;
}

body.login #loginform .forgetmenot label {
    color          : rgba(255,255,255,0.5) !important;
    font-size      : 12px !important;
    text-transform : none !important;
    letter-spacing : 0 !important;
    cursor         : pointer !important;
}

body.login #loginform .forgetmenot input[type="checkbox"] {
    accent-color : var(--rs-login-accent) !important;
    width        : 15px !important;
    height       : 15px !important;
    cursor       : pointer !important;
}

/* =============================================
   SUBMIT BUTTON
   ============================================= */
body.login #wp-submit,
body.login .button-primary {
    background    : var(--rs-login-accent) !important;
    border        : none !important;
    border-radius : 10px !important;
    color         : #fff !important;
    font-size     : 15px !important;
    font-weight   : 700 !important;
    letter-spacing: 0.5px !important;
    padding       : 14px 20px !important;
    width         : 100% !important;
    cursor        : pointer !important;
    transition    : all 0.3s ease !important;
    box-shadow    : 0 4px 20px rgba(var(--rs-login-accent-rgb), 0.4) !important;
    position      : relative !important;
    overflow      : hidden !important;
    text-shadow   : none !important;
}

/* Button shine effect */
body.login #wp-submit::before {
    content    : '';
    position   : absolute;
    top        : 0;
    left       : -100%;
    width      : 100%;
    height     : 100%;
    background : linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition : left 0.5s ease;
}

body.login #wp-submit:hover {
    transform   : translateY(-2px) !important;
    box-shadow  : 0 8px 30px rgba(var(--rs-login-accent-rgb), 0.6) !important;
    filter      : brightness(1.1) !important;
}

body.login #wp-submit:hover::before {
    left : 100%;
}

body.login #wp-submit:active {
    transform : translateY(0) !important;
}

/* =============================================
   ERROR / SUCCESS MESSAGES
   ============================================= */
body.login #login_error,
body.login .message,
body.login .success {
    background    : rgba(255,255,255,0.05) !important;
    border-left   : 4px solid var(--rs-login-accent) !important;
    border-radius : 10px !important;
    color         : rgba(255,255,255,0.8) !important;
    font-size     : 13px !important;
    padding       : 14px 16px !important;
    margin-bottom : 16px !important;
    box-shadow    : none !important;
    backdrop-filter: blur(10px);
}

body.login .message {
    border-left-color: #52b788 !important;
}

body.login #login_error a,
body.login .message a {
    color : var(--rs-login-accent) !important;
}

/* =============================================
   NAVIGATION LINKS (below form)
   ============================================= */
body.login #nav,
body.login #backtoblog {
    text-align : center !important;
    margin-top : 16px !important;
}

body.login #nav a,
body.login #backtoblog a {
    color          : rgba(255,255,255,0.4) !important;
    font-size      : 12px !important;
    text-decoration: none !important;
    transition     : color 0.2s !important;
}

body.login #nav a:hover,
body.login #backtoblog a:hover {
    color : rgba(255,255,255,0.8) !important;
}

/* =============================================
   POWERED BY (bottom right)
   ============================================= */
.rs-login-powered {
    position   : fixed;
    bottom     : 20px;
    right      : 24px;
    z-index    : 100;
    display    : flex;
    align-items: center;
    gap        : 5px;
    font-size  : 11px;
    color      : rgba(255,255,255,0.3);
    letter-spacing: 0.3px;
    transition : opacity 0.3s;
}

.rs-login-powered:hover {
    color : rgba(255,255,255,0.6);
}

.rs-login-powered a {
    color          : rgba(var(--rs-login-accent-rgb), 0.7) !important;
    text-decoration: none !important;
    font-weight    : 600 !important;
    transition     : color 0.2s !important;
}

.rs-login-powered a:hover {
    color : var(--rs-login-accent) !important;
}

/* =============================================
   HIDE DEFAULT WP ELEMENTS
   ============================================= */
body.login #backtoblog       { display: none !important; }
body.login .privacy-policy-link { display: none !important; }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 480px) {
    body.login #login          { padding: 0 15px; }
    body.login #loginform      { padding: 25px !important; border-radius: 16px !important; }
    .rs-logo-main              { font-size: 22px; }
    .rs-login-powered          { bottom: 15px; right: 15px; }
}

/* =============================================
   ADMIN SETTINGS PAGE STYLES
   ============================================= */
.rs-login-settings-header {
    display         : flex;
    align-items     : flex-start;
    justify-content : space-between;
    margin-bottom   : 20px;
    flex-wrap       : wrap;
    gap             : 15px;
}

.rs-login-settings-layout {
    display               : grid;
    grid-template-columns : 1fr 350px;
    gap                   : 25px;
    align-items           : start;
}

@media (max-width: 1100px) {
    .rs-login-settings-layout { grid-template-columns: 1fr; }
}

.rs-settings-card {
    background    : #fff;
    border        : 1px solid #e0e0e0;
    border-radius : 10px;
    padding       : 20px 25px;
    margin-bottom : 20px;
}

.rs-settings-card h3 {
    margin-top  : 0;
    font-size   : 15px;
    font-weight : 700;
    color       : #1d2327;
    padding-bottom: 12px;
    border-bottom : 1px solid #f0f0f0;
    margin-bottom : 15px;
}

/* Color field */
.rs-color-field {
    display     : flex;
    align-items : center;
    gap         : 10px;
}

.rs-color-input {
    width         : 44px !important;
    height        : 44px !important;
    border        : 2px solid #e0e0e0 !important;
    border-radius : 8px !important;
    padding       : 2px !important;
    cursor        : pointer;
}

.rs-color-text {
    font-family : monospace;
    font-size   : 13px !important;
    width       : 90px !important;
}

/* Color presets */
.rs-color-presets {
    display     : flex;
    align-items : center;
    flex-wrap   : wrap;
    gap         : 8px;
    margin-top  : 15px;
    padding-top : 15px;
    border-top  : 1px solid #f0f0f0;
}

.rs-color-presets > span {
    font-size  : 12px;
    color      : #666;
    font-weight: 600;
    margin-right: 4px;
}

.rs-preset-btn {
    width         : 60px !important;
    height        : 32px !important;
    border-radius : 6px !important;
    border        : 2px solid rgba(255,255,255,0.3) !important;
    cursor        : pointer !important;
    color         : #fff !important;
    font-size     : 10px !important;
    font-weight   : 700 !important;
    text-shadow   : 0 1px 2px rgba(0,0,0,0.4) !important;
    transition    : transform 0.2s, box-shadow 0.2s !important;
    padding       : 0 !important;
}

.rs-preset-btn:hover {
    transform  : scale(1.08) !important;
    box-shadow : 0 4px 12px rgba(0,0,0,0.3) !important;
}

/* Media upload field */
.rs-media-upload-field {
    display     : flex;
    align-items : center;
    gap         : 8px;
    flex-wrap   : wrap;
}

/* =============================================
   LIVE PREVIEW PANEL
   ============================================= */
.rs-login-live-preview {
    position: sticky;
    top: 32px;
}

.rs-preview-label {
    font-size      : 11px;
    color          : #666;
    text-transform : uppercase;
    letter-spacing : 1px;
    font-weight    : 600;
    margin-bottom  : 8px;
}

.rs-preview-frame {
    border        : 1px solid #e0e0e0;
    border-radius : 14px;
    overflow      : hidden;
    height        : 520px;
    position      : relative;
    background    : #0f0f1a;
    display       : flex;
    flex-direction: column;
    align-items   : center;
    justify-content: center;
    box-shadow    : 0 4px 20px rgba(0,0,0,0.15);
    transition    : background 0.3s;
}

/* Preview bg */
.rs-prev-bg {
    position : absolute;
    inset    : 0;
    overflow : hidden;
}

.rs-prev-particles {
    position : relative;
    width    : 100%;
    height   : 100%;
}

.rs-prev-particle {
    position      : absolute;
    border-radius : 50%;
    background    : rgba(230, 57, 70, 0.2);
    animation     : rs-prev-float 6s ease-in-out infinite;
}

.rs-prev-particle:nth-child(1) { width:6px; height:6px; left:15%; top:20%; animation-delay:0s; }
.rs-prev-particle:nth-child(2) { width:4px; height:4px; left:70%; top:60%; animation-delay:1s; }
.rs-prev-particle:nth-child(3) { width:5px; height:5px; left:40%; top:80%; animation-delay:2s; }
.rs-prev-particle:nth-child(4) { width:3px; height:3px; left:85%; top:30%; animation-delay:3s; }

@keyframes rs-prev-float {
    0%, 100% { transform: translateY(0); opacity: 0.4; }
    50%       { transform: translateY(-10px); opacity: 0.9; }
}

/* Preview card */
.rs-prev-card {
    position      : relative;
    z-index       : 2;
    background    : rgba(26, 26, 46, 0.95);
    border        : 1px solid rgba(255,255,255,0.08);
    border-radius : 14px;
    padding       : 22px;
    width         : 240px;
    box-shadow    : 0 15px 40px rgba(0,0,0,0.4);
    transition    : background 0.3s;
}

/* Card top glow line */
.rs-prev-card::before {
    content    : '';
    position   : absolute;
    top        : 0;
    left       : 20%;
    right      : 20%;
    height     : 1px;
    background : linear-gradient(90deg, transparent, #e63946, transparent);
}

/* Preview logo */
.rs-prev-logo {
    display     : flex;
    align-items : center;
    gap         : 10px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.rs-prev-icon      { font-size: 22px; }
.rs-prev-logo-main { font-size: 13px; font-weight: 800; color: #fff; line-height: 1.1; }
.rs-prev-logo-sub  { font-size: 8px; color: rgba(255,255,255,0.4); letter-spacing: 1.5px; text-transform: uppercase; margin-top: 2px; }

/* Preview form elements */
.rs-prev-label-text {
    font-size      : 8px;
    color          : rgba(255,255,255,0.5);
    text-transform : uppercase;
    letter-spacing : 0.8px;
    margin-bottom  : 5px;
    font-weight    : 600;
}

.rs-prev-input {
    background    : rgba(255,255,255,0.06);
    border        : 1px solid rgba(255,255,255,0.1);
    border-radius : 6px;
    height        : 28px;
    width         : 100%;
    margin-bottom : 8px;
    box-sizing    : border-box;
    transition    : background 0.3s;
}

.rs-prev-btn {
    background    : #e63946;
    border-radius : 6px;
    color         : #fff;
    font-size     : 11px;
    font-weight   : 700;
    padding       : 9px;
    text-align    : center;
    margin-top    : 14px;
    cursor        : pointer;
    transition    : background 0.3s, box-shadow 0.3s;
    box-shadow    : 0 3px 12px rgba(230, 57, 70, 0.4);
}

.rs-prev-link {
    text-align  : center;
    font-size   : 9px;
    color       : rgba(255,255,255,0.3);
    margin-top  : 10px;
    cursor      : pointer;
}

/* Preview powered by */
.rs-prev-powered {
    position   : absolute;
    bottom     : 12px;
    right      : 14px;
    font-size  : 9px;
    color      : rgba(255,255,255,0.3);
    display    : flex;
    gap        : 3px;
    z-index    : 3;
}

.rs-prev-powered-link {
    color       : rgba(230, 57, 70, 0.7);
    font-weight : 600;
}
body.login #login h1,
body.login #login h1 a {
    display : none !important;
    height  : 0 !important;
    margin  : 0 !important;
    padding : 0 !important;
}

/* Remove extra space where h1 was */
body.login #login {
    margin-top : 0 !important;
    padding-top: 0 !important;
}

/* Our brand sits ABOVE #login div */
#rs-login-brand-inserted {
    position      : relative;
    z-index       : 10;
    margin-bottom : 22px;
    text-align    : center;
    width         : 100%;
    max-width     : 420px;
}