/* ============================================
   RANO COFFEE - Navy Blue Theme Override
   Coffee Beans Pattern Background
   ============================================ */

/* Prevent FOUC (Flash of Unstyled Content) */
html {
    visibility: visible;
    opacity: 1;
}

/* Body - keep light background for content areas */
body {
    background: #f5f7fa;
    /* Coffee beans pattern only shows through in specific sections */
    visibility: visible !important;
    opacity: 1 !important;
}

/* Hero Section with Navy Background */
.hero-section,
.hero {
    background: linear-gradient(135deg, #0f1f3d 0%, #1e3a5f 50%, #2d4f7a 100%) !important;
    position: relative;
}

.hero-section::before,
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cellipse stroke='%23ffffff' stroke-opacity='0.1' stroke-width='1.5' cx='20' cy='20' rx='10' ry='15' transform='rotate(25 20 20)'/%3E%3Cpath d='M20 12c0-4.418 3.582-8 8-8s8 3.582 8 8-3.582 8-8 8-8-3.582-8-8z' stroke='%23ffffff' stroke-opacity='0.1' stroke-width='1.5' transform='rotate(40 28 12)'/%3E%3Cellipse stroke='%23ffffff' stroke-opacity='0.1' stroke-width='1.5' cx='60' cy='60' rx='10' ry='15' transform='rotate(25 60 60)'/%3E%3Cpath d='M60 52c0-4.418 3.582-8 8-8s8 3.582 8 8-3.582 8-8 8-8-3.582-8-8z' stroke='%23ffffff' stroke-opacity='0.1' stroke-width='1.5' transform='rotate(40 68 52)'/%3E%3Cellipse stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' cx='40' cy='40' rx='8' ry='12' transform='rotate(60 40 40)'/%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
    z-index: 0;
}

.hero-section > *,
.hero > * {
    position: relative;
    z-index: 1;
}

/* Primary Buttons - Navy Theme */
.btn-primary,
.btn.btn-primary {
    background: linear-gradient(135deg, #2d4f7a 0%, #1e3a5f 100%) !important;
    border-color: #2d4f7a !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn.btn-primary:hover {
    background: linear-gradient(135deg, #3a5f8f 0%, #2d4f7a 100%) !important;
    border-color: #3a5f8f !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.3);
}

/* Accent Buttons - Warm Brown/Gold */
.btn-accent,
.btn.btn-accent,
.btn-warning {
    background: linear-gradient(135deg, #e6b885 0%, #d4a574 100%) !important;
    border-color: #d4a574 !important;
    color: #0f1f3d !important;
}

.btn-accent:hover,
.btn.btn-accent:hover,
.btn-warning:hover {
    background: linear-gradient(135deg, #f0c896 0%, #e6b885 100%) !important;
    border-color: #e6b885 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 165, 116, 0.3);
}

/* Cards with Navy Theme */
.card {
    background: #ffffff;
    border: 1px solid rgba(30, 58, 95, 0.1);
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.08);
}

.card-header {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d4f7a 100%);
    color: #ffffff;
    border-bottom: 2px solid #d4a574;
}

/* Navigation - Navy Theme */
.navbar,
.nav-header {
    background: linear-gradient(135deg, #0f1f3d 0%, #1e3a5f 100%) !important;
    box-shadow: 0 2px 8px rgba(15, 31, 61, 0.3) !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
}

.navbar-brand {
    color: #ffffff !important;
    font-weight: 700;
}

.nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    transition: all 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
    color: #e6b885 !important;
}

/* Footer - Navy Theme */
.footer,
footer {
    background: linear-gradient(135deg, #0a1628 0%, #0f1f3d 100%) !important;
    color: rgba(255, 255, 255, 0.8);
}

.footer::before,
footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cellipse stroke='%23ffffff' stroke-opacity='0.04' cx='15' cy='15' rx='8' ry='12' transform='rotate(30 15 15)'/%3E%3Cellipse stroke='%23ffffff' stroke-opacity='0.04' cx='45' cy='45' rx='8' ry='12' transform='rotate(30 45 45)'/%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
    z-index: 0;
}

.footer > *,
footer > * {
    position: relative;
    z-index: 1;
}

.footer a,
footer a {
    color: #e6b885;
}

.footer a:hover,
footer a:hover {
    color: #f0c896;
}

/* Product Cards */
.product-card {
    background: #ffffff;
    border: 1px solid rgba(30, 58, 95, 0.1);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 24px rgba(30, 58, 95, 0.15);
    border-color: #d4a574;
}

.product-card .product-badge {
    background: linear-gradient(135deg, #e6b885 0%, #d4a574 100%);
    color: #0f1f3d;
}

/* Section Titles */
.section-title,
h2.title {
    color: #1e3a5f;
    position: relative;
    padding-bottom: 1rem;
}

.section-title::after,
h2.title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #d4a574, transparent);
}

/* Links */
a {
    color: #1e3a5f;
}

a:hover {
    color: #d4a574;
}

/* Text Colors */
.text-primary {
    color: #1e3a5f !important;
}

.text-accent {
    color: #d4a574 !important;
}

/* Background Utilities */
.bg-navy {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d4f7a 100%) !important;
    color: #ffffff;
}

.bg-navy-dark {
    background: linear-gradient(135deg, #0f1f3d 0%, #1e3a5f 100%) !important;
    color: #ffffff;
}

.bg-pattern {
    position: relative;
}

.bg-pattern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cellipse stroke='%23ffffff' stroke-opacity='0.08' cx='15' cy='15' rx='8' ry='12' transform='rotate(30 15 15)'/%3E%3Cellipse stroke='%23ffffff' stroke-opacity='0.08' cx='45' cy='45' rx='8' ry='12' transform='rotate(30 45 45)'/%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
    z-index: 0;
}

.bg-pattern > * {
    position: relative;
    z-index: 1;
}

/* Badges */
.badge-primary {
    background: #1e3a5f !important;
    color: #ffffff !important;
}

.badge-accent {
    background: #d4a574 !important;
    color: #0f1f3d !important;
}

/* Forms */
.form-control:focus {
    border-color: #2d4f7a;
    box-shadow: 0 0 0 0.2rem rgba(30, 58, 95, 0.25);
}

/* Tables */
.table thead {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d4f7a 100%);
    color: #ffffff;
}

.table-hover tbody tr:hover {
    background-color: rgba(30, 58, 95, 0.05);
}

/* Alerts */
.alert-primary {
    background-color: rgba(30, 58, 95, 0.1);
    border-color: #1e3a5f;
    color: #0f1f3d;
}

/* Pagination */
.pagination .page-link {
    color: #1e3a5f;
}

.pagination .page-item.active .page-link {
    background-color: #1e3a5f;
    border-color: #1e3a5f;
}

.pagination .page-link:hover {
    background-color: #2d4f7a;
    border-color: #2d4f7a;
    color: #ffffff;
}

/* Coffee Cup Icon Styling */
.coffee-icon,
.fa-coffee {
    color: #d4a574;
}

/* Spinner/Loading */
.spinner-border-primary {
    color: #1e3a5f !important;
}

/* Overlay Effects */
.overlay-navy {
    background: linear-gradient(135deg, rgba(15, 31, 61, 0.85) 0%, rgba(30, 58, 95, 0.85) 100%);
}

/* Smooth Transitions */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    body {
        background-attachment: scroll;
    }
}