/* ==========================================================================
   Webmade IT Solutions & Design Studio - Restaurant Management Custom Styling
   Matched to https://webmadegh.com/restaurant-management
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Rajdhani:wght@500;600;700&display=swap');

:root {
    --brand-navy: #0a1f44;
    --brand-dark: #0e1b38;
    --brand-orange: #fe4c1c;
    --brand-blue: #1973fe;
    --brand-blue-light: #437bf2;
    --color-base: 254, 76, 28; /* #fe4c1c Webmade Engitech Orange */
    --livewire-progress-bar-color: #fe4c1c;
}

body {
    font-family: 'Plus Jakarta Sans', 'Montserrat', sans-serif !important;
    color: #0a1f44;
}

h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: 'Rajdhani', 'Montserrat', sans-serif !important;
    font-weight: 700;
}

/* App Logo display */
.app-logo img {
    max-height: 44px;
    width: auto;
    object-fit: contain;
}

/* Primary Brand Accent Utilities */
.bg-webmade-orange {
    background-color: #fe4c1c !important;
}

.text-webmade-orange {
    color: #fe4c1c !important;
}

.border-webmade-orange {
    border-color: #fe4c1c !important;
}

.bg-webmade-navy {
    background-color: #0a1f44 !important;
}

.text-webmade-navy {
    color: #0a1f44 !important;
}

/* Button & interactive highlights */
.btn-webmade {
    background-color: #fe4c1c !important;
    color: #ffffff !important;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
}

.btn-webmade:hover {
    background-color: #e03b0d !important;
    box-shadow: 0 4px 14px 0 rgba(254, 76, 28, 0.39);
}

/* Webmade Signature Top Bar styling */
.webmade-top-bar {
    background-color: #0a1f44;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.75rem;
    line-height: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.webmade-top-bar a:hover {
    color: #fe4c1c;
}

/* Floating WhatsApp Quick Contact Button */
.webmade-whatsapp-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #25d366;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.35);
    transition: transform 0.2s ease;
}

.webmade-whatsapp-badge:hover {
    transform: translateY(-2px);
    color: #ffffff;
}