/* United Taxes - Custom Theme Overrides */
/* This file overrides the default Perfex theme styles for login/register pages */

:root {
    --ut-primary: #0a3d3d;
    --ut-secondary: #ffc107;
    --ut-text: #2d3748;
    --ut-light-bg: #f8fafc;
    --ut-white: #ffffff;
}

/* Header / Navigation Override */
.navbar.navbar-default.header {
    background: linear-gradient(135deg, var(--ut-primary) 0%, #0d4f4f 100%) !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    padding: 10px 0 !important;
    min-height: 70px !important;
}

.navbar.header .navbar-brand.logo,
.navbar.header .navbar-brand.logo img {
    height: 45px !important;
    max-height: 45px !important;
    padding: 5px 0 !important;
}

.navbar.header .navbar-nav>li>a {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    padding: 15px 18px !important;
    transition: all 0.3s ease !important;
    border-radius: 6px !important;
    margin: 5px 3px !important;
}

.navbar.header .navbar-nav>li>a:hover,
.navbar.header .navbar-nav>li>a:focus,
.navbar.header .navbar-nav>li.active>a {
    color: var(--ut-white) !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

.navbar.header .navbar-nav>li>a i {
    margin-right: 6px !important;
}

/* Mobile Toggle Button */
.navbar.header .navbar-toggle {
    border-color: rgba(255, 255, 255, 0.3) !important;
    margin-top: 15px !important;
}

.navbar.header .navbar-toggle .icon-bar {
    background-color: var(--ut-white) !important;
}

.navbar.header .navbar-toggle:hover,
.navbar.header .navbar-toggle:focus {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Dropdown Menu in Header */
.navbar.header .dropdown-menu {
    background: var(--ut-white) !important;
    border: none !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
    border-radius: 10px !important;
    padding: 10px 0 !important;
    margin-top: 10px !important;
}

.navbar.header .dropdown-menu>li>a {
    color: var(--ut-text) !important;
    padding: 10px 20px !important;
    font-size: 0.9rem !important;
    transition: all 0.2s ease !important;
}

.navbar.header .dropdown-menu>li>a:hover {
    background: var(--ut-light-bg) !important;
    color: var(--ut-primary) !important;
    padding-left: 25px !important;
}

/* Profile Image in Header */
.navbar.header .client-profile-image-small {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 2px solid var(--ut-secondary) !important;
    object-fit: cover !important;
}

/* Footer Override */
footer.footer {
    background: linear-gradient(135deg, var(--ut-primary) 0%, #0d4f4f 100%) !important;
    color: var(--ut-white) !important;
    padding: 30px 0 !important;
    margin-top: 40px !important;
    border-top: 3px solid var(--ut-secondary) !important;
}

footer.footer .copyright-footer {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.9rem !important;
}

footer.footer a {
    color: var(--ut-secondary) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

footer.footer a:hover {
    color: var(--ut-white) !important;
    text-decoration: underline !important;
}

/* Login/Register Page Improvements */
.login-heading,
.register-heading {
    color: var(--ut-primary) !important;
    font-weight: 700 !important;
    font-size: 2rem !important;
    margin-bottom: 30px !important;
}

.login-form .panel_s,
#register-form .panel_s {
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden !important;
}

.login-form .panel-body,
#register-form .panel-body {
    padding: 40px !important;
}

.login-form .form-control,
#register-form .form-control {
    border-radius: 8px !important;
    border: 2px solid #e2e8f0 !important;
    padding: 12px 16px !important;
    font-size: 1rem !important;
    transition: all 0.2s ease !important;
}

.login-form .form-control:focus,
#register-form .form-control:focus {
    border-color: var(--ut-secondary) !important;
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.15) !important;
}

.login-form .btn-primary,
#register-form .btn-primary {
    background: linear-gradient(135deg, var(--ut-primary) 0%, #0d4f4f 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 14px 24px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.login-form .btn-primary:hover,
#register-form .btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(10, 61, 61, 0.3) !important;
}

.login-form .btn-default,
#register-form .panel-footer {
    background: var(--ut-light-bg) !important;
    border-radius: 8px !important;
    border: 2px solid #e2e8f0 !important;
}

.login-form .btn-default:hover {
    border-color: var(--ut-primary) !important;
    color: var(--ut-primary) !important;
}

/* Form Labels */
.login-form label,
#register-form label {
    font-weight: 600 !important;
    color: var(--ut-text) !important;
    margin-bottom: 8px !important;
}

/* Checkbox Styling */
.login-form .checkbox label,
#register-form .checkbox label {
    font-weight: 400 !important;
}

/* Links */
.login-form .text-muted {
    color: var(--ut-primary) !important;
    font-weight: 500 !important;
    transition: color 0.2s ease !important;
}

.login-form .text-muted:hover {
    color: var(--ut-secondary) !important;
}

/* Register Page Specific */
#register-form h4.bold {
    color: var(--ut-primary) !important;
    font-weight: 700 !important;
    font-size: 1.2rem !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid var(--ut-secondary) !important;
    margin-bottom: 20px !important;
}

