/* ==========================================================================
   Rentorzo — Modern Theme Refresh
   Load this file LAST (after rz-design-system.css, rz-new-design.css,
   mobile-enhancements.css) on every page. It re-declares the shared design
   tokens (colors, spacing, radius, shadow, type) that the rest of the site
   already consumes via var(--rz-*) / var(--red) / var(--radius-*) etc, so a
   single file re-themes every page consistently — plus targeted polish for
   the component classes reused across templates (buttons, cards, section
   headers, breadcrumbs, forms, badges).
   ========================================================================== */

/* ---------- 1. Design tokens (refined palette / type / spacing) ---------- */
:root{
    /* Brand — slightly deeper, richer crimson with more contrast */
    --rz-red:          #DC2A2A;
    --rz-red-dark:     #A81F1F;
    --rz-red-light:    #FDEEEE;
    --red:             #DC2A2A;
    --red-dark:        #A81F1F;
    --red-soft:        #FDEEEE;
    --red-glow:        rgba(220,42,42,0.20);
    --primary:         #DC2A2A;
    --primary-dark:    #A81F1F;
    --accent:          #DC2A2A;
    --accent-dark:     #A81F1F;
    --accent-lt:       #FDEEEE;
    --gold:            #E8A93B;
    --success:         #1B8A55;
    --success-bg:      #E8F8EF;
    --success-bdr:     #B7EAD0;
    --danger:          #DC3545;

    /* Ink / neutrals — warmer, softer blacks */
    --rz-ink:          #16130F;
    --rz-ink-2:        #2E2A25;
    --rz-ink-3:        #5B564E;
    --rz-ink-4:        #948E83;
    --ink:             #16130F;
    --ink-mid:         #2E2A25;
    --ink-soft:        #5B564E;
    --dark:            #16130F;
    --dark-2:          #2E2A25;
    --charcoal:        #2E2A25;
    --text:            #5B564E;

    /* Surfaces */
    --rz-surface:      #FFFFFF;
    --rz-bg:           #F7F4EE;
    --rz-bg-2:         #EFEBE2;
    --white:           #FFFFFF;
    --bg:              #F7F4EE;
    --bg-card:         #FFFFFF;
    --cream:           #F7F4EE;
    --cream-2:         #EFEBE2;
    --gray-bg:         #F7F4EE;
    --gray-soft:       #EFEBE2;
    --stone-100:       #FBFAF7;
    --stone-200:       #F3F0E9;
    --stone-300:       #E6E0D3;
    --stone-400:       #CDC3AF;
    --stone-500:       #9C9280;
    --stone-600:       #6E6555;

    /* Borders */
    --rz-border:       rgba(22,19,15,0.09);
    --rz-border-md:    rgba(22,19,15,0.16);
    --border:          rgba(22,19,15,0.09);
    --gray-border:     rgba(22,19,15,0.14);

    /* Radius — a touch softer/larger for a friendlier feel */
    --rz-radius:       18px;
    --rz-radius-lg:    24px;
    --rz-radius-xl:    32px;
    --radius-sm:       12px;
    --radius-md:       18px;
    --radius-lg:       24px;
    --radius-xl:       32px;
    --r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px; --r-2xl: 42px;

    /* Shadows — softer, more diffused */
    --rz-shadow:       0 4px 20px rgba(22,19,15,0.06);
    --rz-shadow-lg:    0 14px 40px rgba(22,19,15,0.12);
    --shadow:          0 4px 20px rgba(22,19,15,0.06);
    --shadow-card:     0 4px 20px rgba(22,19,15,0.06);
    --sh-xs: 0 1px 3px rgba(22,19,15,0.05);
    --sh-sm: 0 3px 10px rgba(22,19,15,0.06);
    --sh-md: 0 8px 28px rgba(22,19,15,0.09);
    --sh-lg: 0 18px 50px rgba(22,19,15,0.13);
    --sh-xl: 0 28px 70px rgba(22,19,15,0.15);
    --sh-red: 0 10px 26px rgba(220,42,42,0.28);

    /* Motion */
    --rz-trans:        all 0.22s cubic-bezier(0.4,0,0.2,1);
    --transition:       .3s cubic-bezier(0.4,0,0.2,1);
    --ease:             cubic-bezier(0.4,0,0.2,1);
    --ease-bounce:      cubic-bezier(0.34,1.56,0.64,1);
    --t: 0.2s;

    /* Type */
    --font-display: 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
}

