/* ==========================================================================
   HOSTESS ADVISOR - Pink/White Professional Theme
   Phase 7: Complete UI Refresh with Pink/White Color Scheme
   ========================================================================== */

:root {
    /* Primary Pink Colors */
    --pink-50: #fdf2f8;
    --pink-100: #fce7f3;
    --pink-200: #fbcfe8;
    --pink-300: #f9a8d4;
    --pink-400: #f472b6;
    --pink-500: #ec4899;
    --pink-600: #db2777;
    --pink-700: #be185d;
    --pink-800: #9d174d;
    --pink-900: #831843;

    /* Brand Colors */
    --brand-primary: #ec4899;
    --brand-secondary: #f9a8d4;
    --brand-accent: #db2777;
    --brand-light: #fdf2f8;
    --brand-dark: #831843;

    /* Neutral (White Based) */
    --white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* Gradients */
    --gradient-pink: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
    --gradient-soft: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
    --gradient-hero: linear-gradient(135deg, #ec4899 0%, #f472b6 50%, #f9a8d4 100%);

    /* Shadows */
    --shadow-pink: 0 10px 30px rgba(236, 72, 153, 0.2);
    --shadow-soft: 0 4px 15px rgba(0, 0, 0, 0.08);
    --shadow-card: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* === GLOBAL OVERRIDES === */
body {
    background-color: var(--gray-50);
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* === NAVBAR === */
.navbar {
    background: var(--white) !important;
    box-shadow: var(--shadow-soft);
    border-bottom: 2px solid var(--pink-100) !important;
}

.navbar .navbar-brand .brand-text {
    color: var(--brand-primary) !important;
    font-weight: 800;
}

.navbar .btn-pink,
.btn-pink {
    background: var(--gradient-pink) !important;
    border: none !important;
    color: white !important;
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-pink);
}

.btn-pink:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(236, 72, 153, 0.35);
}

.text-pink {
    color: var(--brand-primary) !important;
}

/* === CATEGORY STRIP === */
.category-strip {
    background: var(--white) !important;
    border-bottom: 1px solid var(--pink-100) !important;
}

.category-item .category-icon-circle {
    background: var(--gradient-soft);
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.1);
    border: 2px solid var(--pink-200);
}

.category-item:hover .category-icon-circle,
.category-item.active .category-icon-circle {
    background: var(--gradient-pink);
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-pink);
}

.category-item:hover .category-icon-circle i,
.category-item.active .category-icon-circle i {
    color: white !important;
}

.category-item:hover .category-label,
.category-item.active .category-label {
    color: var(--brand-primary) !important;
}

/* === FILTERS SECTION === */
.filters-section {
    background: var(--white) !important;
    border-bottom: 1px solid var(--pink-100) !important;
}

.filter-bar .btn-outline-secondary {
    border-color: var(--gray-300);
    color: var(--gray-600);
    background: var(--white);
    border-radius: 50px !important;
}

.filter-bar .btn-outline-secondary:hover,
.filter-bar .btn-outline-secondary.active {
    background: var(--gradient-pink);
    border-color: var(--brand-primary);
    color: white !important;
    box-shadow: var(--shadow-pink);
}

/* === FEATURED SECTION === */
.featured-section {
    background: var(--gradient-soft) !important;
    border: 1px solid var(--pink-200) !important;
    border-radius: 20px;
    position: relative;
}

.featured-section h4 {
    color: var(--brand-dark) !important;
}

.featured-section h4 i {
    color: var(--brand-primary);
}

/* === ONE-BY-ONE CAROUSEL LAYOUT === */
#featuredCarousel .carousel-item .row {
    justify-content: center;
}

#featuredCarousel .carousel-item .col-md-4 {
    max-width: 100%;
    flex: 0 0 100%;
}

#featuredCarousel .hostess-card {
    max-width: 500px;
    margin: 0 auto;
}

#featuredCarousel .carousel-control-prev,
#featuredCarousel .carousel-control-next {
    background: var(--gradient-pink);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
    box-shadow: var(--shadow-pink);
}

#featuredCarousel .carousel-control-prev {
    left: 20px;
}

#featuredCarousel .carousel-control-next {
    right: 20px;
}

#featuredCarousel .carousel-indicators [data-bs-target] {
    background: var(--brand-primary);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: var(--shadow-soft);
}