#register-form .panel-footer {
    padding: 20px 40px !important;
    border-top: 1px solid #e2e8f0 !important;
}

/* Background for auth pages - moved gradient to #wrapper so it doesn't cover footer */
body.customers {
    background: #ffffff !important;
    /* Plain white for body */
    min-height: 100vh !important;
}

/* Wrapper gets the gradient background */
#wrapper {
    padding-bottom: 30px !important;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
    min-height: calc(100vh - 300px) !important;
    /* Leave room for footer */
}

/* Bootstrap Select / Dropdown Fixes */
.bootstrap-select {
    width: 100% !important;
}

.bootstrap-select>.dropdown-toggle {
    background: #fff !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-size: 1rem !important;
    color: var(--ut-text) !important;
    box-shadow: none !important;
    outline: none !important;
    height: auto !important;
    /* Allow dynamic height */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.bootstrap-select>.dropdown-toggle:focus,
.bootstrap-select.open>.dropdown-toggle {
    border-color: var(--ut-secondary) !important;
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.15) !important;
}

.bootstrap-select .dropdown-menu {
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
    padding: 0 !important;
    margin-top: -4px !important;
    z-index: 10000 !important;
    overflow: visible !important;
    /* Reset landing.css global overrides */
    /* opacity: 1 !important; */
    /* visibility: visible !important; */
    transform: none !important;
    position: absolute !important;
    /* display: block; - Let Bootstrap manage display, but override grid */
    min-width: 100% !important;
    min-height: 0 !important;
    left: 0 !important;
    top: 100% !important;
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove arrows if present from landing.css */
.bootstrap-select .dropdown-menu::before,
.bootstrap-select .dropdown-menu::after {
    display: none !important;
}

.bootstrap-select.open .dropdown-menu,
.bootstrap-select.show .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Fix inner layout - standard list instead of grid */
.bootstrap-select .dropdown-menu .inner,
.bootstrap-select .dropdown-menu ul,
.bootstrap-select .dropdown-menu li {
    display: block !important;
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
    min-height: 0 !important;
}

.bootstrap-select .dropdown-menu li {
    position: relative !important;
}

.bootstrap-select .dropdown-menu li a {
    padding: 10px 20px !important;
    font-size: 0.95rem !important;
    color: var(--ut-text) !important;
    text-align: left !important;
    white-space: nowrap !important;
}

/* Remove extra spacing from searchbox if present */
.bootstrap-select .dropdown-menu .bs-searchbox {
    padding: 5px 10px !important;
    margin: 0 !important;
}

.bootstrap-select .dropdown-menu .bs-searchbox input {
    margin-bottom: 0 !important;
}

/* Ensure no top margin on the list itself */
.bootstrap-select .dropdown-menu ul {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.bootstrap-select .dropdown-menu li a:hover {
    background: var(--ut-light-bg) !important;
    color: var(--ut-primary) !important;
}

/* Ensure Footer Background is Visible with High Specificity */
body.customers footer.footer,
footer#contact,
.footer {
    background: #0a3d3d !important;
    background: linear-gradient(135deg, #0a3d3d 0%, #0d4f4f 100%) !important;
    color: #ffffff !important;
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
}

/* Force inner elements to be transparent to show footer background */
footer.footer .container,
footer.footer .row,
footer.footer .footer-grid,
footer.footer .footer-col,
footer.footer .col-md-12 {
    background: transparent !important;
}

/* Fix for footer text visibility against dark background */
footer.footer h4,
footer.footer p,
footer.footer li,
footer.footer span,
footer.footer div,
footer.footer a {
    color: rgba(255, 255, 255, 0.9) !important;
}

footer.footer h4 {
    color: var(--ut-secondary) !important;
    border-bottom-color: var(--ut-secondary) !important;
}

footer.footer a:hover {
    color: var(--ut-white) !important;
    text-decoration: underline !important;
}

ul.submenu.customer-top-submenu {
    margin-top: 30px !important;
    margin-bottom: 20px !important;
    display: block !important;
}

/* Floating CTA Buttons */
.floating-cta-container {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
}

.floating-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: 12px 20px;
    border-radius: 50px;
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    font-weight: 600;
    font-size: 1rem;
}

.floating-btn i {
    font-size: 1.2rem;
    margin-right: 8px;
}

.floating-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    color: #fff !important;
}

.pay-now-btn {
    background: linear-gradient(135deg, #6772e5 0%, #5469d4 100%);
}

.whatsapp-btn {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
}

/* Mobile Responsiveness for Floating Buttons */
@media (max-width: 768px) {
    .floating-cta-container {
        bottom: 20px;
        right: 20px;
        left: 20px;
        flex-direction: row;
        justify-content: space-between;
    }

    .floating-btn {
        flex: 1;
        text-align: center;
        padding: 10px 15px;
        font-size: 0.9rem;
    }

    .floating-cta-container .floating-btn:first-child {
        margin-right: 10px;
    }
}

/* Fix for dropdown clipping in client area panels */
body.customers .panel_s {
    overflow: visible !important;
}