/* 
 * 🔷 Input Box Glow Effect 
 * Adds a subtle light blue glow effect to all global input boxes
 * on focus and hover states for improved user experience
 */

/* Global Input Box Glow Effect */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]),
textarea,
select,
.inputbox {
  transition: all var(--transition-normal) !important;
  /* Ensure smooth transitions for all states */
}

/* Hover state glow effect */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]):hover,
textarea:hover,
select:hover,
.inputbox:hover {
  border-color: rgba(var(--primary), 0.4) !important;
  box-shadow:
    var(--glass-shadow-dark),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 15px rgba(var(--primary), 0.15) !important;
}

/* Focus state glow effect - stronger than hover */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]):focus,
textarea:focus,
select:focus,
.inputbox:focus {
  outline: none !important;
  border: 1px solid rgba(var(--primary), 0.5) !important;
  box-shadow:
    var(--glass-shadow-dark-elevated),
    0 0 30px rgba(var(--primary), 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(30px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(200%) !important;
}

/* Enhanced password input fields with matching glow */
input[type="password"]:hover {
  border-color: rgba(var(--primary), 0.4) !important;
  box-shadow:
    var(--glass-shadow-dark),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 15px rgba(var(--primary), 0.15) !important;
}

input[type="password"]:focus {
  outline: none !important;
  border: 1px solid rgba(var(--primary), 0.5) !important;
  box-shadow:
    var(--glass-shadow-dark-elevated),
    0 0 30px rgba(var(--primary), 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(30px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(200%) !important;
}

/* Enhanced placeholder styles on focus */
input:focus::placeholder,
textarea:focus::placeholder,
.inputbox:focus::placeholder {
  color: rgba(var(--text-secondary), 0.4) !important;
  transform: translateX(4px) !important;
  transition: all var(--transition-fast) !important;
}

/* Search input specific glow enhancement */
.search-box .inputbox:focus {
  box-shadow:
    var(--glass-shadow-dark-elevated),
    0 0 35px rgba(var(--primary), 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* PM and post input areas with expanded glow */
#message-box textarea:focus {
  box-shadow:
    var(--glass-shadow-dark-elevated),
    0 0 40px rgba(var(--primary), 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* Special styling for login and registration forms */
#login input:focus,
#register input:focus {
  box-shadow:
    var(--glass-shadow-dark-elevated),
    0 0 35px rgba(var(--accent-secondary), 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(var(--accent-secondary), 0.5) !important;
}

/* Ensure compatibility with quick login fields */
.headerbar input:focus {
  box-shadow:
    var(--glass-shadow-dark-elevated),
    0 0 25px rgba(var(--primary), 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}