/* 
============================================
   INSTAWHATS FLAT UI DESIGN
   Version: 3.0 (Flat UI Edition)
   
   Clean, minimal, flat design with smooth interactions
============================================
*/

/* ==========================================
   1. FLAT COLOR PALETTE
   ========================================== */
:root {
    /* Primary - Flat Teal */
    --insta-primary: #16a085;        /* Flat Teal */
    --insta-primary-dark: #138d75;   
    --insta-primary-light: #48c9b0;  
    --insta-primary-bg: #d5f4e6;     /* Light background */
    
    /* Secondary - Flat Coral */
    --insta-secondary: #e74c3c;      /* Flat Red/Coral */
    --insta-secondary-light: #ec7063;
    
    /* Neutrals - Flat */
    --insta-dark: #2c3e50;           /* Flat Dark Blue */
    --insta-gray: #7f8c8d;           /* Flat Gray */
    --insta-light: #ecf0f1;          /* Flat Light */
    --insta-white: #ffffff;
    
    /* Flat Colors (No Gradients) */
    --insta-success: #27ae60;
    --insta-warning: #f39c12;
    --insta-danger: #e74c3c;
    
    /* Minimal Shadows - Flat UI Style */
    --flat-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    --flat-shadow-hover: 0 3px 8px rgba(0, 0, 0, 0.12);
    
    /* Border Radius - Flat UI */
    --flat-radius: 6px;
    --flat-radius-lg: 8px;
}

/* ==========================================
   2. TYPOGRAPHY - FLAT
   ========================================== */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

body {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: var(--insta-gray);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Nunito', sans-serif;
    color: var(--insta-dark);
    font-weight: 700;
}

/* ==========================================
   3. FRONTEND THEME OVERRIDE - FLAT
   ========================================== */
:root {
    --tp-theme-1: #16a085 !important;
    --tp-theme-2: #48c9b0 !important;
    --tp-theme-3: #138d75 !important;
    --tp-heading-primary: #2c3e50 !important;
    --tp-text-body: #7f8c8d !important;
    --tp-common-sky: #16a085 !important;
    --tp-common-pink: #e74c3c !important;
    --tp-border-1: #bdc3c7 !important;
}

/* ==========================================
   4. BUTTONS - FLAT STYLE
   ========================================== */
.btn-primary,
.tp-btn,
.tp-btn-blue,
.tp-btn-blue-square,
.tp-btn-sky {
    background: var(--insta-primary) !important; /* Flat color, no gradient */
    border: none !important;
    box-shadow: none !important; /* No shadow in flat design */
    border-radius: var(--flat-radius) !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    transition: background-color 0.2s ease !important; /* Simple transition */
    color: white !important;
}

.btn-primary:hover,
.tp-btn:hover,
.tp-btn-blue:hover {
    background: var(--insta-primary-dark) !important; /* Simple color change */
    transform: none !important; /* No lift or movement */
    box-shadow: none !important;
}

.btn-secondary,
.tp-btn-pink {
    background: var(--insta-secondary) !important;
}

.btn-secondary:hover {
    background: #c0392b !important;
}

/* ==========================================
   5. CARDS - FLAT UI
   ========================================== */
.card,
.tp-price-item,
.tp-feature-item,
.tp-service-item,
.tp-blog-item {
    background: var(--insta-white) !important;
    border: 2px solid var(--insta-light) !important; /* Flat border */
    border-radius: var(--flat-radius-lg) !important;
    box-shadow: none !important; /* No shadow */
    transition: border-color 0.2s ease !important;
    overflow: visible !important;
}

/* Flat Hover - Only Border Color Change */
.card:hover,
.tp-price-item:hover,
.tp-feature-item:hover,
.tp-service-item:hover,
.tp-blog-item:hover {
    border-color: var(--insta-primary) !important;
    transform: none !important; /* No movement */
    box-shadow: none !important; /* No shadow */
}

