/* * SA Coating - COMBO PAGE STYLES (Service + City)
 * Focus: Local Relevance, high conversion, dynamic text
 */

/* --- 1. LOCAL HERO --- */
.combo-hero {
    background-color: #0f1115;
    padding: 140px 0 100px;
    position: relative;
    overflow: hidden;
}
.location-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.1); 
    border: 1px solid rgba(255,255,255,0.2);
    padding: 8px 16px; border-radius: 50px;
    color: var(--accent); font-family: var(--font-mono); 
    font-size: 0.85rem; font-weight: 700; letter-spacing: 1px;
}

/* --- 2. LOCAL CONTEXT BOX --- */
.local-context-box {
    background: #fff;
    border: 1px solid #eee;
    padding: 40px;
    border-radius: 8px;
    border-left: 5px solid var(--secondary);
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.local-context-box::after {
    content: '\f3c5'; /* Map Marker Icon */
    font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; right: -20px; bottom: -20px;
    font-size: 150px; color: rgba(0,0,0,0.03);
    z-index: 0;
}
.context-content { position: relative; z-index: 1; }

/* --- 3. PINCODE CLOUD --- */
.pincode-wrapper {
    background: #f8f9fa;
    padding: 30px;
    border-radius: 8px;
    border: 1px dashed #ccc;
}
.pincode-tag {
    display: inline-block;
    background: white;
    border: 1px solid #e0e0e0;
    padding: 8px 15px;
    margin: 0 5px 10px 0;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: #555;
    transition: 0.2s;
    cursor: default;
}
.pincode-tag:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

/* --- 4. DYNAMIC HIGHLIGHTS --- */
.highlight-city { color: var(--secondary); font-weight: 700; }
.highlight-service { color: var(--primary); font-weight: 700; }

/* --- 5. COMPARISON TABLE (Local) --- */
.local-comparison-table th { background: var(--dark); color: white; border: none; padding: 15px; }
.local-comparison-table td { border-bottom: 1px solid #eee; padding: 15px; vertical-align: middle; }
.cell-feature { font-weight: 700; color: var(--dark); width: 30%; }
.cell-us { background: rgba(0, 174, 239, 0.05); color: var(--primary-dark); font-weight: 700; border-left: 2px solid var(--primary); }
.cell-others { color: #888; font-style: italic; }

/* --- 6. URGENCY BANNER --- */
.urgency-banner {
    background: linear-gradient(45deg, var(--secondary), #c41219);
    color: white;
    padding: 15px;
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .local-context-box { padding: 25px; }
    .location-badge { width: 100%; justify-content: center; }
}