/* === HOSTESS CARDS === */
.hostess-card {
    background: var(--white);
    border: 1px solid var(--pink-100) !important;
    border-radius: 16px !important;
    overflow: hidden;
    transition: all 0.3s ease;
}

.hostess-card:hover {
    border-color: var(--brand-primary) !important;
    box-shadow: var(--shadow-pink) !important;
    transform: translateY(-5px);
}

.hostess-card .vip-badge {
    background: var(--gradient-pink) !important;
    color: white !important;
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.4);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(236, 72, 153, 0);
    }
}

.hostess-card .hostess-name {
    color: var(--brand-dark);
}

.hostess-card .price {
    color: var(--brand-primary);
    font-weight: 700;
}

/* === SINGLE COLUMN ADS === */
.advertisements-sidebar {
    background: var(--white);
    border-radius: 20px;
    padding: 1.5rem;
    border: 1px solid var(--pink-100);
}

.advertisement-card {
    border: 1px solid var(--pink-100) !important;
    border-radius: 16px !important;
    overflow: hidden;
    transition: all 0.3s ease;
}

.advertisement-card:hover {
    border-color: var(--brand-primary) !important;
    box-shadow: var(--shadow-pink) !important;
}

.sidebar-title {
    color: var(--brand-primary) !important;
    font-weight: 800 !important;
    letter-spacing: 1px;
}

/* === BUTTONS === */
.btn-primary {
    background: var(--gradient-pink) !important;
    border-color: var(--brand-primary) !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #db2777 0%, #be185d 100%) !important;
}

.btn-outline-primary {
    border-color: var(--brand-primary) !important;
    color: var(--brand-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary.active {
    background: var(--gradient-pink) !important;
    border-color: var(--brand-primary) !important;
    color: white !important;
}

/* === CONTACT BUTTONS === */
.btn-whatsapp {
    background: #25D366 !important;
    border: none !important;
}

.btn-call {
    background: var(--gradient-pink) !important;
    border: none !important;
}

/* === FOOTER === */
.footer {
    background: var(--gradient-soft) !important;
    border-top: 2px solid var(--pink-200);
}

.footer h5 {
    color: var(--brand-dark);
}

.footer a {
    color: var(--gray-600);
    transition: color 0.2s ease;
}

.footer a:hover {
    color: var(--brand-primary);
}

/* === MODALS === */
.modal-content {
    border: none;
    border-radius: 24px;
    overflow: hidden;
}

.modal-header {
    background: var(--gradient-soft);
    border-bottom: 1px solid var(--pink-200);
}

.modal-title {
    color: var(--brand-dark);
    font-weight: 700;
}

/* === AUTH PAGES === */
.auth-wrapper {
    background: var(--gradient-soft) !important;
}

.auth-card {
    border: 1px solid var(--pink-200);
}

.nav-pills.auth-tabs .nav-link.active {
    background: var(--gradient-pink) !important;
    box-shadow: var(--shadow-pink);
}

.btn-auth-submit {
    background: var(--gradient-pink) !important;
}

.btn-auth-submit:hover {
    box-shadow: 0 15px 35px rgba(236, 72, 153, 0.4) !important;
}

.auth-link {
    color: var(--brand-primary) !important;
}

.auth-link:hover {
    color: var(--brand-dark) !important;
}

/* === STATISTICS WIDGET === */
.statistics-widget {
    background: var(--gradient-pink) !important;
    border-radius: 16px;
}

/* === SCROLLBAR === */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--pink-50);
}

::-webkit-scrollbar-thumb {
    background: var(--pink-300);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand-primary);
}

/* === SELECTION === */
::selection {
    background: var(--pink-200);
    color: var(--brand-dark);
}

/* === GOOGLE LOGIN BUTTON === */
.btn-social {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-google {
    background: white !important;
    border: 2px solid var(--gray-200) !important;
    color: var(--gray-700) !important;
}

.btn-google:hover {
    background: var(--gray-50) !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-primary) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.btn-google i {
    color: #4285F4;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .featured-section {
        padding: 1rem;
    }

    #featuredCarousel .hostess-card {
        max-width: 100%;
    }

    #featuredCarousel .carousel-control-prev,
    #featuredCarousel .carousel-control-next {
        width: 40px;
        height: 40px;
    }
}