
/* Dynamic Business Design CSS */
:root {
    --primary: #f00030;
    --secondary: #7c3aed;
    --heading-color: #111827;
    --navbar-bg: #f00030;
    --navbar-text: #374151;
    --font-family: 'Roboto', sans-serif;
    --button-radius: 0px;
}

/* Make logos round */
.business-logo-image,
.loading-logo,
.footer-logo-image,
.sidebar-header img,
.login-header img {
    border-radius: 50% !important;
    object-fit: cover !important;
}

/* Apply custom font */
body {
    font-family: var(--font-family) !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--heading-color) !important;
}

.hero-title {
    background: linear-gradient(90deg, var(--primary), var(--secondary)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

/* Navbar styling */
.business-nav {
    background: var(--navbar-bg) !important;
    color: var(--navbar-text) !important;
}

.business-nav-container {
    color: var(--navbar-text) !important;
}

.business-logo {
    color: var(--navbar-text) !important;
    font-weight: 700 !important;
}

.business-logo:hover {
    opacity: 0.8 !important;
}

.business-nav-links a {
    color: var(--navbar-text) !important;
}

.business-nav-links a:hover {
    opacity: 0.7 !important;
}

.business-nav-links a.active {
    background: linear-gradient(90deg, var(--primary), var(--secondary)) !important;
    color: white !important;
    font-weight: 600 !important;
}

.business-nav-links a i {
    color: inherit !important;
}

/* Mobile hamburger */
.mobile-menu-toggle span {
    background: var(--navbar-text) !important;
}

/* Buttons */
.btn-primary,
.btn.btn-primary {
    background: linear-gradient(90deg, var(--primary), var(--secondary)) !important;
    color: white !important;
    border-radius: var(--button-radius) !important;
}

.btn-outline,
.btn.btn-outline {
    border: 2px solid var(--primary) !important;
    color: var(--primary) !important;
    background: transparent !important;
    border-radius: var(--button-radius) !important;
}

.btn-outline:hover {
    background: var(--primary) !important;
    color: white !important;
}

/* Links */
a:not(.btn):not(.business-logo):not(.business-nav-links a):not(.business-footer a) {
    color: var(--primary) !important;
}

a:not(.btn):not(.business-footer a):hover {
    color: var(--secondary) !important;
}

/* Contact page icons */
.contact-icon {
    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
}

/* Form inputs focus */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary) !important;
}

/* WhatsApp button - keep green but adapt to design */
.whatsapp-float {
    border-radius: 0 !important;
}

/* Product cards hover */
.business-card:hover {
    border-color: var(--primary) !important;
}

/* Success messages */
.success-message i {
    color: var(--primary) !important;
}

/* Footer */
.site-footer {
    background: var(--navbar-bg) !important;
    color: var(--navbar-text) !important;
}

/* Hero section with gradient */
.hero {
    background: linear-gradient(135deg, #f0003010, #7c3aed08) !important;
}

/* Card borders and hover effects */
.card,
.business-card,
.contact-info-card {
    border: 1px solid #f0003020 !important;
}

.card:hover,
.business-card:hover {
    border-color: var(--primary) !important;
    box-shadow: 0 10px 30px #f0003020 !important;
}

/* About section */
.about h2 {
    color: var(--heading-color) !important;
}

/* Feature cards */
.feature-card {
    border: 1px solid #f0003020 !important;
}

.feature-card:hover {
    border-color: var(--primary) !important;
    transform: translateY(-4px) !important;
}

/* Shop page product titles */
.business-title {
    color: var(--heading-color) !important;
}

/* Price styling */
.business-desc {
    color: var(--primary) !important;
    font-weight: 600 !important;
}

/* Contact page specific */
.contact-link {
    color: var(--primary) !important;
}

.contact-link:hover {
    color: var(--secondary) !important;
}

.whatsapp-link {
    color: #25D366 !important;
}

.contact-icon {
    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
}

.whatsapp-icon {
    background: linear-gradient(135deg, #25D366, #128C7E) !important;
}

/* Form styling */
.form-group label {
    color: var(--heading-color) !important;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
    border-color: #f0003040 !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px #f0003020 !important;
}

/* Button hover effects */
.btn-primary:hover,
.btn.btn-primary:hover {
    opacity: 0.9 !important;
    transform: translateY(-2px) !important;
}

.btn-outline:hover {
    transform: translateY(-2px) !important;
}

/* Order Now button - shop page */
.btn-order {
    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
    color: white !important;
    border-radius: var(--button-radius) !important;
}

.btn-order:hover {
    opacity: 0.9 !important;
    box-shadow: 0 10px 20px #f0003040 !important;
}

/* Confirm Order button in modal */
.btn-confirm {
    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
    color: white !important;
    border-radius: var(--button-radius) !important;
}

.btn-confirm:hover {
    opacity: 0.9 !important;
    box-shadow: 0 10px 20px #f0003040 !important;
}

/* Modal form icons */
.form-group label i {
    color: var(--primary) !important;
}

/* Modal input focus states */
.modal .form-group input:focus,
.modal .form-group textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px #f0003020 !important;
}

/* Cart-specific styles */
.btn-add-to-cart {
    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
    color: white !important;
    border-radius: var(--button-radius) !important;
}

.btn-add-to-cart:hover {
    opacity: 0.9 !important;
    box-shadow: 0 8px 16px #f0003040 !important;
}

.btn-order-now {
    background: linear-gradient(135deg, #48bb78, #38a169) !important;
    color: white !important;
    border-radius: var(--button-radius) !important;
}

.btn-order-now:hover {
    opacity: 0.9 !important;
    box-shadow: 0 8px 16px rgba(72, 187, 120, 0.4) !important;
}

.btn-checkout {
    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
    color: white !important;
    border-radius: var(--button-radius) !important;
}

.btn-checkout:hover {
    opacity: 0.9 !important;
    box-shadow: 0 10px 20px #f0003040 !important;
}

.cart-badge {
    background: var(--primary) !important;
}

.quantity-btn {
    border-color: #f0003040 !important;
}

.quantity-btn:hover {
    border-color: var(--primary) !important;
    background: #f0003010 !important;
}

.quantity-input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px #f0003020 !important;
}

.cart-item {
    border: 1px solid #f0003020 !important;
}

.cart-item:hover {
    border-color: var(--primary) !important;
    box-shadow: 0 4px 12px #f0003015 !important;
}

.cart-summary {
    border: 1px solid #f0003020 !important;
}

/* Mobile menu for square style */
.mobile-menu-toggle span {
    border-radius: 0 !important;
}

.btn,
.btn-primary,
.btn-outline,
.btn-order,
.btn-confirm,
.btn-add-to-cart,
.btn-order-now,
.btn-checkout {
    border-radius: 0 !important;
}

