/*
  Radheshyam Steel Works — components.css
  Buttons, Cards, Navbar, Footer, Badges, Forms
*/

/* ── Buttons ── */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 14px 28px; border-radius: var(--radius);
    font-weight: 600; cursor: pointer; transition: var(--transition);
    border: none; gap: 8px; font-family: var(--font-main); font-size: 0.95rem;
}
.btn-primary { background-color: var(--accent); color: #fff; }
.btn-primary:hover { background-color: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(249,115,22,0.35); }
.btn-outline { background-color: transparent; border: 1px solid var(--border); color: var(--text-heading); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-whatsapp { background-color: #25D366; color: #fff; border: none; }
.btn-whatsapp:hover { background-color: #1ebe57; transform: translateY(-2px); }
.w-100 { width: 100%; }

/* ── Navbar ── */
header {
    position: fixed; top: 0; left: 0; width: 100%;
    background-color: transparent; z-index: 1000;
    transition: var(--transition); padding: 20px 0;
}
header.scrolled {
    background-color: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08); padding: 12px 0;
}
.navbar { display: flex; justify-content: space-between; align-items: center; }

.logo img {
    height: 55px; width: auto; object-fit: contain;
    transition: var(--transition);
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}
header.scrolled .logo img { height: 48px; filter: none; }

.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a {
    font-weight: 600; color: #fff; font-size: 0.92rem;
    position: relative; padding: 5px 0; transition: var(--transition);
}
header.scrolled .nav-links a { color: var(--text-heading); }
.nav-links a.active, .nav-links a:hover { color: var(--accent); }
header.scrolled .nav-links a.active,
header.scrolled .nav-links a:hover { color: var(--accent); }
.nav-links a::after {
    content: ''; position: absolute; bottom: 0; left: 0;
    width: 0; height: 2px; background-color: var(--accent);
    transition: width 0.3s ease;
}
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-cta { display: flex; gap: 10px; align-items: center; }

.mobile-toggle {
    display: none; font-size: 1.6rem; cursor: pointer;
    color: #fff; z-index: 1001; transition: var(--transition);
}
header.scrolled .mobile-toggle { color: var(--text-heading); }

/* ── Cards ── */
.card {
    background: #fff; padding: 38px; border-radius: var(--radius);
    border: 1px solid var(--border); transition: var(--transition);
}
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); border-color: var(--accent); }
.card-icon { font-size: 2.5rem; color: var(--accent); margin-bottom: 20px; }
.card h3 { margin-bottom: 12px; }

/* ── Product Cards ── */
.product-card {
    background: #fff; border-radius: var(--radius); border: 1px solid var(--border);
    overflow: hidden; transition: var(--transition);
}
.product-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); }
.product-img { height: 280px; width: 100%; overflow: hidden; }
.product-img img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); }
.product-card:hover .product-img img { transform: scale(1.08); }
.product-info { padding: 28px; }
.product-info h3 { margin-bottom: 8px; font-size: 1.4rem; }

/* ── Project Cards ── */
.project-card-container {
    position: relative; border-radius: var(--radius); overflow: hidden;
    aspect-ratio: 4/3; box-shadow: var(--shadow);
}
.project-card-container img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.project-overlay {
    position: absolute; bottom: 0; left: 0; width: 100%; padding: 28px;
    background: linear-gradient(transparent, rgba(17,24,39,0.92));
    color: #fff; transform: translateY(20px); opacity: 0; transition: var(--transition);
}
.project-card-container:hover img { transform: scale(1.08); }
.project-card-container:hover .project-overlay { transform: translateY(0); opacity: 1; }
.project-overlay h3 { color: #fff; margin-bottom: 5px; }
.project-overlay span { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent); }

/* ── Review Cards ── */
.review-card .stars { font-size: 1.2rem; margin-bottom: 15px; }
.review-card .reviewer { margin-top: 20px; }
.review-card .reviewer strong { color: var(--text-heading); }
.review-card .reviewer small { opacity: 0.7; }

/* ── Trust Badges ── */
.trust-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 25px; }
.trust-badge {
    background: rgba(249,115,22,0.08); color: var(--accent);
    padding: 9px 18px; border-radius: 50px; font-weight: 700; font-size: 0.85rem;
    display: flex; align-items: center; gap: 8px; border: 1px solid rgba(249,115,22,0.2);
}

/* ── Feature List ── */
.feature-list { margin: 18px 0; padding: 0; }
.feature-list li { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 0.9rem; }
.feature-list li i { color: #10B981; }

/* ── Feature Highlight Cards ── */
.feature-highlights-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }
.feature-highlight-card {
    background: #fff; padding: 30px; border-radius: var(--radius);
    text-align: center; border: 1px solid var(--border); transition: var(--transition);
}
.feature-highlight-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); border-color: var(--accent); }
.feature-highlight-card i { font-size: 2.4rem; color: var(--accent); margin-bottom: 18px; }

