/* ================================================
   SPACING & LAYOUT FIXES - PROFESSIONAL & CLEAN
   Fixed header buttons, removed scroll button, clean spacing
   ================================================ */

/* ===== HEADER BUTTON FIXES ===== */

/* Compact header buttons */
header .btn-primary,
header .btn-outline,
header button,
header a.btn {
    padding: 0.625rem 1.25rem !important;
    font-size: 0.875rem !important;
    min-width: auto !important;
    white-space: nowrap !important;
}

/* Get Quote button - compact */
header .btn-primary {
    padding: 0.625rem 1.5rem !important;
}

/* Call button - compact */
header a[href^="tel"] {
    padding: 0.625rem 1rem !important;
}

/* Cart button - compact */
header a[href*="cart"] {
    padding: 0.5rem 1rem !important;
}

/* Account button - compact */
header #accountButton {
    padding: 0.625rem 1rem !important;
}

/* ===== REMOVE FLOATING SCROLL BUTTON ===== */

/* Hide scroll to top button completely */
#scrollTopBtn {
    display: none !important;
}

/* Keep WhatsApp and Call buttons but make them smaller */
.floating-button {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    transition: all 0.3s ease !important;
}

.floating-button:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.2) !important;
}

/* ===== SECTION SPACING - CONSISTENT ===== */

/* Professional section padding */
section {
    padding: 4rem 0 !important;
}

@media (min-width: 768px) {
    section {
        padding: 5rem 0 !important;
    }
}

@media (min-width: 1024px) {
    section {
        padding: 6rem 0 !important;
    }
}

/* First section after header */
section:first-of-type,
.pt-32,
.min-h-screen {
    padding-top: 7rem !important;
}

@media (min-width: 768px) {
    section:first-of-type,
    .pt-32,
    .min-h-screen {
        padding-top: 8rem !important;
    }
}

/* ===== CONTAINER CONSISTENT SPACING ===== */

