body {
  padding-top: 0px;
}

.login {
  min-height: 100vh;
}

.bg-image {
  background-image: url('/images/seo-website-image-main.webp');
  background-size: cover;
  background-position: center;
}

.bg-image2 {
  background-image: url('/images/seo-website-image-main.webp');
  background-size: cover;
  background-position: center;
}

.login-heading {
  font-weight: 300;
}

.btn-login {
  letter-spacing: 0.05rem;
  padding: 0.75rem 1rem;
}

input[type='text'] {
    font-size:1em;
}

.btn-login {
  background: #000;
  border: 0;
  border-radius:0;
}

.btn-login:hover {
  background: #636363;
  border: 0;
}

a {
  color: #000;
}

/* 1. Target all main form inputs (including those inside input-groups) */
.form-control, 
textarea,
select {
    /* FIX: Now targeting the Bootstrap class directly */
    
    /* Remove default Bootstrap rounding for a sharper look */
    border-radius: 0 !important; 
    
    /* Set a subtle, professional border color */
    border: 1px solid #d4d4d4 !important; 
    
    /* Increase vertical padding for better readability/touch target */
    padding: 12px 15px !important; 
    
    /* Remove default box-shadow */
    box-shadow: none !important; 
    
    /* Slightly increase font size for modern feel */
    font-size: 16px; 
    
    /* Smooth transitions for hover/focus effects */
    transition: all 0.2s ease-in-out; 
    
    /* REMOVED: width: 100% !important to fix input-group layout */
}

/* 2. Style the Input Group Text (e.g., the "https://" prefix) */
.input-group-text {
    /* Match the input's professional styling */
    border-radius: 0 !important;
    border: 1px solid #d4d4d4 !important;
    
    /* Use a very light grey background to differentiate the prefix */
    background-color: #f7f7f7; 
    color: #555;
    
    /* Match the padding to ensure vertical alignment with the input field */
    padding: 12px 15px !important; 
    font-size: 16px;
}

/* 3. Custom Focus State (More professional than default blue outline) */
.form-control:focus,
textarea:focus,
select:focus {
    /* Remove the default bright blue focus outline */
    outline: none !important; 
    
    /* Use a subtle, darker border color on focus */
    border-color: #4a4a4a !important; 
    
    /* Optionally add a thin focus box-shadow (subtle only) */
    box-shadow: 0 0 0 2px rgba(74, 74, 74, 0.2) !important; 
}

/* 4. Style the Form Submission Button */
button[type="submit"],
.btn { /* Also targeting .btn for general use */
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 15px 30px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    transition: background-color 0.3s ease;
}

/* 5. Button Hover Effect */
button[type="submit"]:hover,
.btn:hover {
    background-color: #333333 !important;
    cursor: pointer;
}

.form-floating .form-control {
    /* INCREASED from 1.625rem to 1.8rem to push the text down a few pixels */
    padding-top: 1.8rem !important; 
    
    /* Keep these values as they were */
    padding-bottom: 0.75rem !important; 
    height: auto !important; 
}

/* Target all <label> elements for forms */
label {
    /* Ensures the label's text content is aligned to the left/start */
    text-align: left !important;
    
    /* Ensure the label element itself takes up the full width, 
       allowing text-align to work correctly (inherited from previous CSS, 
       but good to reinforce here) */
    display: block !important;
    padding-bottom: 5px;
}