/* ── Forms ── */
.form-group { margin-bottom: 22px; }
.form-group label { display: block; margin-bottom: 7px; font-weight: 600; color: var(--text-heading); font-size: 0.9rem; }
.form-control {
    width: 100%; padding: 14px 16px; border-radius: 8px; border: 1px solid var(--border);
    font-family: inherit; font-size: 0.95rem; transition: var(--transition); background: #fff;
}
.form-control:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(249,115,22,0.1); }

/* ── Contact ── */
.contact-wrapper { display: grid; grid-template-columns: 1fr 1.5fr; gap: 70px; }
.contact-info-card { background: var(--bg-secondary); padding: 40px; border-radius: var(--radius); }
.contact-method { display: flex; gap: 18px; margin-bottom: 28px; align-items: flex-start; }
.contact-method i {
    font-size: 1.3rem; color: var(--accent); background: #fff;
    width: 48px; height: 48px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; box-shadow: var(--shadow); flex-shrink: 0;
}

/* ── Process Steps ── */
.process-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px; position: relative; margin-top: 50px;
}
.step-num {
    width: 60px; height: 60px; background: #fff; border: 2px solid var(--accent);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    margin: 0 auto 15px; font-size: 1.4rem; font-weight: 800;
    color: var(--accent); box-shadow: var(--shadow); transition: var(--transition);
}
.process-step:hover .step-num { background: var(--accent); color: #fff; transform: scale(1.1); }

/* ── Tabs ── */
.tabs-container { display: flex; justify-content: center; gap: 12px; margin-bottom: 50px; flex-wrap: wrap; }
.tab-btn {
    padding: 10px 22px; background: #fff; border: 1px solid var(--border);
    border-radius: 50px; cursor: pointer; font-weight: 600;
    color: var(--text-body); transition: var(--transition);
    font-family: var(--font-main); font-size: 0.9rem;
}
.tab-btn:hover, .tab-btn.active {
    background: var(--accent); color: #fff; border-color: var(--accent);
    box-shadow: 0 5px 15px rgba(249,115,22,0.25);
}

/* ── Owner Section ── */
.owner-grid {
    display: grid; grid-template-columns: 1fr 2fr; gap: 60px;
    align-items: center; background: #fff; padding: 60px;
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.owner-img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 1/1.2; }
.owner-img img { width: 100%; height: 100%; object-fit: cover; }

/* ── CTA Standard ── */
.cta-standard {
    background-color: var(--text-heading); color: #fff; text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.cta-standard h2 { color: #fff; }
.cta-standard .btn-outline { color: #fff; border-color: rgba(255,255,255,0.3); }
.cta-standard .btn-outline:hover { background-color: rgba(255,255,255,0.1); color: #fff; }

/* ── Custom CTA Block ── */
.custom-cta-block {
    background: var(--bg-secondary); padding: 60px; border-radius: var(--radius);
    text-align: center; border-left: 5px solid var(--accent);
}

/* ── Footer ── */
footer { background-color: var(--text-heading); color: #fff; padding: 80px 0 20px; }
.footer-logo {
    height: 55px; background: #fff; padding: 8px 14px; border-radius: 8px;
    margin-bottom: 20px; display: inline-block; object-fit: contain; transition: var(--transition);
}
.footer-logo:hover { transform: translateY(-3px); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 45px; margin-bottom: 50px; }
.footer-col h4 { color: #fff; margin-bottom: 20px; font-size: 1.1rem; }
.footer-col p { opacity: 0.7; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { opacity: 0.7; font-size: 0.9rem; }
.footer-links a:hover { opacity: 1; color: var(--accent); }
.footer-bottom {
    text-align: center; padding-top: 25px; border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.85rem; opacity: 0.5;
}

/* ── WhatsApp Float ── */
.whatsapp-float {
    position: fixed; bottom: 30px; right: 30px; background-color: #25D366;
    color: #fff; width: 62px; height: 62px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 2rem;
    box-shadow: 0 6px 20px rgba(37,211,102,0.4); z-index: 999; transition: var(--transition);
}
.whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 10px 30px rgba(37,211,102,0.5); }

/* ── Sticky Mobile CTA ── */
.sticky-mobile-cta {
    position: fixed; bottom: 0; left: 0; width: 100%;
    display: none; grid-template-columns: repeat(3, 1fr);
    z-index: 1050; box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
}
.sticky-mobile-cta a { flex:1; text-align:center; padding:15px 5px; color:#fff; text-decoration:none; font-weight:700; font-size:1rem; display:flex; align-items:center; justify-content:center; gap:8px; }
.sticky-mobile-cta a i { font-size: 1.2rem; }
.sticky-mobile-cta a:nth-child(2) { background: #25D366; }
.sticky-mobile-cta a:nth-child(3) { background: var(--accent); }

@media (max-width: 768px) {
    .sticky-mobile-cta { display: grid; }
    body { padding-bottom: 70px !important; }
}