/*
Theme Name:        D.R. Reglazing Child
Theme URI:         https://reglazingpro.com
Description:       Child theme of Hello Elementor for D.R. Reglazing. Requires Elementor Free + Elementor Header Footer Builder plugin.
Author:            D.R. Reglazing
Template:          hello-elementor
Version:           1.0.0
Text Domain:       dr-reglazing
Tags:              elementor, hello-elementor, child-theme, reglazing, bathtub-refinishing
*/

/* =====================================================
   GLOBAL DESIGN TOKENS
   ===================================================== */

:root {
    --color-primary:        #1a1a2e;
    --color-secondary:      #c9a84c;
    --color-accent:         #e8f4f8;
    --color-white:          #ffffff;
    --color-text:           #2d2d2d;
    --color-text-light:     #6b6b6b;
    --color-border:         #e2e2e2;
    --color-grey-bg:        #f7f7f7;
    --color-success:        #28a745;
    --color-error:          #dc3545;

    --font-primary:         'Poppins', sans-serif;
    --font-size-base:       16px;
    --font-size-sm:         14px;
    --font-size-lg:         18px;
    --font-size-xl:         24px;
    --font-size-2xl:        32px;
    --font-size-3xl:        48px;
    --font-weight-regular:  400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;
    --line-height-base:     1.6;

    --space-xs:   4px;
    --space-sm:   8px;
    --space-md:   16px;
    --space-lg:   24px;
    --space-xl:   40px;
    --space-2xl:  64px;
    --space-3xl:  96px;

    --container-max:        1200px;
    --container-padding:    20px;
    --radius-sm:    4px;
    --radius-md:    8px;
    --radius-lg:    16px;
    --radius-full:  9999px;
    --shadow-sm:    0 2px 8px rgba(0,0,0,0.08);
    --shadow-md:    0 4px 20px rgba(0,0,0,0.12);
    --shadow-lg:    0 8px 40px rgba(0,0,0,0.16);
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;
}

/* =====================================================
   BASE RESET & TYPOGRAPHY
   ===================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--font-size-base); scroll-behavior: smooth; }
body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    color: var(--color-primary);
    margin-top: 0;
}
h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
p { margin-top: 0; margin-bottom: var(--space-md); }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-secondary); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { padding-left: var(--space-lg); margin-bottom: var(--space-md); }

/* =====================================================
   LAYOUT UTILITIES
   ===================================================== */

.container { max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: var(--container-padding); padding-right: var(--container-padding); }
.section-padding { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.text-center { text-align: center; }
.bg-grey    { background-color: var(--color-grey-bg); }
.bg-primary { background-color: var(--color-primary); }
.bg-white   { background-color: var(--color-white); }

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

.btn, .elementor-button, button[type="submit"] {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--space-sm); padding: 14px 32px;
    font-family: var(--font-primary); font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold); line-height: 1;
    border-radius: var(--radius-full); border: 2px solid transparent;
    cursor: pointer; transition: all var(--transition-base);
    text-decoration: none; white-space: nowrap;
}
.btn-primary, .elementor-button.elementor-button-primary {
    background-color: var(--color-secondary); color: var(--color-primary); border-color: var(--color-secondary);
}
.btn-primary:hover, .elementor-button.elementor-button-primary:hover {
    background-color: transparent; color: var(--color-secondary);
}
.btn-dark { background-color: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); }
.btn-dark:hover { background-color: transparent; color: var(--color-primary); }
.btn-outline { background-color: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn-outline:hover { background-color: var(--color-primary); color: var(--color-white); }

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

.hfe-header {
    position: sticky; top: 0; z-index: 9999;
    background-color: var(--color-white); box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base);
}
.hfe-header.scrolled { box-shadow: var(--shadow-md); }
.header-top-bar { background-color: var(--color-primary); color: var(--color-white); padding: var(--space-xs) 0; font-size: var(--font-size-sm); text-align: center; }
.header-top-bar a { color: var(--color-secondary); }

/* =====================================================
   NAVIGATION
   ===================================================== */