/* ---------- 2. Base ---------- */
html{ scroll-behavior: smooth; }
body{
    font-family: var(--font-body);
    color: var(--rz-ink-2);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{ font-family: var(--font-display); color: var(--rz-ink); letter-spacing: -0.01em; }
a{ transition: var(--rz-trans); }
::selection{ background: var(--rz-red); color: #fff; }
:focus-visible{ outline: 2px solid var(--rz-red); outline-offset: 2px; border-radius: 4px; }

/* slim modern scrollbar (desktop) */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: var(--rz-bg); }
::-webkit-scrollbar-thumb{ background: var(--stone-400); border-radius: 99px; border: 2px solid var(--rz-bg); }
::-webkit-scrollbar-thumb:hover{ background: var(--rz-ink-4); }

.container{ max-width: 1240px; }

img{ border-radius: 4px; }
.rz-no-radius, .no-radius{ border-radius: 0 !important; }

/* ---------- 3. Buttons ---------- */
.btn, .rz-btn, .btn-style2, button[class*="-btn"]:not(.rz-hdr-icon-btn):not(.rz-menu-close):not(.rz-ftr-top){
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 0.01em;
}
.btn-primary, .btn-style2, .rz-btn-primary, .rz-ftr-cta-btn, .rz-policy-info-cta{
    background: var(--rz-red) !important;
    border-color: var(--rz-red) !important;
    color: #fff !important;
    border-radius: 99px !important;
    box-shadow: var(--sh-sm);
    transition: var(--rz-trans);
}
.btn-primary:hover, .btn-style2:hover, .rz-btn-primary:hover, .rz-ftr-cta-btn:hover, .rz-policy-info-cta:hover{
    background: var(--rz-red-dark) !important;
    border-color: var(--rz-red-dark) !important;
    box-shadow: var(--sh-red);
    transform: translateY(-2px);
}
.btn-outline-primary, .rz-btn-outline{
    border-radius: 99px !important;
    border-color: var(--rz-red) !important;
    color: var(--rz-red) !important;
    background: transparent !important;
}
.btn-outline-primary:hover, .rz-btn-outline:hover{
    background: var(--rz-red) !important;
    color: #fff !important;
    transform: translateY(-2px);
}

/* ---------- 4. Section headers (used across most pages) ---------- */
.rz-section-header{ text-align: center; max-width: 640px; margin: 0 auto 8px; }
.rz-section-badge{
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--rz-red-light); color: var(--rz-red);
    font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 7px 16px; border-radius: 99px; margin-bottom: 14px;
}
.rz-section-title{
    font-family: var(--font-display); font-weight: 900;
    font-size: clamp(26px, 3.4vw, 38px);
    color: var(--rz-ink); margin: 0 0 12px; line-height: 1.15;
}
.rz-section-sub{ font-size: 15px; color: var(--rz-ink-3); line-height: 1.7; margin: 0; }

