/* Psychology-Based Theme for Delivery App */
/* This file overrides all default styles with maximum specificity */

/* Color Variables */
:root {
    --appetite-red: #FF4D4D;
    --energy-orange: #FF6B00;
    --trust-green: #2ECC71;
    --reliable-blue: #0099FF;
    --clean-bg: #FAFAFA;
    --text-dark: #333333;
}

/* HERO SECTION - Force red-orange gradient */
.hero-section,
div.hero-section {
    background: linear-gradient(135deg, #FF4D4D 0%, #FF6B00 100%) !important;
    background-color: #FF4D4D !important;
    padding: 80px 0 !important;
    border-radius: 0 0 30px 30px !important;
    box-shadow: 0 12px 40px rgba(255, 77, 77, 0.25) !important;
}

/* SEARCH BUTTON - Force orange color */
button.btn.btn-primary.search-button,
.search-button.btn.btn-primary,
.search-button.btn,
.search-button,
button.search-button {
    background: #FF6B00 !important;
    background-color: #FF6B00 !important;
    border: none !important;
    border-color: #FF6B00 !important;
    color: white !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    padding: 0 1.8rem !important;
    box-shadow: 0 4px 15px rgba(255, 107, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

button.btn.btn-primary.search-button:hover,
.search-button.btn.btn-primary:hover,
.search-button.btn:hover,
.search-button:hover,
button.search-button:hover {
    background: #FF8533 !important;
    background-color: #FF8533 !important;
    border-color: #FF8533 !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 8px 25px rgba(255, 107, 0, 0.4) !important;
}

/* ALL PRIMARY BUTTONS - Force orange */
.btn-primary,
button.btn-primary,
.btn.btn-primary {
    background: #FF6B00 !important;
    background-color: #FF6B00 !important;
    border: none !important;
    border-color: #FF6B00 !important;
    color: white !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(255, 107, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover,
button.btn-primary:hover,
.btn.btn-primary:hover {
    background: #FF8533 !important;
    background-color: #FF8533 !important;
    border-color: #FF8533 !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 6px 20px rgba(255, 107, 0, 0.4) !important;
}

/* SEARCH INPUT - Enhanced styling */
.search-input,
input.search-input,
.form-control.search-input {
    border-radius: 12px !important;
    padding: 1.2rem 1.8rem !important;
    border: none !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.search-input:focus,
input.search-input:focus,
.form-control.search-input:focus {
    border: 2px solid #2ECC71 !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px) !important;
}

/* CARDS - Enhanced shadows and rounded corners */
.feature-card,
.card.feature-card,
.result-card,
.card.result-card {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
    background: white !important;
}

.feature-card:hover,
.card.feature-card:hover,
.result-card:hover,
.card.result-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
}

/* DROPDOWN - Psychology-based styling */
.form-select,
select.form-select {
    border-radius: 12px !important;
    border: 2px solid #F5F5F5 !important;
    padding: 0.75rem 1rem !important;
    background: white !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.form-select:focus,
select.form-select:focus {
    border-color: #2ECC71 !important;
    box-shadow: 0 0 0 0.2rem rgba(46, 204, 113, 0.25) !important;
    transform: translateY(-2px) !important;
}

/* BODY - Clean background */
body {
    background-color: #FAFAFA !important;
    color: #333333 !important;
}

/* PRICE TAGS - Appetite-stimulating */
.price-tag {
    background: linear-gradient(135deg, #FF4D4D 0%, #FF6B00 100%) !important;
    color: white !important;
    padding: 0.375rem 0.75rem !important;  /* Match btn-sm padding for consistent height */
    border-radius: 0.375rem !important;  /* Match btn-sm border-radius */
    font-weight: 600 !important;
    font-size: 0.875rem !important;  /* Slightly smaller font to match btn-sm */
    box-shadow: 0 2px 4px rgba(255, 77, 77, 0.2) !important;
    display: inline-block !important;
    line-height: 1.5 !important;  /* Match button line-height */
}

/* HEADINGS - Red for appetite stimulation */
.search-results h3,
h3 {
    color: #FF4D4D !important;
    font-weight: 700 !important;
}

/* CARD IMAGES - Enhanced hover effect */
.card-img-top {
    transition: transform 0.3s ease !important;
}

.feature-card:hover .card-img-top,
.result-card:hover .card-img-top {
    transform: scale(1.05) !important;
}

/* ========================================
   MOBILE OPTIMIZATION
   ======================================== */

/* Mobile-First Responsive Design */
@media (max-width: 768px) {
    /* Hero Section Mobile Optimization */
    .hero-section {
        padding: 40px 0 !important;
        border-radius: 0 0 20px 20px !important;
        margin-bottom: 20px !important;
    }
    
    .hero-section h1 {
        font-size: 2rem !important;
        margin-bottom: 15px !important;
    }
    
    .hero-section p {
        font-size: 1rem !important;
        margin-bottom: 20px !important;
    }
    
    /* Search Container Mobile */
    .search-container {
        margin: 0 15px !important;
    }
    
    .search-input {
        padding: 15px 20px !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
        border-radius: 12px !important;
    }
    
    .search-button {
        right: 5px !important;
        top: 5px !important;
        bottom: 5px !important;
        padding: 0 15px !important;
        font-size: 0.9rem !important;
    }
    
    /* Restaurant Dropdown Mobile */
    .form-select {
        padding: 15px 12px !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
        margin-top: 15px !important;
    }
    
    /* Cards Mobile Optimization */
    .feature-card,
    .result-card {
        margin-bottom: 15px !important;
        border-radius: 12px !important;
    }
    
    .card-img-top {
        height: 180px !important;
    }
    
    .card-title {
        font-size: 1rem !important;
    }
    
    .card-text {
        font-size: 0.9rem !important;
    }
    
    /* Price Tags Mobile */
    .price-tag {
        padding: 0.4rem 0.8rem !important;
        font-size: 0.9rem !important;
    }
    
    /* Buttons Mobile */
    .btn-primary {
        padding: 12px 20px !important;
        font-size: 1rem !important;
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    
    /* Container Padding Mobile */
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Section Headings Mobile */
    .section-heading,
    h2, h3 {
        font-size: 1.5rem !important;
        margin-bottom: 20px !important;
        text-align: center !important;
    }
}

/* Extra Small Mobile Devices */
@media (max-width: 480px) {
    .hero-section {
        padding: 30px 0 !important;
    }
    
    .hero-section h1 {
        font-size: 1.8rem !important;
    }
    
    .search-input {
        padding: 12px 15px !important;
    }
    
    .search-button {
        padding: 0 12px !important;
    }
    
    .card-img-top {
        height: 150px !important;
    }
    
    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* Touch-Friendly Interactions */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .feature-card:hover,
    .result-card:hover,
    .btn-primary:hover,
    .search-button:hover {
        transform: none !important;
    }
    
    /* Increase touch targets */
    .btn-primary,
    .search-button,
    .form-select {
        min-height: 44px !important; /* Apple's recommended touch target */
    }
    
    /* Improve tap feedback */
    .feature-card,
    .result-card,
    .btn-primary {
        transition: background-color 0.2s ease !important;
    }
    
    .feature-card:active,
    .result-card:active {
        background-color: #f0f0f0 !important;
    }
    
    .btn-primary:active {
        background-color: #FF8533 !important;
    }
}