.elementor-nav-menu > li > a { font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); color: var(--color-primary) !important; padding: var(--space-md) var(--space-sm) !important; transition: color var(--transition-fast); }
.elementor-nav-menu > li > a:hover, .elementor-nav-menu > li.current-menu-item > a { color: var(--color-secondary) !important; }
.elementor-nav-menu--dropdown { border-top: 3px solid var(--color-secondary) !important; box-shadow: var(--shadow-md) !important; border-radius: 0 0 var(--radius-md) var(--radius-md) !important; }
.elementor-nav-menu--dropdown a { font-size: var(--font-size-sm) !important; color: var(--color-text) !important; padding: var(--space-sm) var(--space-lg) !important; }
.elementor-nav-menu--dropdown a:hover { background-color: var(--color-grey-bg) !important; color: var(--color-secondary) !important; }
.login-btn .elementor-button { background-color: var(--color-secondary) !important; color: var(--color-primary) !important; border-radius: var(--radius-full) !important; padding: 10px 24px !important; font-size: var(--font-size-sm) !important; font-weight: var(--font-weight-semibold) !important; }
.login-btn .elementor-button:hover { background-color: var(--color-primary) !important; color: var(--color-white) !important; }

/* =====================================================
   HERO SECTIONS
   ===================================================== */

.hero-section { min-height: 580px; display: flex; align-items: center; background-color: var(--color-primary); color: var(--color-white); padding: var(--space-3xl) 0; position: relative; overflow: hidden; }
.hero-section::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(26,26,46,0.95) 0%, rgba(26,26,46,0.7) 100%); z-index: 1; }
.hero-section > * { position: relative; z-index: 2; }
.hero-section h1, .hero-section h2 { color: var(--color-white); margin-bottom: var(--space-lg); }
.hero-section .hero-subtitle { color: var(--color-secondary); font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); margin-bottom: var(--space-xl); }
.hero-location { min-height: 380px; background-color: var(--color-primary); }

/* =====================================================
   INLINE QUOTE FORM (Location pages)
   ===================================================== */

.hero-quote-form { background-color: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-lg); }
.hero-quote-form h3 { color: var(--color-primary); margin-bottom: var(--space-lg); font-size: var(--font-size-xl); }
.formspark-wrapper form { display: flex; flex-direction: column; gap: var(--space-md); }
.formspark-wrapper input, .formspark-wrapper select, .formspark-wrapper textarea {
    width: 100%; padding: 12px var(--space-md); border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md); font-family: var(--font-primary); font-size: var(--font-size-base);
    color: var(--color-text); background-color: var(--color-white); transition: border-color var(--transition-fast); appearance: none;
}
.formspark-wrapper input:focus, .formspark-wrapper select:focus, .formspark-wrapper textarea:focus {
    outline: none; border-color: var(--color-secondary); box-shadow: 0 0 0 3px rgba(201,168,76,0.15);
}
.formspark-wrapper button[type="submit"] {
    background-color: var(--color-secondary); color: var(--color-primary); border: none;
    border-radius: var(--radius-full); padding: 14px var(--space-xl); font-weight: var(--font-weight-semibold);
    cursor: pointer; width: 100%; transition: all var(--transition-base);
}
.formspark-wrapper button[type="submit"]:hover { background-color: var(--color-primary); color: var(--color-white); }

/* Form success/error states */
.maids-form-success { text-align: center; padding: var(--space-xl); }
.maids-form-success .success-icon { font-size: 48px; color: var(--color-success); margin-bottom: var(--space-md); }
.maids-form-error { color: var(--color-error); font-size: var(--font-size-sm); margin-top: var(--space-sm); }
.maids-form-group { display: flex; flex-direction: column; gap: var(--space-xs); }
.maids-form-group label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); }

/* =====================================================
   CARDS & ICON BOXES
   ===================================================== */

.elementor-icon-box-wrapper { background-color: var(--color-white); border-radius: var(--radius-md); padding: var(--space-xl); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-base), transform var(--transition-base); height: 100%; }
.elementor-icon-box-wrapper:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.elementor-icon-box-icon .elementor-icon { color: var(--color-secondary) !important; }
.elementor-icon-box-title { color: var(--color-primary) !important; font-weight: var(--font-weight-semibold) !important; }

/* =====================================================
   TESTIMONIALS
   ===================================================== */

