/**
 * KEITATA Custom Theme - Orange Primary Color (#FF5D1B)
 * Overrides Metronic 8 default blue theme
 */

:root {
    /* Primary Colors */
    --kt-primary: #FF5D1B;
    --kt-primary-active: #E54E0F;
    --kt-primary-light: #FFF5F1;
    --kt-primary-inverse: #FFFFFF;
    --kt-primary-clarity: rgba(255, 93, 27, 0.1);

    /* RGB Values */
    --kt-primary-rgb: 255, 93, 27;

    /* Gradients */
    --kt-gradient-primary: linear-gradient(135deg, #FF5D1B 0%, #E54E0F 100%);
    --kt-gradient-primary-hover: linear-gradient(135deg, #E54E0F 0%, #D4440A 100%);

    /* Shadows */
    --kt-shadow-primary: 0 4px 20px rgba(255, 93, 27, 0.3);
    --kt-shadow-primary-hover: 0 8px 30px rgba(255, 93, 27, 0.4);
}

/* ============================================
   BUTTONS - Primary Color
   ============================================ */

/* Primary Button */
.btn-primary,
.btn.btn-primary {
    background-color: #FF5D1B !important;
    border-color: #FF5D1B !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 10px rgba(255, 93, 27, 0.2);
    transition: all 0.3s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active {
    background-color: #E54E0F !important;
    border-color: #E54E0F !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 20px rgba(255, 93, 27, 0.4);
    transform: translateY(-2px);
}

/* Outline Primary Button */
.btn-outline-primary,
.btn.btn-outline-primary {
    color: #FF5D1B !important;
    border-color: #FF5D1B !important;
    background-color: transparent !important;
    transition: all 0.3s ease;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:focus,
.btn.btn-outline-primary:active {
    background-color: #FF5D1B !important;
    border-color: #FF5D1B !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 20px rgba(255, 93, 27, 0.3);
    transform: translateY(-2px);
}

/* Light Primary Button */
.btn-light-primary,
.btn.btn-light-primary {
    background-color: #FFF5F1 !important;
    border-color: #FFF5F1 !important;
    color: #FF5D1B !important;
    transition: all 0.3s ease;
}

.btn-light-primary:hover,
.btn-light-primary:focus,
.btn-light-primary:active,
.btn.btn-light-primary:hover,
.btn.btn-light-primary:focus,
.btn.btn-light-primary:active {
    background-color: #FFE8DF !important;
    border-color: #FFE8DF !important;
    color: #E54E0F !important;
    transform: translateY(-1px);
}

/* Active Primary Button */
.btn-active-primary:hover,
.btn-active-primary:focus,
.btn-active-primary:active,
.btn.btn-active-primary:hover,
.btn.btn-active-primary:focus,
.btn.btn-active-primary:active {
    background-color: #FF5D1B !important;
    border-color: #FF5D1B !important;
    color: #FFFFFF !important;
}

/* Button Icon Colors */
.btn-primary .ki-duotone,
.btn-primary .ki-outline,
.btn-primary .ki-solid,
.btn-primary i {
    color: #FFFFFF !important;
}

/* ============================================
   TEXT COLORS
   ============================================ */

.text-primary,
a.text-primary {
    color: #FF5D1B !important;
}

.text-primary:hover,
a.text-primary:hover {
    color: #E54E0F !important;
}

.text-hover-primary:hover {
    color: #FF5D1B !important;
}

/* ============================================
   BACKGROUNDS
   ============================================ */

.bg-primary {
    background-color: #FF5D1B !important;
}

.bg-light-primary {
    background-color: #FFF5F1 !important;
}

.bg-hover-primary:hover {
    background-color: #FF5D1B !important;
}

.bg-hover-light-primary:hover {
    background-color: #FFF5F1 !important;
}

/* ============================================
   BORDERS
   ============================================ */

.border-primary {
    border-color: #FF5D1B !important;
}

.border-hover-primary:hover {
    border-color: #FF5D1B !important;
}

/* ============================================
   BADGES
   ============================================ */

.badge-primary,
.badge.badge-primary {
    background-color: #FF5D1B !important;
    color: #FFFFFF !important;
}

.badge-light-primary,
.badge.badge-light-primary {
    background-color: #FFF5F1 !important;
    color: #FF5D1B !important;
}

/* ============================================
   LINKS
   ============================================ */

a {
    transition: all 0.3s ease;
}

a.text-primary:hover,
a.text-hover-primary:hover {
    color: #E54E0F !important;
    text-decoration: none;
}

/* ============================================
   FORMS
   ============================================ */

/* Form Check Input */
.form-check-input:checked {
    background-color: #FF5D1B !important;
    border-color: #FF5D1B !important;
}

.form-check-input:focus {
    border-color: #FF5D1B !important;
    box-shadow: 0 0 0 0.25rem rgba(255, 93, 27, 0.25) !important;
}

/* Form Control Focus */
.form-control:focus,
.form-select:focus {
    border-color: #FF5D1B !important;
    box-shadow: 0 0 0 0.25rem rgba(255, 93, 27, 0.15) !important;
}

/* Form Range */
.form-range::-webkit-slider-thumb {
    background-color: #FF5D1B !important;
}

.form-range::-moz-range-thumb {
    background-color: #FF5D1B !important;
}

/* ============================================
   NAVIGATION
   ============================================ */

/* Nav Links */
.nav-link.active {
    color: #FF5D1B !important;
}

.nav-link:hover {
    color: #FF5D1B !important;
}

/* Menu Items */
.menu-link.active {
    background-color: #FFF5F1 !important;
    color: #FF5D1B !important;
}

.menu-link:hover {
    background-color: #FFF5F1 !important;
    color: #FF5D1B !important;
    transition: all 0.3s ease;
}

/* ============================================
   PAGINATION
   ============================================ */

.page-link {
    color: #FF5D1B !important;
    transition: all 0.3s ease;
}

.page-link:hover {
    background-color: #FFF5F1 !important;
    border-color: #FF5D1B !important;
    color: #E54E0F !important;
}

.page-link.active,
.active > .page-link,
.page-item.active .page-link {
    background-color: #FF5D1B !important;
    border-color: #FF5D1B !important;
    color: #FFFFFF !important;
}

/* ============================================
   CARDS
   ============================================ */

.card-primary {
    border-color: #FF5D1B !important;
}

.card-primary .card-header {
    background-color: #FF5D1B !important;
    color: #FFFFFF !important;
}

/* Card Hover Effects */
.card-hover:hover {
    box-shadow: 0 8px 30px rgba(255, 93, 27, 0.2);
    transform: translateY(-5px);
    transition: all 0.3s ease;
}

/* ============================================
   ALERTS
   ============================================ */

.alert-primary {
    background-color: #FFF5F1 !important;
    border-color: #FF5D1B !important;
    color: #E54E0F !important;
}

/* ============================================
   PROGRESS BARS
   ============================================ */

.progress-bar {
    background-color: #FF5D1B !important;
}

.progress-bar-primary {
    background-color: #FF5D1B !important;
}

/* ============================================
   TABS
   ============================================ */

.nav-tabs .nav-link.active {
    color: #FF5D1B !important;
    border-bottom-color: #FF5D1B !important;
}

.nav-pills .nav-link.active {
    background-color: #FF5D1B !important;
    color: #FFFFFF !important;
}

/* ============================================
   DROPDOWNS
   ============================================ */

.dropdown-item.active,
.dropdown-item:active {
    background-color: #FF5D1B !important;
    color: #FFFFFF !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #FFF5F1 !important;
    color: #FF5D1B !important;
}

/* ============================================
   TOOLTIPS & POPOVERS
   ============================================ */

.tooltip-primary .tooltip-inner {
    background-color: #FF5D1B !important;
}

.popover-primary .popover-header {
    background-color: #FF5D1B !important;
    color: #FFFFFF !important;
}

/* ============================================
   SYMBOLS & ICONS
   ============================================ */

.symbol-primary {
    background-color: #FFF5F1 !important;
    color: #FF5D1B !important;
}

.symbol-label.bg-primary {
    background-color: #FF5D1B !important;
}

.symbol-label.bg-light-primary {
    background-color: #FFF5F1 !important;
    color: #FF5D1B !important;
}

/* Icon Colors */
.text-primary i,
.text-primary .ki-duotone,
.text-primary .ki-outline,
.text-primary .ki-solid {
    color: #FF5D1B !important;
}

/* ============================================
   TABLES
   ============================================ */

.table-primary {
    background-color: #FFF5F1 !important;
}

.table-hover tbody tr:hover {
    background-color: #FFF5F1 !important;
}

/* ============================================
   SPINNERS & LOADERS
   ============================================ */

.spinner-border-primary {
    color: #FF5D1B !important;
}

.spinner-grow-primary {
    background-color: #FF5D1B !important;
}

/* ============================================
   CUSTOM COMPONENTS
   ============================================ */

/* Gradient Backgrounds */
.bg-gradient-primary {
    background: linear-gradient(135deg, #FF5D1B 0%, #E54E0F 100%) !important;
}

/* Hover Effects for Cards */
.card-hover-primary:hover {
    border-color: #FF5D1B !important;
    box-shadow: 0 8px 30px rgba(255, 93, 27, 0.25) !important;
    transform: translateY(-5px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animated Buttons */
.btn-animated {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.btn-animated::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-animated:hover::before {
    width: 300px;
    height: 300px;
}

/* ============================================
   METRONIC SPECIFIC OVERRIDES
   ============================================ */

/* Header */
.app-header {
    transition: all 0.3s ease;
}

/* Sidebar */
.app-sidebar .menu-link.active {
    background-color: #FFF5F1 !important;
    color: #FF5D1B !important;
}

/* Scrollbar */
::-webkit-scrollbar-thumb {
    background-color: #FF5D1B !important;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #E54E0F !important;
}

/* ============================================
   FRONTEND SPECIFIC STYLES
   ============================================ */

/* Hero Sections */
.hero-section .btn-primary {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 0.5rem;
    box-shadow: 0 10px 30px rgba(255, 93, 27, 0.3);
}

.hero-section .btn-primary:hover {
    box-shadow: 0 15px 40px rgba(255, 93, 27, 0.4);
    transform: translateY(-3px);
}

/* Service Cards */
.service-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover {
    box-shadow: 0 20px 50px rgba(255, 93, 27, 0.2);
    transform: translateY(-10px);
}

.service-card:hover .service-icon {
    color: #FF5D1B !important;
    transform: scale(1.1);
    transition: all 0.3s ease;
}

/* CTA Sections */
.cta-section {
    background: linear-gradient(135deg, #FF5D1B 0%, #E54E0F 100%);
}

/* Feature Icons */
.feature-icon {
    color: #FF5D1B !important;
    transition: all 0.3s ease;
}

.feature-icon:hover {
    color: #E54E0F !important;
    transform: scale(1.2) rotate(5deg);
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes pulse-primary {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 93, 27, 0.7);
    }
    50% {
        box-shadow: 0 0 0 20px rgba(255, 93, 27, 0);
    }
}

.pulse-primary {
    animation: pulse-primary 2s infinite;
}

/* Glow Effect */
.glow-primary {
    box-shadow: 0 0 20px rgba(255, 93, 27, 0.6);
}

.glow-primary:hover {
    box-shadow: 0 0 30px rgba(255, 93, 27, 0.8);
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 991.98px) {
    .btn-primary,
    .btn-outline-primary {
        padding: 0.75rem 1.5rem;
    }

    .hero-section .btn-primary {
        padding: 0.875rem 2rem;
        font-size: 1rem;
    }
}

@media (max-width: 575.98px) {
    .btn-primary,
    .btn-outline-primary {
        padding: 0.65rem 1.25rem;
        font-size: 0.9rem;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.shadow-primary {
    box-shadow: 0 4px 20px rgba(255, 93, 27, 0.3) !important;
}

.shadow-primary-hover:hover {
    box-shadow: 0 8px 30px rgba(255, 93, 27, 0.4) !important;
}

.opacity-hover {
    transition: opacity 0.3s ease;
}

.opacity-hover:hover {
    opacity: 0.8;
}

/* ============================================
   HOVER COLOR CLASSES
   ============================================ */

/* Primary Hover */
.hover-primary {
    transition: all 0.3s ease;
}

.hover-primary:hover {
    color: #FF5D1B !important;
    transform: translateY(-2px);
}

.hover-primary:hover i,
.hover-primary:hover .ki-duotone {
    color: #FF5D1B !important;
}

/* Info Hover */
.hover-info {
    transition: all 0.3s ease;
}

.hover-info:hover {
    color: #0dcaf0 !important;
    transform: translateY(-2px);
}

.hover-info:hover i,
.hover-info:hover .ki-duotone {
    color: #0dcaf0 !important;
}

/* Success Hover */
.hover-success {
    transition: all 0.3s ease;
}

.hover-success:hover {
    color: #50cd89 !important;
    transform: translateY(-2px);
}

.hover-success:hover i,
.hover-success:hover .ki-duotone {
    color: #50cd89 !important;
}

/* Warning Hover */
.hover-warning {
    transition: all 0.3s ease;
}

.hover-warning:hover {
    color: #ffc700 !important;
    transform: translateY(-2px);
}

.hover-warning:hover i,
.hover-warning:hover .ki-duotone {
    color: #ffc700 !important;
}

/* Danger Hover */
.hover-danger {
    transition: all 0.3s ease;
}

.hover-danger:hover {
    color: #f1416c !important;
    transform: translateY(-2px);
}

.hover-danger:hover i,
.hover-danger:hover .ki-duotone {
    color: #f1416c !important;
}

/* ============================================
   APP ENGAGE BUTTONS (Floating Action Buttons)
   ============================================ */

.app-engage-btn {
    transition: all 0.3s ease !important;
}

.app-engage-btn:hover {
    transform: translateX(-5px) scale(1.05) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

.app-engage-btn.hover-primary:hover {
    background-color: #FFF5F1 !important;
    color: #FF5D1B !important;
    border-left-color: #FF5D1B !important;
}

.app-engage-btn.hover-info:hover {
    background-color: #f1faff !important;
    color: #0dcaf0 !important;
    border-left-color: #0dcaf0 !important;
}

.app-engage-btn.hover-success:hover {
    background-color: #e8fff3 !important;
    color: #50cd89 !important;
    border-left-color: #50cd89 !important;
}

/* ============================================
   CARD & ELEMENT HOVER EFFECTS
   ============================================ */

/* Elevate on Hover */
.hover-elevate-up {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-elevate-up:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}

/* Card with Primary Accent on Hover */
.card.hover-elevate-up:hover {
    border-color: #FF5D1B !important;
    box-shadow: 0 10px 30px rgba(255, 93, 27, 0.2) !important;
}

/* Scale on Hover */
.hover-scale {
    transition: all 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* Glow on Hover */
.hover-glow-primary:hover {
    box-shadow: 0 0 25px rgba(255, 93, 27, 0.5) !important;
}

/* ============================================
   LINK STYLES
   ============================================ */

/* Menu Links with Orange Hover */
.menu .menu-link {
    transition: all 0.3s ease;
}

.menu .menu-link:hover:not(.active) {
    background-color: rgba(255, 93, 27, 0.08) !important;
    color: #FF5D1B !important;
}

.menu .menu-link.active {
    background-color: #FFF5F1 !important;
    color: #FF5D1B !important;
}

/* Footer Links */
.footer a:hover {
    color: #FF5D1B !important;
}

/* Header Links */
.header-menu .menu-link:hover {
    color: #FF5D1B !important;
}

/* ============================================
   SELECT2 CUSTOMIZATION
   ============================================ */

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #FF5D1B !important;
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--multiple:focus {
    border-color: #FF5D1B !important;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(255, 93, 27, 0.15) !important;
}

.select2-container--default .select2-results__option--selected {
    background-color: #FFF5F1 !important;
    color: #FF5D1B !important;
}

/* ============================================
   SCROLLBAR STYLES
   ============================================ */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #f5f5f5;
}

::-webkit-scrollbar-thumb {
    background-color: #FF5D1B !important;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #E54E0F !important;
}

/* Firefox Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #FF5D1B #f5f5f5;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .btn-primary {
        background-color: #FF5D1B !important;
        color: #FFFFFF !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}