/* Active Pricing Card - Flat */
.tp-price-item.active {
    background: var(--insta-primary) !important;
    border-color: var(--insta-primary) !important;
}

.tp-price-item.active * {
    color: white !important;
}

/* ==========================================
   6. NAVIGATION - FLAT
   ========================================== */
.navbar-top,
.tp-header-transparent {
    background: var(--insta-white) !important;
    border-bottom: 2px solid var(--insta-light) !important;
    box-shadow: none !important;
}

.sidenav {
    background: var(--insta-white) !important;
    border-right: 2px solid var(--insta-light) !important;
    box-shadow: none !important;
}

.sidenav .nav-link.active {
    background: var(--insta-primary-bg) !important;
    color: var(--insta-primary) !important;
    border-left: 4px solid var(--insta-primary) !important;
}

.sidenav .nav-link:hover {
    background: var(--insta-light) !important;
    color: var(--insta-primary) !important;
    transform: none !important;
}

/* ==========================================
   7. FORMS - FLAT
   ========================================== */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
    background: var(--insta-white) !important;
    border: 2px solid #bdc3c7 !important;
    border-radius: var(--flat-radius) !important;
    padding: 0.75rem 1rem !important;
    transition: border-color 0.2s ease !important;
}

.form-control:focus,
input:focus,
textarea:focus {
    background: var(--insta-white) !important;
    border-color: var(--insta-primary) !important;
    box-shadow: none !important; /* No glow */
    outline: none !important;
}

/* ==========================================
   8. BADGES - FLAT
   ========================================== */
.badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.4rem 0.8rem !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    border-radius: 4px !important; /* Slightly rounded, not pill */
    border: none !important;
}

.badge-primary {
    background: var(--insta-primary) !important;
    color: white !important;
}

.badge-success {
    background: var(--insta-success) !important;
    color: white !important;
}

.badge-warning {
    background: var(--insta-warning) !important;
    color: white !important;
}

.badge-danger {
    background: var(--insta-danger) !important;
    color: white !important;
}

.badge-secondary {
    background: var(--insta-gray) !important;
    color: white !important;
}

/* ==========================================
   9. DROPDOWN - FLAT
   ========================================== */
.dropdown-menu {
    background: white !important;
    border: 2px solid var(--insta-light) !important;
    border-radius: var(--flat-radius) !important;
    box-shadow: var(--flat-shadow) !important;
    z-index: 1050 !important;
}

.dropdown-item {
    transition: background-color 0.15s ease !important;
}

.dropdown-item:hover {
    background: var(--insta-light) !important;
    color: var(--insta-primary) !important;
    transform: none !important;
}

/* ==========================================
   10. FOOTER - FLAT
   ========================================== */
.tp-footer-area {
    background: var(--insta-dark) !important;
    border-top: 4px solid var(--insta-primary) !important;
}

/* ==========================================
   11. REMOVE ALL 3D/FANCY EFFECTS
   ========================================== */
* {
    perspective: none !important;
    transform-style: flat !important;
}

/* NO transforms on hover */
[class*="item"]:hover,
[class*="card"]:hover,
img:hover {
    transform: none !important;
}

/* ==========================================
   12. STATISTICS CARDS - FLAT GRADIENTS
   ========================================== */

/* Icon backgrounds with Flat colors */
.bg-gradient-primary {
    background: var(--insta-primary) !important; /* Flat Teal */
}

.bg-gradient-red {
    background: var(--insta-secondary) !important; /* Flat Red */
}

.bg-gradient-orange {
    background: var(--insta-warning) !important; /* Flat Orange */
}

.bg-gradient-green,
.bg-gradient-success {
    background: var(--insta-success) !important; /* Flat Green */
}

.bg-gradient-info {
    background: #3498db !important; /* Flat Blue */
}

/* Statistics Card Styling */
.card-stats {
    border: 2px solid var(--insta-light) !important;
    border-radius: var(--flat-radius-lg) !important;
    transition: border-color 0.2s ease !important;
}