.testimonial-card { background-color: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-sm); border-left: 4px solid var(--color-secondary); position: relative; }
.testimonial-card::before { content: '\201C'; font-size: 80px; color: var(--color-secondary); opacity: 0.2; position: absolute; top: -10px; left: var(--space-lg); line-height: 1; font-family: Georgia, serif; }
.testimonial-author { display: flex; align-items: center; gap: var(--space-md); margin-top: var(--space-lg); }
.testimonial-author img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.testimonial-author-name { font-weight: var(--font-weight-semibold); color: var(--color-primary); }
.testimonial-author-location { font-size: var(--font-size-sm); color: var(--color-text-light); }
.elementor-star-rating__star { color: var(--color-secondary) !important; }

/* =====================================================
   PRICING TABLE
   ===================================================== */

.maids-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); background-color: var(--color-white); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.maids-table thead { background-color: var(--color-primary); color: var(--color-white); }
.maids-table thead th { padding: var(--space-md) var(--space-lg); text-align: left; font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); letter-spacing: 0.5px; text-transform: uppercase; }
.maids-table tbody tr { border-bottom: 1px solid var(--color-border); transition: background-color var(--transition-fast); }
.maids-table tbody tr:hover { background-color: var(--color-grey-bg); }
.maids-table tbody tr:last-child { border-bottom: none; }
.maids-table tbody td { padding: var(--space-md) var(--space-lg); color: var(--color-text); }
.maids-table .price-col { font-weight: var(--font-weight-bold); color: var(--color-secondary); }

/* =====================================================
   BOOKING PAGE
   ===================================================== */

.booking-embed-wrapper { width: 100%; min-height: 700px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.booking-embed-wrapper iframe { width: 100%; min-height: 700px; border: none; display: block; }
.booking-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-lg); margin-bottom: var(--space-2xl); }
.booking-feature-item { display: flex; align-items: flex-start; gap: var(--space-md); }
.booking-feature-item .feature-icon { color: var(--color-secondary); font-size: 24px; flex-shrink: 0; margin-top: 2px; }

/* =====================================================
   CONTACT PAGE
   ===================================================== */

.contact-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-lg); margin-bottom: var(--space-2xl); }
.contact-info-item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
.contact-info-item .contact-icon { color: var(--color-secondary); font-size: 28px; }
.contact-info-item .contact-label { font-size: var(--font-size-sm); color: var(--color-text-light); text-transform: uppercase; letter-spacing: 1px; }
.contact-info-item .contact-value { font-weight: var(--font-weight-semibold); color: var(--color-primary); font-size: var(--font-size-lg); }

/* =====================================================
   FAQ / ACCORDION
   ===================================================== */

.faq-accordion { display: flex; flex-direction: column; gap: var(--space-sm); }
.faq-item { border: 1.5px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--transition-fast); }
.faq-item.active { border-color: var(--color-secondary); }
.faq-question { display: flex; justify-content: space-between; align-items: center; padding: var(--space-lg) var(--space-xl); cursor: pointer; background-color: var(--color-white); transition: background-color var(--transition-fast); }
.faq-question:hover { background-color: var(--color-grey-bg); }
.faq-item.active .faq-question { background-color: var(--color-primary); color: var(--color-white); }
.faq-question h4 { margin: 0; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: inherit; }
.faq-toggle-icon { flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 20px; transition: transform var(--transition-base); color: var(--color-secondary); }
.faq-item.active .faq-toggle-icon { transform: rotate(45deg); color: var(--color-white); }
.faq-answer { display: none; padding: var(--space-lg) var(--space-xl); background-color: var(--color-white); color: var(--color-text); border-top: 1px solid var(--color-border); }
.faq-item.active .faq-answer { display: block; }

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

