/* ============================================
   UTILITY CLASSES - Replace Inline Styles
   ============================================ */

/* Spacing Utilities */
.mb-0 {
    margin-bottom: 0 !important;
}

.mb-4 {
    margin-bottom: var(--space-4) !important;
}

.mb-5 {
    margin-bottom: var(--space-5) !important;
}

.mb-6 {
    margin-bottom: var(--space-6) !important;
}

.mb-8 {
    margin-bottom: var(--space-8) !important;
}

.mt-6 {
    margin-top: var(--space-6) !important;
}

.mt-8 {
    margin-top: var(--space-8) !important;
}

.mr-2 {
    margin-right: 8px !important;
}

.p-8 {
    padding: var(--space-8) !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

/* Text Utilities */
.text-center {
    text-align: center !important;
}

.max-w-700 {
    max-width: 700px;
}

.max-w-600 {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* List Utilities */
.list-none {
    list-style: none;
}

/* Divider Inline Replacement */
.divider-inline {
    margin: var(--space-4) 0;
}

/* Grid Layouts */
.grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
}

.grid-2col-wide {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
}

/* Feature List Item */
.feature-list-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.feature-list-item:last-child {
    margin-bottom: 0;
}

.feature-list-item i {
    color: var(--color-gold);
}

/* Gold Icon */
.icon-gold {
    color: var(--color-gold);
    margin-right: 8px;
}

/* ============================================
   GOLDEN SECTION - IMPROVED CONTRAST
   ============================================ */

/* CTA Section with Gold Background */
.cta-gold {
    background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-gold::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.1);
    pointer-events: none;
}

/* High Contrast Text on Gold */
.cta-gold h2,
.cta-gold .cta-title {
    color: #1a1510 !important;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 1;
}

.cta-gold p,
.cta-gold .cta-text {
    color: #2c2319 !important;
    opacity: 1 !important;
    font-weight: 500;
    position: relative;
    z-index: 1;
}

/* High Contrast Button on Gold Background */
.btn-on-gold,
.cta-gold .btn {
    background: #1a1510 !important;
    color: var(--color-gold-light) !important;
    border: 2px solid #1a1510 !important;
    font-weight: 600;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.btn-on-gold:hover,
.cta-gold .btn:hover {
    background: transparent !important;
    color: #1a1510 !important;
    border-color: #1a1510 !important;
}

/* Flagship/Showroom Section on Gold */
.showroom-gold {
    background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
    position: relative;
}

.showroom-gold::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.05);
    pointer-events: none;
}

.showroom-gold .section-label {
    color: #1a1510;
    opacity: 1;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: var(--space-4);
}

.showroom-gold h2 {
    color: #1a1510 !important;
    font-weight: 600;
    margin-bottom: var(--space-6);
}

.showroom-gold p {
    color: #2c2319 !important;
    opacity: 1 !important;
    margin-bottom: var(--space-6);
}

.showroom-gold ul {
    list-style: none;
    margin-bottom: var(--space-8);
}

.showroom-gold li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    color: #1a1510 !important;
    font-weight: 500;
}

.showroom-gold li i {
    color: #1a1510;
}

/* White Button with Dark Text for Gold Sections */
.btn-white-contrast {
    background: var(--color-white) !important;
    color: #1a1510 !important;
    border: 2px solid var(--color-white) !important;
    font-weight: 600;
}

.btn-white-contrast:hover {
    background: transparent !important;
    color: #1a1510 !important;
    border-color: #1a1510 !important;
}

/* Contact Info on Gold */
.contact-info-gold {
    color: #1a1510 !important;
}

.contact-info-gold h4 {
    color: #1a1510 !important;
    margin-bottom: var(--space-4);
}

/* ============================================
   CARD UTILITIES
   ============================================ */

.card-padded {
    padding: var(--space-8);
}

.card-padded .usp-icon {
    margin-bottom: var(--space-5);
}

.card-padded h3 {
    margin-bottom: var(--space-4);
}

.card-padded p:last-child {
    margin-bottom: 0;
}

/* About Grid Equal Columns */
.about-grid-equal {
    grid-template-columns: 1fr 1fr;
}

/* ============================================
   RESPONSIVE FIXES
   ============================================ */