/* ---------- 5. Breadcrumb / hero banners ---------- */
.rz-breadcrumb-img{
    position: relative; padding: 64px 0 56px;
    background: linear-gradient(135deg, var(--rz-ink) 0%, var(--rz-ink-2) 100%);
    overflow: hidden;
}
.rz-breadcrumb-img::before{
    content:''; position:absolute; inset:0;
    background:
        radial-gradient(600px 300px at 15% 0%, rgba(220,42,42,0.22), transparent 60%),
        radial-gradient(500px 260px at 100% 100%, rgba(220,42,42,0.14), transparent 60%);
}
.rz-breadcrumb-overlay{ position:absolute; inset:0; background: rgba(0,0,0,0.06); }
.rz-breadcrumb-content{ position: relative; z-index: 2; display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.rz-breadcrumb-text h1{ color:#fff; font-size: clamp(28px, 4vw, 42px); font-weight:900; margin:0 0 8px; }
.rz-breadcrumb-text p{ color: rgba(255,255,255,0.65); font-size:15px; margin:0; }
.rz-breadcrumb-nav ul{ list-style:none; display:flex; align-items:center; gap:8px; margin:0; padding:0; font-size:13px; }
.rz-breadcrumb-nav a{ color: rgba(255,255,255,0.6); text-decoration:none; }
.rz-breadcrumb-nav a:hover{ color:#fff; }
.rz-breadcrumb-nav span{ color: rgba(255,255,255,0.85); font-weight:600; }
.rz-breadcrumb-nav li:not(:last-child)::after{ content:'/'; margin-left:8px; color: rgba(255,255,255,0.3); }
.rz-breadcrumb-nav li{ display:flex; align-items:center; }

/* ---------- 6. Cards ---------- */
.card, .rz-card, [class*="-card"]{
    border-radius: var(--radius-lg);
}
.rz-policy-link-card, .rz-card, .product-card, .rz-product-card{
    border-radius: var(--radius-lg) !important;
    border-color: var(--gray-border) !important;
    box-shadow: var(--sh-xs);
    transition: var(--rz-trans);
}
.rz-policy-link-card:hover, .rz-card:hover, .product-card:hover, .rz-product-card:hover{
    box-shadow: var(--sh-md) !important;
}

/* ---------- 7. Forms ---------- */
input, select, textarea, .form-control, .form-select{
    font-family: var(--font-body);
    border-radius: var(--radius-sm) !important;
    border-color: var(--rz-border-md) !important;
    transition: var(--rz-trans);
}
input:focus, select:focus, textarea:focus, .form-control:focus, .form-select:focus{
    border-color: var(--rz-red) !important;
    box-shadow: 0 0 0 4px var(--red-glow) !important;
}
label{ font-weight: 600; color: var(--rz-ink-2); }

/* ---------- 8. Badges / counters ---------- */
.badge, .rz-badge{
    border-radius: 99px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
}
.bg-danger, .badge-danger{ background: var(--rz-red) !important; }
.bg-success, .badge-success{ background: var(--success) !important; }

/* ---------- 9. Info / CTA banners (dark strip pattern) ---------- */
.rz-policy-info-banner, [class*="-info-banner"], [class*="-cta-banner"]{
    border-radius: var(--radius-lg) !important;
    background: linear-gradient(135deg, var(--rz-ink) 0%, var(--rz-ink-2) 100%) !important;
}

/* ---------- 10. Tables ---------- */
table{ border-radius: var(--radius-md); overflow: hidden; }
thead th{ font-weight: 700; color: var(--rz-ink-2); }

/* ---------- 11. Links inside prose ---------- */
main a:not(.btn):not([class*="-btn"]):not([class*="-cta"]){
    color: var(--rz-red);
}

/* ---------- 12. Motion polish ---------- */
a, button, .btn, [class*="-card"], [class*="-btn"]{
    -webkit-tap-highlight-color: transparent;
}

/* ---------- 13. Responsive tightening ---------- */
@media (max-width: 768px){
    .rz-breadcrumb-img{ padding: 44px 0 36px; }
    .rz-section-title{ font-size: 24px; }
    .container{ padding-left: 18px; padding-right: 18px; }
}

/* ---------- 14. Premium homepage & page-section polish ---------- */
body{
    background: linear-gradient(180deg, #fcfbf8 0%, var(--rz-bg) 100%);
}

.section-space,
.rz-category-section,
.rz-trending,
.rz-seo-section,
.rz-blog,
.rz-reviews,
.rz-brands,
.rz-contact-section,
.cat-page{
    padding: 72px 0;
}

.slider-content{ padding: 24px 0 0; }
.slider-content .container{ max-width: 1320px; }
.slider-image img{
    box-shadow: var(--sh-lg);
    border: 1px solid rgba(255,255,255,0.7);
}

.rz-service-strip{ padding: 10px 0 36px; }
.rz-service-strip-card{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 20px;
    background: var(--rz-surface);
    border: 1px solid var(--rz-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--sh-sm);
}
.rz-service-item{
    padding: 16px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--rz-bg) 0%, var(--rz-surface) 100%);
}
.rz-service-item strong{ display: block; font-size: 15px; color: var(--rz-ink); margin-bottom: 4px; }
.rz-service-item span{ color: var(--rz-ink-3); font-size: 13px; line-height: 1.55; }

.rz-category-section{
    padding-top: 56px;
    padding-bottom: 68px;
    background: linear-gradient(180deg, rgba(255,255,255,0.96), var(--rz-bg));
}
.rz-category-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
}
.rz-cat-card{
    background: var(--rz-surface);
    border: 1px solid var(--rz-border);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: var(--sh-xs);
    transition: var(--rz-trans);
}
.rz-cat-card:hover{
    transform: translateY(-6px);
    box-shadow: var(--sh-md);
    border-color: rgba(220,42,42,0.16);
}
.rz-cat-img-wrap{
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 16px;
    background: var(--rz-bg);
    margin-bottom: 12px;
}
.rz-cat-img-wrap img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.rz-cat-name{ font-weight: 700; color: var(--rz-ink); margin: 0; text-align: center; }

.tp-card{
    border-radius: var(--radius-xl);
    box-shadow: var(--sh-xs);
}
.tp-card-body{ padding: 18px 18px 20px; }
.tp-card-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    background: var(--rz-red-light);
    color: var(--rz-red);
    font-weight: 700;
    text-decoration: none;
}
.tp-card-btn:hover{ background: var(--rz-red); color: #fff; }

.rz-seo-card{
    background: linear-gradient(135deg, var(--rz-ink) 0%, #2b231f 100%);
    color: #fff;
    border-radius: var(--radius-xl);
    padding: clamp(24px, 4vw, 38px);
    box-shadow: var(--sh-lg);
}
.rz-seo-card h2,
.rz-seo-card h3,
.rz-seo-card h4{ color: #fff; }
.rz-seo-card p,
.rz-seo-card li{ color: rgba(255,255,255,0.78); }
.rz-seo-card a{ color: #fff; }
.rz-seo-img{ border-radius: var(--radius-lg); box-shadow: var(--sh-md); }

.rz-why-card,
.rz-blog-card,
.rz-info-card,
.rz-form-card,
.rz-side-blurb,
.rz-hours-card,
.stat-box,
.mission-card,
.why-card,
.location-card,
.cat-card,
.rz-contact-section .row > div > div{ 
    background: var(--rz-surface);
    border: 1px solid var(--rz-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--sh-xs);
}
.rz-why-card,
.rz-blog-card,
.rz-info-card,
.rz-form-card,
.rz-side-blurb,
.rz-hours-card,
.stat-box,
.mission-card,
.why-card,
.location-card{
    transition: var(--rz-trans);
}
.rz-why-card:hover,
.rz-blog-card:hover,
.rz-info-card:hover,
.rz-form-card:hover,
.rz-side-blurb:hover,
.rz-hours-card:hover,
.stat-box:hover,
.mission-card:hover,
.why-card:hover,
.location-card:hover{
    transform: translateY(-4px);
    box-shadow: var(--sh-md);
    border-color: rgba(220,42,42,0.14);
}
.rz-why-card{ padding: 24px; height: 100%; }
.rz-why-icon{ width: 54px; height: 54px; border-radius: 16px; margin-bottom: 14px; display: grid; place-items: center; background: var(--rz-red-light); overflow: hidden; }
.rz-why-icon img{ width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 12px; }
.rz-why-card h5{ font-size: 18px; margin: 0 0 8px; color: var(--rz-ink); }
.rz-why-card p{ color: var(--rz-ink-3); margin: 0; line-height: 1.7; }

.rz-blog-card{ overflow: hidden; height: 100%; }
.rz-blog-img img{ width: 100%; height: 220px; object-fit: cover; display: block; }
.rz-blog-body{ padding: 20px; }
.rz-blog-title{ font-size: 18px; font-weight: 700; color: var(--rz-ink); margin-bottom: 8px; }
.rz-blog-excerpt{ color: var(--rz-ink-3); line-height: 1.7; }
.rz-blog-btn{ color: var(--rz-red); font-weight: 700; text-decoration: none; }

.rz-reviews{ padding-bottom: 56px; }
.rentorzo-google-review-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: 999px;
    background: var(--rz-red);
    color: #fff;
    font-weight: 700;
    box-shadow: var(--sh-sm);
}
.rentorzo-google-review-btn:hover{ color:#fff; background: var(--rz-red-dark); transform: translateY(-2px); }

.hero,
.rz-hero{
    position: relative;
    padding: 84px 0 68px;
    background: linear-gradient(135deg, var(--rz-ink) 0%, #221d17 100%);
    overflow: hidden;
    color: #fff;
}
.hero::before,
.rz-hero::before{
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(360px 260px at 100% -10%, rgba(220,42,42,0.22), transparent 70%),
        radial-gradient(320px 240px at 0% 110%, rgba(255,255,255,0.08), transparent 70%);
    pointer-events: none;
}
.hero .container,
.rz-hero .container{ position: relative; z-index: 1; }
.hero h1,
.rz-hero h1{
    color: #fff;
    font-size: clamp(32px, 4.4vw, 48px);
    line-height: 1.12;
    margin: 0 0 12px;
}
.hero p,
.rz-hero p{ color: rgba(255,255,255,0.76); font-size: 16px; max-width: 720px; line-height: 1.7; }
.section-label{ display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.16); color: #fff; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; }

.about-grid,
.location-card{ display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: start; }
.about-images{ display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 16px; }
.about-images .big{ grid-row: span 2; }
.about-images img,
.location-card iframe{
    width: 100%;
    display: block;
    border-radius: var(--radius-lg);
    object-fit: cover;
    box-shadow: var(--sh-sm);
}
.stats-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.stat-number{ font-size: 28px; font-weight: 800; color: var(--rz-red); line-height: 1; margin-bottom: 6px; }
.stat-text{ color: var(--rz-ink-3); font-weight: 600; }
.why-grid,
.mission-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.mission-card{ padding: 24px; }
.mission-card .icon{ font-size: 28px; margin-bottom: 10px; }
.location-card{ padding: 24px; }
.location-card iframe{ min-height: 320px; border: 0; }

.rz-contact-section{ padding-top: 70px; padding-bottom: 80px; }
.rz-info-card{ display: flex; gap: 14px; padding: 22px; align-items: flex-start; }
.rz-info-icon{ width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--rz-red-light); color: var(--rz-red); flex-shrink: 0; }
.rz-info-content strong{ display: block; color: var(--rz-ink); margin-bottom: 4px; }
.rz-info-content span,
.rz-info-content a{ color: var(--rz-ink-3); text-decoration: none; }
.rz-info-content a:hover{ color: var(--rz-red); }
.rz-form-card{ padding: 28px; }
.rz-form-title{ font-size: 24px; font-weight: 800; margin-bottom: 8px; color: var(--rz-ink); }
.rz-form-sub{ color: var(--rz-ink-3); margin-bottom: 20px; }
.rz-form-group{ margin-bottom: 16px; }
.rz-form-control{ min-height: 48px; border-radius: 14px !important; }
.rz-submit-btn{ display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; border: 0; background: var(--rz-red); color: #fff; font-weight: 700; }
.rz-submit-btn:hover{ background: var(--rz-red-dark); color:#fff; }
.rz-map-wrap iframe{ width:100%; min-height:320px; border:0; border-radius: var(--radius-xl); box-shadow: var(--sh-sm); }

.cat-header{ display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:28px; }
.cat-title{ font-size: clamp(24px, 3vw, 32px); font-weight: 800; color: var(--rz-ink); margin: 0; }
.cat-count{ color: var(--rz-red); font-weight: 700; white-space: nowrap; }
.cat-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.cat-card{ display: block; text-decoration: none; color: inherit; overflow: hidden; }
.cat-card-img{ aspect-ratio: 4 / 3; overflow: hidden; background: var(--rz-bg); }
.cat-card-img img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .3s ease; }
.cat-card:hover .cat-card-img img{ transform: scale(1.04); }
.cat-card-body{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 18px; }
.cat-card-name{ font-size: 17px; font-weight: 700; color: var(--rz-ink); margin:0; }
.cat-card-sub{ color: var(--rz-ink-4); font-size: 13px; margin-top: 4px; }
.cat-card-cta{ width: 40px; height: 40px; border-radius: 50%; background: var(--rz-red-light); color: var(--rz-red); display:grid; place-items:center; flex-shrink:0; }

@media (max-width: 991px){
    .rz-service-strip-card{ grid-template-columns: 1fr; }
    .about-grid,
    .location-card,
    .why-grid,
    .mission-grid{ grid-template-columns: 1fr; }
    .stats-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px){
    .section-space,
    .rz-category-section,
    .rz-trending,
    .rz-seo-section,
    .rz-blog,
    .rz-reviews,
    .rz-brands,
    .rz-contact-section,
    .cat-page{ padding: 56px 0; }
    .rz-service-strip{ padding-bottom: 24px; }
    .about-images{ grid-template-columns: 1fr; }
    .about-images .big{ grid-row: auto; }
    .stats-grid{ grid-template-columns: 1fr; }
    .cat-header{ flex-direction: column; align-items: flex-start; }
}