.hfe-footer { background-color: var(--color-primary); color: rgba(255,255,255,0.8); }
.footer-top { padding: var(--space-2xl) 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-bottom { padding: var(--space-lg) 0; font-size: var(--font-size-sm); color: rgba(255,255,255,0.5); }
.hfe-footer .elementor-heading-title { color: var(--color-white) !important; font-size: var(--font-size-base) !important; font-weight: var(--font-weight-semibold) !important; text-transform: uppercase; letter-spacing: 1px; margin-bottom: var(--space-md); }
.hfe-footer .elementor-icon-list-item a, .hfe-footer a { color: rgba(255,255,255,0.7) !important; font-size: var(--font-size-sm); transition: color var(--transition-fast); }
.hfe-footer .elementor-icon-list-item a:hover, .hfe-footer a:hover { color: var(--color-secondary) !important; }
.hfe-footer .elementor-social-icon { background-color: rgba(255,255,255,0.1) !important; transition: background-color var(--transition-base) !important; }
.hfe-footer .elementor-social-icon:hover { background-color: var(--color-secondary) !important; }

/* =====================================================
   LEGAL PAGES
   ===================================================== */

.legal-content { max-width: 800px; margin: 0 auto; padding: var(--space-2xl) var(--container-padding); }
.legal-content h1 { font-size: var(--font-size-2xl); border-bottom: 3px solid var(--color-secondary); padding-bottom: var(--space-md); margin-bottom: var(--space-xl); }
.legal-content h2 { font-size: var(--font-size-xl); margin-top: var(--space-2xl); margin-bottom: var(--space-md); }
.legal-content p, .legal-content li { color: var(--color-text-light); line-height: 1.8; }
.legal-last-updated { font-size: var(--font-size-sm); color: var(--color-text-light); font-style: italic; margin-bottom: var(--space-xl); }

/* =====================================================
   ABOUT PAGE
   ===================================================== */

.about-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-lg); text-align: center; }
.stat-item { padding: var(--space-xl); background-color: var(--color-grey-bg); border-radius: var(--radius-md); }
.stat-number { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); color: var(--color-secondary); line-height: 1; margin-bottom: var(--space-xs); }
.stat-label { font-size: var(--font-size-sm); color: var(--color-text-light); text-transform: uppercase; letter-spacing: 1px; }

/* =====================================================
   SECTION HEADINGS
   ===================================================== */

.section-header { margin-bottom: var(--space-2xl); }
.section-header .section-eyebrow { display: inline-block; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-secondary); text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--space-sm); }
.section-header h2 { margin-bottom: var(--space-md); }
.section-header p { color: var(--color-text-light); max-width: 600px; }
.section-header.centered { text-align: center; }
.section-header.centered p { margin-left: auto; margin-right: auto; }

/* =====================================================
   TRUST BAR
   ===================================================== */

.trust-bar { background-color: var(--color-grey-bg); padding: var(--space-lg) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.trust-bar .elementor-icon-list-items { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xl); }
.trust-bar .elementor-icon-list-item { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.trust-bar .elementor-icon-list-icon { color: var(--color-secondary); }

/* =====================================================
   POPUP
   ===================================================== */

.drr-popup-overlay { position: fixed; inset: 0; background-color: rgba(0,0,0,0.6); z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all var(--transition-base); }
.drr-popup-overlay.active { opacity: 1; visibility: visible; }
.drr-popup { background-color: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-2xl); max-width: 500px; width: 90%; position: relative; transform: translateY(20px); transition: transform var(--transition-base); box-shadow: var(--shadow-lg); }
.drr-popup-overlay.active .drr-popup { transform: translateY(0); }
.drr-popup-close { position: absolute; top: var(--space-md); right: var(--space-md); background: none; border: none; font-size: 24px; cursor: pointer; color: var(--color-text-light); line-height: 1; padding: var(--space-xs); transition: color var(--transition-fast); }
.drr-popup-close:hover { color: var(--color-primary); }
.drr-popup h3 { margin-bottom: var(--space-md); }
.drr-popup .popup-badge { display: inline-block; background-color: var(--color-secondary); color: var(--color-primary); font-weight: var(--font-weight-bold); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-full); font-size: var(--font-size-sm); margin-bottom: var(--space-md); }

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

@media (max-width: 1024px) {
    :root { --font-size-3xl: 36px; --font-size-2xl: 28px; }
    .hero-section { min-height: 460px; }
}
@media (max-width: 768px) {
    :root { --font-size-3xl: 28px; --font-size-2xl: 22px; --space-2xl: 48px; --space-3xl: 64px; }
    .hero-section { min-height: 360px; padding: var(--space-2xl) 0; }
    .booking-features, .contact-info-grid { grid-template-columns: 1fr; }
    .about-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .maids-table { font-size: 12px; }
    .maids-table thead th, .maids-table tbody td { padding: var(--space-sm) var(--space-md); }
}
@media (max-width: 480px) {
    :root { --font-size-3xl: 24px; --font-size-2xl: 20px; }
    .btn, .elementor-button { padding: 12px 24px; font-size: var(--font-size-sm); }
    .drr-popup { padding: var(--space-xl); }
}