/**
 * Theme CSS for themeSalzburgWedding
 * Contains color overrides for header and login page
 * Customize colors here to change the look of the Salzburg Wedding Company theme
 */

/* ========================================
   HEADER COLORS
   ======================================== */

/* Main header background */
.page-header.navbar {
    background-color: #ffffff !important; /* White background */
    border-bottom: 5px solid #95217e !important; /* Bold purple bottom border */
}

/* Logo container */
.page-header .page-logo {
    background-color: inherit !important;
}

/* Top navigation area */
.page-header .top-menu {
    background-color: inherit !important;
}

/* Navigation link colors */
.page-header .navbar-nav > li > a {
    color: #4a4a4a !important; /* Dark gray for better contrast on white */
}

.page-header .navbar-nav > li > a:hover {
    color: #95217e !important; /* Purple on hover */
}

/* Dropdown toggle colors */
.page-header .top-menu .navbar-nav > li.dropdown .dropdown-toggle {
    color: #4a4a4a !important; /* Dark gray for better contrast on white */
}

.page-header .top-menu .navbar-nav > li.dropdown .dropdown-toggle:hover {
    color: #95217e !important; /* Purple on hover */
}

/* Search box styling */
.page-header .search-form {
    background-color: transparent !important; /* Transparent background */
    border: none !important;
}

.page-header .search-form .input-group {
    background-color: #ffffff !important; /* White background */
    border: 2px solid #e8e8ea !important; /* Light gray border */
    border-radius: 25px !important; /* Rounded corners to match the image */
    overflow: hidden !important; /* Hide any overflow */
}

.page-header .search-form .form-control {
    background-color: #ffffff !important; /* White background */
    border: none !important; /* Remove inner border */
    color: #4a4a4a !important;
}

.page-header .search-form .form-control:focus {
    background-color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

.page-header .search-form .input-group:focus-within {
    border-color: #95217e !important; /* Purple border on focus */
}

.page-header .search-form .input-group-btn {
    border: none !important;
    background-color: transparent !important;
}

.page-header .search-form .input-group-btn .btn {
    background-color: #95217e !important; /* Purple button */
    border: none !important;
}

.page-header .search-form .btn.submit {
    background-color: #95217e !important; /* Purple button */
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important; /* No border radius - container handles rounding */
    margin: 0 !important;
    padding: 8px 15px !important;
    height: 100% !important;
}

.page-header .search-form .btn.submit i {
    color: #ffffff !important;
}

.page-header .search-form .btn.submit:hover {
    background-color: #7a1a66 !important; /* Darker purple on hover */
}

.page-header .search-form .btn.submit:focus,
.page-header .search-form .btn.submit:active {
    background-color: #7a1a66 !important;
    box-shadow: none !important;
}

/* ========================================
   LOGIN PAGE COLORS
   ======================================== */

/* Login page background */
body.login {
    background-color: #faf8fb !important; /* Very light purple tint */
}

/* Logo container on login page */
.login .logo {
    text-align: center;
    margin: 60px auto 0;
    padding: 15px;
}

/* Login content box (white form area) */
.login .content {
    background-color: #fff !important;
    border-radius: 10px;
    border: 4px solid #95217e !important; /* Purple frame matching logo */
    box-shadow: 0 4px 20px rgba(149, 33, 126, 0.15) !important; /* Subtle purple shadow */
}

/* Form title "Anmelden" */
.login .content h3 {
    color: #95217e !important; /* Purple to match logo */
    font-weight: 600 !important;
}

/* Login button */
.login .content .btn-success,
.btn-success {
    background-color: #95217e !important; /* Purple to match logo */
    border-color: #95217e !important;
    font-weight: 600 !important;
    padding: 12px 30px !important;
    transition: all 0.3s ease !important;
}

.login .content .btn-success:hover,
.btn-success:hover {
    background-color: #7a1a66 !important; /* Darker purple on hover */
    border-color: #7a1a66 !important;
    box-shadow: 0 4px 12px rgba(149, 33, 126, 0.3) !important;
}

/* Input fields */
.login .content .form-control {
    background-color: #f5f5f7 !important; /* Softer light gray */
    border: 2px solid #e8e8ea !important;
    color: #4a4a4a !important;
    padding: 12px 15px !important;
    transition: all 0.3s ease !important;
}

.login .content .form-control:focus {
    background-color: #ffffff !important;
    border-color: #95217e !important; /* Purple focus border */
    box-shadow: 0 0 0 3px rgba(149, 33, 126, 0.1) !important;
}

/* Passwort vergessen link */
.login .content .forget-password {
    color: #95217e !important; /* Purple to match theme */
}

.login .content .forget-password:hover {
    color: #7a1a66 !important; /* Darker purple on hover */
    text-decoration: underline !important;
}

/* Footer copyright text */
.login .copyright {
    color: #ffffff !important; /* White */
}

/* ========================================
   EXAMPLE CUSTOMIZATIONS
   ======================================== */

/*
 * To customize for a wedding theme, you might want to use colors like:
 *
 * Elegant Gold & White:
 * - Header: #D4AF37 (Gold)
 * - Login background: #F5F5F5 (Light gray)
 * - Buttons: #D4AF37 (Gold)
 *
 * Romantic Rose:
 * - Header: #C85A75 (Rose pink)
 * - Login background: #FFF5F7 (Light pink)
 * - Buttons: #C85A75 (Rose pink)
 *
 * Classic Ivory & Sage:
 * - Header: #8B9D83 (Sage green)
 * - Login background: #FFFFF0 (Ivory)
 * - Buttons: #8B9D83 (Sage green)
 */