@media (max-width: 768px) {

    .grid-2col,
    .grid-2col-wide {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .about-grid-equal {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   FOOTER ICONS
   ============================================ */

.footer-links .icon-gold,
.footer-links i.fas {
    color: var(--color-gold);
    margin-right: 8px;
}

/* Heart Icon */
.heart-gold {
    color: var(--color-gold);
}

/* Showroom Image Wrapper */
.showroom-image-wrapper {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.showroom-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

/* CTA Buttons Container */
.cta-buttons {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* List Utilities */
.list-check {
    list-style: none;
    margin-top: var(--space-6);
}

.list-check li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.check-icon {
    color: var(--color-gold);
}

/* Text Colors */
.text-primary {
    color: var(--color-primary);
}

.text-muted {
    color: var(--color-text-muted);
}

/* Section Utilities */
.section-no-pb {
    padding-bottom: 0 !important;
}

/* CTA Centered (Gold) */
.cta-centered {
    background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
    text-align: center;
}

.cta-centered h2 {
    color: var(--color-primary);
    margin-bottom: var(--space-4);
}

.cta-centered p {
    color: var(--color-primary);
    opacity: 0.8;
    max-width: 600px;
    margin: 0 auto var(--space-8);
}

/* Contact Page Utilities */
.bg-light-accent {
    background-color: var(--color-pearl);
}

.bg-white {
    background-color: var(--color-white);
}

.shadow-medium {
    box-shadow: var(--shadow-medium);
}

.transition-base {
    transition: all var(--transition-base);
}

.hover-transform:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-elegant);
}

.card-grid {
    display: grid;
    gap: var(--space-8);
}

@media (min-width: 768px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* HOTFIXES */
.hero-scroll {
    display: none !important;
}

/* Fix for potential floating empty frames */
.about-image:empty::before,
.about-image:empty::after,
.hero::before,
.hero::after {
    /* If user wants floating section removed, we hide these decorative frames */
    display: none !important;
}

/* Ensure navbar dropdowns don't get stuck */
.nav-dropdown-content {
    display: none;
}

.nav-dropdown:hover .nav-dropdown-content {
    display: block;
}

/* ============================================
   ROYAL AESTHETIC & SHARP EDGES
   ============================================ */

/* SHARP EDGES (User Request: "Make all edges sharp not curved") */
:root {
    --radius-sm: 0px;
    --radius-md: 0px;
    --radius-lg: 0px;
    --radius-xl: 0px;
    --radius-pill: 0px;
    --radius-arch: 0px;
}

.btn,
.btn-primary,
.btn-outline,
.btn-white,
.btn-on-gold,
.btn-white-contrast {
    border-radius: 0 !important;
    padding-left: var(--space-8) !important;
    padding-right: var(--space-8) !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.card,
.card-padded,
.contact-form,
.product-card,
.showroom-image-wrapper {
    border-radius: 0 !important;
}

.about-image img,
.hero-image img,
.img-arch,
.img-arch img {
    border-radius: 0 !important;
}

/* Elegant Section Headers */
.section-header h2 {
    font-family: 'Cinzel', serif !important;
    font-weight: 500;
}

/* ============================================
   GOLDEN BORDER & SHIMMER EFFECTS
   ============================================ */

/* Royal Double Border Effect */
.border-royal {
    position: relative;
    border: 1px solid var(--color-gold);
    box-shadow: 0 0 15px rgba(201, 169, 97, 0.15);
    background: var(--color-white);
    transition: all 0.4s ease;
}

.border-royal::after {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid var(--color-gold-light);
    pointer-events: none;
    z-index: 1;
}

.border-royal:hover {
    box-shadow: 0 0 25px rgba(201, 169, 97, 0.3);
    transform: translateY(-2px);
}

/* Shimmer Border Animation */
@keyframes borderGlow {

    0%,
    100% {
        border-color: var(--color-gold);
        box-shadow: 0 0 10px rgba(201, 169, 97, 0.2);
    }

    50% {
        border-color: var(--color-gold-light);
        box-shadow: 0 0 20px rgba(201, 169, 97, 0.5);
    }
}

.border-shimmer {
    position: relative;
    border: 1px solid var(--color-gold);
    animation: borderGlow 3s ease-in-out infinite;
    overflow: hidden;
    /* Ensure shimmer doesn't spill */
}

/* Inner Shimmer Sweep */
.border-shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right,
            transparent 0%,
            rgba(255, 255, 255, 0.4) 50%,
            transparent 100%);
    transform: skewX(-25deg);
    animation: shimmerSweep 4s infinite;
    z-index: 2;
    pointer-events: none;
}

@keyframes shimmerSweep {
    0% {
        left: -100%;
    }

    20% {
        left: 200%;
    }

    100% {
        left: 200%;
    }
}

/* Updated Product Card for Royal Look */
.product-card {
    border: 1px solid var(--color-gold-muted);
    transition: all 0.4s ease;
}

.product-card:hover {
    border-color: var(--color-gold);
    box-shadow: 0 0 20px rgba(201, 169, 97, 0.2);
}

/* Floral Ornament (Unicode) */
.ornament-royal::before {
    content: '❧';
    font-family: serif;
    font-size: 2rem;
    color: var(--color-gold);
    display: block;
    text-align: center;
    margin-bottom: var(--space-4);
}

/* REMOVE FLOATING FRAMES (User Request) */
.about-image::before,
.about-image::after,
.hero::before,
.hero::after,
.contact-form::before,
.product-card::before,
.product-card::after {
    display: none !important;
}

/* DISABLE FLOAT EFFECT & SHADOWS THAT LOOK "SOFT" */
.float,
.floating,
.feature-icon,
.usp-icon {
    animation: none !important;
    transform: none !important;
}

.shadow-soft,
.shadow-medium,
.shadow-elegant {
    box-shadow: none !important;
    /* Remove soft shadows for sharper look, replace with gold glow if needed */
}

/* Map Section Styles */
.map-section {
    height: 400px;
    background: var(--color-walnut);
}

.map-iframe {
    border: 0;
    filter: grayscale(100%) invert(92%) contrast(83%);
}

/* Centered Social Links */
.social-links-centered {
    justify-content: center;
}

/* Social Links on Light Backgrounds (Contact Page) */
.section .footer-social a,
.text-center .footer-social a {
    border: 2px solid var(--color-gold);
    color: var(--color-gold);
    background: transparent;
}

.section .footer-social a:hover,
.text-center .footer-social a:hover {
    background: var(--color-gold);
    color: var(--color-espresso);
    border-color: var(--color-gold);
    transform: translateY(-5px);
}

/* Form Alerts */
.alert {
    padding: var(--space-5);
    border: 1px solid var(--color-ash);
    background: var(--color-cream);
    color: var(--color-text-dark);
    margin-bottom: var(--space-6);
}

.alert-success {
    border-color: var(--color-gold);
    background: rgba(201, 169, 97, 0.08);
}

.alert-error {
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.06);
}

.hp-field {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* ============================================
   INLINE STYLE REPLACEMENT CLASSES
   ============================================ */

/* Divider with vertical margin */
.divider-my-4 {
    margin: var(--space-4) 0;
}

/* Section header left-aligned with bottom margin */
.section-header-left {
    text-align: left;
    margin-bottom: var(--space-8);
}

/* Navbar container centered layout */
.navbar-container-centered {
    justify-content: center;
    flex-direction: column;
}

/* Navbar inner flex wrapper */
.navbar-inner {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

/* Testimonial user name styling */
.testimonial-name {
    font-size: 0.85rem;
    margin: 0;
    color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Hero rating subtext */
.rating-subtext {
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 0;
    opacity: 0.7;
}

/* CTA section with gold background and centered text */
.cta-gold-centered {
    background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
    text-align: center;
}

/* Text color primary (dark) */
.text-color-primary {
    color: var(--color-primary);
}

/* Muted centered paragraph */
.text-muted-centered {
    color: var(--color-primary);
    opacity: 0.8;
    max-width: 600px;
    margin: var(--space-4) auto var(--space-8);
}

/* ============================================
   NAVIGATION STYLES (moved from header.php)
   ============================================ */

/* Enhanced Royal Navigation */
.nav-links {
    display: flex;
    align-items: center;
    gap: 20px;
}

.nav-item-wrapper {
    display: flex;
    align-items: center;
}

.nav-line {
    height: 1px;
    width: 40px;
    background-color: var(--color-gold);
    display: inline-block;
    margin: 0 15px;
    opacity: 0.6;
}

/* Hide nav lines on mobile */
@media (max-width: 768px) {
    .nav-line {
        display: none;
    }
}