/* =========================================
   custom-style.css for Al Abbasi Apps
   Palette:
     Gold (#C8A052), White (#FFFFFF), Black (#000000)
   This snippet overrides Bootstrap-like classes:
     .btn-secondary, .bg-primary, .bg-success, .bg-warning,
     .text-primary, .text-secondary, etc.
========================================= */

/* 1) Define your custom Bootstrap color variables */
:root {
    /* Al Abbasi Apps Color Palette */
    --bs-primary: #C8A052; /* Gold */
    --bs-primary-rgb: 200, 160, 82;
    --bs-secondary: #000000; /* Black */
    --bs-secondary-rgb: 0, 0, 0;
    --bs-success: #6BA45E; /* Muted Green */
    --bs-success-rgb: 107, 164, 94;
    --bs-warning: #E2B84D; /* Warm Gold-Orange */
    --bs-warning-rgb: 226, 184, 77;
    --bs-danger: #C94F4F; /* Soft Red */
    --bs-danger-rgb: 201, 79, 79;
    /* Bootstrap "white" is typically #fff, no need to redefine unless you want to. */
    --bs-white: #ffffff; /* White */
    /* etc. */
}

/* 2) Override .btn-secondary */
.btn-secondary {
    /* Text color & background use black/gold logic */
    --bs-btn-color: #ffffff; /* White text on black background */
    --bs-btn-bg: #000000; /* Black bg */
    --bs-btn-border-color: #000000;
    /* Hover State */
    --bs-btn-hover-color: #C8A052; /* Gold text on hover */
    --bs-btn-hover-bg: #222222; /* Darker black on hover */
    --bs-btn-hover-border-color: #222222;
    /* Focus State */
    --bs-btn-focus-shadow-rgb: 0, 0, 0; /* Shadow color if needed */
    /* Active State */
    --bs-btn-active-color: #C8A052;
    --bs-btn-active-bg: #333333;
    --bs-btn-active-border-color: #333333;
    --bs-btn-active-shadow: unset;
    /* Disabled State */
    --bs-btn-disabled-color: #C8A052;
    --bs-btn-disabled-bg: #000000;
    --bs-btn-disabled-border-color: #000000;
}

/* 3) .bg-primary => Gold */
.bg-primary {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

/* 4) .bg-success => also Gold (or pick another color) */
.bg-success {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}

/* 5) .bg-warning => also Gold (or pick another color) */
.bg-warning {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;
}

/* 6) .text-primary => Gold */
.text-primary {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

/* 7) Nav tab active => Gold background & white text */
.tab-style-7 .nav-tabs .nav-item .nav-link.active {
    background: var(--bs-primary) !important;
    color: var(--bs-white) !important;
}

/* 8) .border-primary => Gold border */
.border-primary {
    --bs-border-opacity: 1;
    border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important;
}

/* 9) .text-secondary => Black (as chosen for secondary) */
.text-secondary {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important;
}

/* 10) .border-secondary => Black border */
.border-secondary {
    --bs-border-opacity: 1;
    border-color: rgba(var(--bs-secondary-rgb), var(--bs-border-opacity)) !important;
}

/* Adjust the .navbar-brand container to align items vertically */
.navbar .navbar-brand {
    display: flex;
    align-items: center; /* Center the logo vertically */
    padding: 0.5rem 0; /* Optional: tweak top/bottom space */
}

    /* Common styling for the .logo-dark and .logo-light images */
    .navbar .navbar-brand img {
        max-height: 60px; /* Constrain logo height */
        width: auto; /* Maintain aspect ratio for a square logo */
        object-fit: contain; /* Ensure it’s fully visible if container changes */
        /* Optional: add transitions for a smoother hover effect */
        transition: transform 0.2s ease-in-out;
    }

        /* Hover effect: subtly enlarge the logo */
        .navbar .navbar-brand img:hover {
            transform: scale(1.05);
        }

    /* If you want the brand’s text (if any) to appear next to the logo, you can add margin */
    .navbar .navbar-brand span.brand-text {
        margin-left: 0.5rem;
        color: #C8A052; /* Example: match your gold color palette */
        font-weight: bold;
    }

.logo-container {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px; /* Optional for rounded corners */
    overflow: hidden;
}

.logo-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}