/* =================================================================
   INPUT GROUP - Border & Focus States
   ================================================================= */
.input-group {
    border: 1px solid #0b161d !important;
    border-radius: 6px !important;
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden !important;
    position: relative;
    padding: 0 !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
	outline: none; /* Remove default browser outline */
    width: 100% !important;
    box-sizing: border-box !important;
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes spin {
  from { --angle: 0deg; }
  to { --angle: 360deg; }
}

/* .input-group:focus-within::before,
.input-group:focus-within::after {
  border-color: #41c4f8 !important;
  opacity: 1;
  animation: spin 3s linear infinite;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15) !important;
} */


/* Focus State - Blue Border */
.input-group:focus-within {
    border-color: #41c4f8 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15) !important;
}

/* =================================================================
   INPUT GROUP TEXT (Icon Span)
   ================================================================= */
.input-group-text {
    background-color: #e9ecef !important;
    border-right: 1px solid #d1d1d1 !important;
    border-radius: 0 !important;
    border: none !important;
    color: #0b161d;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    white-space: nowrap;
    z-index: 1;
    padding: 0.375rem 0.75rem !important;
    margin: 0 !important;
    min-width: 45px;
}

.input-group-text i {
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =================================================================
   FORM CONTROL (Input/Textarea)
   ================================================================= */
.form-control {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    min-width: 0;
    flex: 1 1 auto;
    background-clip: padding-box;
    padding: 0.375rem 0.75rem;
    width: 100% !important;
}

.form-control:focus {
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
}

textarea.form-control {
    min-height: 120px;
    resize: vertical;
    width: 100% !important;
}

/* =================================================================
   FORM GROUP - ALL FIELDS EQUAL WIDTH & ALIGNED
   ================================================================= */
.form-group {
    margin: 15px 0 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* First form group - reduce top margin */
.form-group:first-child {
    margin-top: 0 !important;
}

/* Row container - Convert to block to stack vertically */
.row {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    width: 100% !important;
}

/* Name and Email inside row - Full width, same as Subject/Message */
.row > .form-group {
    width: 100% !important;
    max-width: 100% !important;
    margin: 15px 0 0 0 !important;
    padding: 0 !important;
    flex: none !important;
}

/* First form-group in row (Name) - reduce top margin */
.row > .form-group:first-child {
    margin-top: 0 !important;
}

/* =================================================================
   VALIDATION STATES
   ================================================================= */
.form-group.is-invalid .input-group {
    border-color: #dc3545 !important;
}

.form-group.is-valid .input-group {
    border-color: #28a745 !important;
}

.invalid-feedback {
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #dc3545;
    padding-left: 5px;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.form-group.is-invalid .invalid-feedback {
    display: block !important;
    opacity: 1;
}

/* =================================================================
   CHARACTER COUNTER
   ================================================================= */
#charCount {
    font-size: 13px;
    color: #555;
    margin-top: 5px;
    margin-bottom: 0;
    text-align: right;
    padding-right: 5px;
    font-weight: 500;
    transition: color 0.3s ease;
}

#charCount.warning {
    color: #ffc107;
}

#charCount.danger {
    color: #dc3545;
}

/* =================================================================
   TOOLTIP STYLING
   ================================================================= */
.tooltip-inner {
    background-color: #007bff;
    font-size: 0.85rem;
}

.bs-tooltip-auto[x-placement^=top] .arrow::before,
.bs-tooltip-top .arrow::before {
    border-top-color: #007bff;
}

/* =================================================================
   NOTIFICATION OVERLAY
   ================================================================= */
#notification-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.notification-box {
    background: white;
    padding: 25px 40px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    animation: fadeIn 0.3s ease-out;
    max-width: 90%;
    width: 400px;
}

.notification-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.success-icon {
    color: #28a745;
}

.error-icon {
    color: #dc3545;
}

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

/* =================================================================
   PLACEHOLDER STYLING
   ================================================================= */
input::placeholder {
	color: #525252;
    opacity: 0.8;
}

textarea::placeholder {
	color: #525252;
    opacity: 0.8;
}

/* =================================================================
   RESPONSIVE - Mobile View
   ================================================================= */
@media (max-width: 768px) {
    .form-group,
    .row > .form-group {
        margin: 15px 0 0 0 !important;
        width: 100% !important;
    }
}

@media (max-width: 576px) {
    .notification-box {
        width: 85%;
    }
}

/* =================================================================
   Input fields Font awesome icon color
   ================================================================= */

.my-custom-icon { 
	color: #525252;
	opacity: 0.5;	
}

@media (prefers-reduced-motion: reduce) {
	.input-group::after {
		animation: none;
	}
}