.card-stats:hover {
    border-color: var(--insta-primary) !important;
}

.card-stats .icon-shape {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    box-shadow: none !important; /* Flat - no shadow */
}

.card-stats .card-title {
    color: var(--insta-gray) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}

.card-stats .h2 {
    color: var(--insta-dark) !important;
    font-weight: 800 !important;
}

/* ==========================================
   13. NAV PILLS - MODERN FLAT DESIGN
   ========================================== */

.nav-pills .nav-link {
    background: transparent !important;
    border: 2px solid var(--insta-light) !important;
    color: var(--insta-gray) !important;
    font-weight: 600 !important;
    border-radius: var(--flat-radius) !important;
    padding: 0.75rem 1.25rem !important;
    transition: all 0.2s ease !important;
}

.nav-pills .nav-link:hover {
    background: var(--insta-light) !important;
    border-color: var(--insta-primary) !important;
    color: var(--insta-primary) !important;
}

.nav-pills .nav-link.active {
    background: var(--insta-primary) !important;
    border-color: var(--insta-primary) !important;
    color: white !important;
    box-shadow: none !important;
}

/* ==========================================
   14. SIDEBAR - MODERN FLAT DESIGN
   ========================================== */

/* Sidebar Container */
.sidenav {
    background: var(--insta-white) !important;
    border-right: 2px solid var(--insta-light) !important;
    box-shadow: none !important;
}

/* Sidebar Headings */
.sidenav .navbar-heading {
    color: var(--insta-gray) !important;
    font-weight: 800 !important;
    font-size: 0.65rem !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 1rem 1.5rem 0.5rem !important;
    margin: 0 !important;
}

/* Sidebar Links - Default State */
.sidenav .nav-link {
    color: var(--insta-gray) !important;
    font-weight: 600 !important;
    padding: 0.75rem 1.5rem !important;
    margin: 0.15rem 0.75rem !important;
    border-radius: var(--flat-radius) !important;
    border-left: 3px solid transparent !important;
    transition: all 0.15s ease !important;
    background: transparent !important;
}

/* Sidebar Links - Hover State */
.sidenav .nav-link:hover {
    background: var(--insta-light) !important;
    color: var(--insta-primary) !important;
    border-left-color: var(--insta-primary-light) !important;
    transform: none !important;
}

/* Sidebar Links - Active State */
.sidenav .nav-link.active {
    background: var(--insta-primary-bg) !important;
    color: var(--insta-primary) !important;
    border-left-color: var(--insta-primary) !important;
    font-weight: 700 !important;
}

/* Sidebar Icons */
.sidenav .nav-link i {
    color: inherit !important;
    font-size: 1rem !important;
    margin-right: 0.75rem !important;
}

/* Sidebar Brand/Logo */
.sidenav .navbar-brand-img {
    max-height: 40px !important;
    transition: opacity 0.2s ease !important;
}

.sidenav .navbar-brand:hover .navbar-brand-img {
    opacity: 0.8 !important;
}

/* Remove transform effects */
.sidenav .nav-link:hover,
.sidenav .nav-link.active {
    transform: none !important;
}

/* Nested menu items (if any) */
.sidenav .nav .nav-sm .nav-link {
    padding-left: 3rem !important;
    font-size: 0.85rem !important;
}

.dropdown-menu-dark .h1, .dropdown-menu-dark .h2, .dropdown-menu-dark .h3, .dropdown-menu-dark .h4, .dropdown-menu-dark .h5, .dropdown-menu-dark .h6, .dropdown-menu-dark a {
    color: var(--insta-primary) !important;
}

.tp-cta__thumb-2 {
    width: 100px;
    height: 100px;
}

.tp-header__top-left a span {
    color: var(--insta-white) !important;
}

/* ==========================================
   15. UTILITIES
   ========================================== */
.text-primary { color: var(--insta-primary) !important; }
.bg-primary { background: var(--insta-primary) !important; }
.bg-light { background: var(--insta-light) !important; }