.container-custom {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

@media (min-width: 768px) {
    .container-custom {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

@media (min-width: 1024px) {
    .container-custom {
        padding-left: 2.5rem !important;
        padding-right: 2.5rem !important;
    }
}

@media (min-width: 1400px) {
    .container-custom {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }
}

/* ===== HEADING SPACING ===== */

/* Consistent heading margins */
h1 {
    margin-bottom: 1.5rem !important;
}

h2 {
    margin-bottom: 1.25rem !important;
}

h3 {
    margin-bottom: 1rem !important;
}

h4, h5, h6 {
    margin-bottom: 0.75rem !important;
}

/* Text sections */
.text-center.mb-16,
.text-center.mb-12 {
    margin-bottom: 3rem !important;
}

@media (min-width: 768px) {
    .text-center.mb-16 {
        margin-bottom: 4rem !important;
    }
}

/* ===== HERO SECTION SPACING ===== */

/* Hero section */
.hero,
.hero-section {
    padding: 5rem 0 !important;
}

@media (min-width: 768px) {
    .hero,
    .hero-section {
        padding: 6rem 0 !important;
    }
}

@media (min-width: 1024px) {
    .hero,
    .hero-section {
        padding: 7rem 0 !important;
    }
}

/* Hero buttons */
.hero .btn-primary,
.hero-section .btn-primary {
    padding: 1rem 2.5rem !important;
    font-size: 1.125rem !important;
    margin: 0.5rem !important;
}

/* ===== GRID SPACING ===== */

/* Consistent grid gaps */
.grid {
    gap: 1.5rem !important;
}

@media (min-width: 768px) {
    .grid {
        gap: 2rem !important;
    }
}

@media (min-width: 1024px) {
    .grid {
        gap: 2.5rem !important;
    }
}

/* ===== CARD SPACING ===== */

/* Card padding */
.card {
    padding: 0 !important;
}

.card > div:not(.bg-gray-100):not([class*="image"]) {
    padding: 1.5rem !important;
}

@media (min-width: 1024px) {
    .card > div:not(.bg-gray-100):not([class*="image"]) {
        padding: 1.75rem !important;
    }
}

/* Card margins */
.card {
    margin-bottom: 0 !important;
}

/* ===== BUTTON SPACING ===== */

/* Button groups */
.flex.gap-4,
.flex.gap-6 {
    gap: 1rem !important;
}

@media (max-width: 640px) {
    .flex.gap-4,
    .flex.gap-6 {
        gap: 0.75rem !important;
    }
}

/* Button padding - consistent */
.btn,
.btn-primary,
.btn-secondary,
.btn-outline {
    padding: 0.75rem 1.5rem !important;
    font-size: 0.9375rem !important;
}

/* Large buttons */
.btn-lg {
    padding: 1rem 2rem !important;
    font-size: 1rem !important;
}

/* Small buttons */
.btn-sm {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
}

/* ===== FILTER BUTTONS ===== */

/* Product/Portfolio filter buttons */
.filter-buttons,
.flex.flex-wrap.justify-center {
    margin-bottom: 2.5rem !important;
    gap: 0.75rem !important;
}

@media (min-width: 768px) {
    .filter-buttons,
    .flex.flex-wrap.justify-center {
        margin-bottom: 3rem !important;
        gap: 1rem !important;
    }
}

/* ===== FORM SPACING ===== */

/* Form elements */
input, 
textarea, 
select {
    margin-bottom: 1rem !important;
}

.form-group {
    margin-bottom: 1.5rem !important;
}

label {
    margin-bottom: 0.5rem !important;
    display: block !important;
}

/* ===== FOOTER SPACING ===== */

footer {
    padding: 4rem 0 2rem !important;
}

footer .section-padding {
    padding: 0 !important;
}

/* ===== MOBILE SPACING ===== */

@media (max-width: 767px) {
    /* Reduce section padding */
    section {
        padding: 3rem 0 !important;
    }
    
    section:first-of-type {
        padding-top: 6rem !important;
    }
    
    /* Tighter containers */
    .container-custom {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Smaller headings */
    h1 {
        font-size: 2rem !important;
        margin-bottom: 1rem !important;
    }
    
    h2 {
        font-size: 1.75rem !important;
        margin-bottom: 0.875rem !important;
    }
    
    /* Compact buttons */
    .btn,
    .btn-primary {
        padding: 0.625rem 1.25rem !important;
        font-size: 0.875rem !important;
    }
    
    /* Smaller gaps */
    .grid {
        gap: 1.25rem !important;
    }
}

/* ===== CLEAN SPACING UTILITIES ===== */

/* Margin bottom utilities */
.mb-4 {
    margin-bottom: 1rem !important;
}

.mb-6 {
    margin-bottom: 1.5rem !important;
}

.mb-8 {
    margin-bottom: 2rem !important;
}

.mb-12 {
    margin-bottom: 3rem !important;
}

.mb-16 {
    margin-bottom: 4rem !important;
}

/* Margin top utilities */
.mt-4 {
    margin-top: 1rem !important;
}

.mt-6 {
    margin-top: 1.5rem !important;
}

.mt-8 {
    margin-top: 2rem !important;
}

/* Padding utilities */
.p-4 {
    padding: 1rem !important;
}

.p-6 {
    padding: 1.5rem !important;
}

.p-8 {
    padding: 2rem !important;
}

/* ===== WHITESPACE CONTROL ===== */

/* Remove extra whitespace */
* {
    margin: 0;
    padding: 0;
}

/* Proper box model */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ===== FLOATING BUTTONS POSITION ===== */

/* Adjust floating buttons position */
.fixed.bottom-6.right-6 {
    bottom: 1.5rem !important;
    right: 1.5rem !important;
}

@media (max-width: 768px) {
    .fixed.bottom-6.right-6 {
        bottom: 1rem !important;
        right: 1rem !important;
    }
    
    .floating-button {
        width: 44px !important;
        height: 44px !important;
    }
}

/* ===== TEXT SPACING ===== */

/* Paragraph spacing */
p {
    margin-bottom: 1rem;
    line-height: 1.7;
}

/* List spacing */
ul, ol {
    margin-bottom: 1rem;
}

li {
    margin-bottom: 0.5rem;
}

/* ===== HEADER SPECIFIC ===== */

/* Header container */
header .container-custom {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

/* Header height consistency */
header {
    min-height: 70px !important;
}

/* Logo and company name spacing */
header .flex.items-center.gap-4 {
    gap: 1rem !important;
}

/* ===== STATS SECTION ===== */

/* Stats section spacing */
.stats-section {
    padding: 5rem 0 !important;
}

.stats-section .grid {
    gap: 2rem !important;
}

/* ===== CTA SECTION ===== */

/* CTA section */
.cta-section {
    padding: 5rem 0 !important;
}

@media (min-width: 1024px) {
    .cta-section {
        padding: 6rem 0 !important;
    }
}

/* ===== CLEAN BORDERS ===== */

/* Card borders */
.card {
    border: 1px solid rgba(0,0,0,0.05);
}

/* ===== REMOVE UNNECESSARY MARGINS ===== */

/* No margin on first child */
*:first-child {
    margin-top: 0 !important;
}

/* No margin on last child */
*:last-child {
    margin-bottom: 0 !important;
}

/* ===== PROFESSIONAL SPACING SCALE ===== */
/*
Spacing scale:
0.25rem = 4px
0.5rem = 8px
0.75rem = 12px
1rem = 16px
1.25rem = 20px
1.5rem = 24px
2rem = 32px
2.5rem = 40px
3rem = 48px
4rem = 64px
5rem = 80px
6rem = 96px
*/