/* =========================================================
   contact-page.css
   ========================================================= */
.sb-contact-section { padding: var(--sb-space-16) 0 var(--sb-space-24); background: var(--sb-lighter); }

.sb-contact-grid {
    display: grid; grid-template-columns: 1fr 420px; gap: var(--sb-space-10); align-items: start;
}

.sb-contact-form-col h2 { font-size: var(--sb-text-3xl); margin-bottom: var(--sb-space-2); }
.sb-contact-form-col > p { color: var(--sb-muted); margin-bottom: var(--sb-space-8); }

.sb-contact-form {
    background: var(--sb-white); border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-lg); padding: var(--sb-space-8);
    box-shadow: var(--sb-shadow-sm); display: flex; flex-direction: column; gap: var(--sb-space-5);
}

/* WhatsApp card */
.sb-contact-wa-card {
    background: linear-gradient(135deg, #075E54, #128C7E);
    border-radius: var(--sb-radius-lg); padding: var(--sb-space-8);
    text-align: center; color: var(--sb-white); margin-bottom: var(--sb-space-5);
}
.sb-contact-wa-card .sb-icon--xl { width: 52px; height: 52px; margin: 0 auto var(--sb-space-3); color: #25D366; }
.sb-contact-wa-card h3 { color: var(--sb-white); font-size: var(--sb-text-xl); margin-bottom: var(--sb-space-2); }
.sb-contact-wa-card p { color: rgba(255,255,255,.8); font-size: var(--sb-text-sm); line-height: 1.7; margin-bottom: var(--sb-space-5); }

.sb-btn--whatsapp-solid {
    background: #25D366; color: var(--sb-white); border-color: #25D366;
    padding: .7rem 1.5rem; font-size: var(--sb-text-sm);
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sb-space-2);
    border-radius: var(--sb-radius-sm); font-weight: var(--sb-fw-semibold);
    text-decoration: none; transition: var(--sb-transition-fast); width: 100%;
}
.sb-btn--whatsapp-solid:hover { background: #20BD5A; color: var(--sb-white); }

/* Contact details list */
.sb-contact-details { display: flex; flex-direction: column; gap: var(--sb-space-4); margin-bottom: var(--sb-space-5); }
.sb-contact-details li { display: flex; align-items: flex-start; gap: var(--sb-space-3); }
.sb-contact-details .sb-icon--contact { color: var(--sb-primary); margin-top: 2px; }
.sb-contact-details div { display: flex; flex-direction: column; gap: 2px; }
.sb-contact-details strong { font-size: var(--sb-text-sm); font-weight: var(--sb-fw-semibold); color: var(--sb-dark); }
.sb-contact-details a, .sb-contact-details span { font-size: var(--sb-text-sm); color: var(--sb-muted); }
.sb-contact-details a:hover { color: var(--sb-primary); }

.sb-contact-hours {
    background: var(--sb-primary-light); border-radius: var(--sb-radius-sm);
    padding: var(--sb-space-4); display: flex; flex-direction: column; gap: 4px;
}
.sb-contact-hours strong { font-size: var(--sb-text-sm); color: var(--sb-primary); font-weight: var(--sb-fw-bold); }
.sb-contact-hours span { font-size: var(--sb-text-xs); color: var(--sb-dark-3); }

@media (max-width: 1024px) { .sb-contact-grid { grid-template-columns: 1fr; } }

/* ── Shared enquiry form fields (contact + any future embeds) ── */
.sb-form-group {
    display:        flex;
    flex-direction: column;
    gap:            var(--sb-space-2);
}

.sb-form-label {
    font-size:   var(--sb-text-sm);
    font-weight: var(--sb-fw-semibold);
    color:       var(--sb-dark-2);
}
.sb-form-label .required { color: #EF4444; }

.sb-form-input {
    width:         100%;
    padding:       0.65rem 0.875rem;
    font-family:   var(--sb-font);
    font-size:     var(--sb-text-sm);
    font-weight:   var(--sb-fw-regular);
    color:         var(--sb-dark-2);
    background:    var(--sb-lighter);
    border:        1.5px solid var(--sb-border);
    border-radius: var(--sb-radius-sm);
    outline:       none;
    transition:    border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
}
.sb-form-input:focus {
    border-color: var(--sb-primary);
    background:   var(--sb-white);
    box-shadow:   0 0 0 3px var(--sb-primary-ring);
}
.sb-form-input::placeholder { color: var(--sb-muted-light); }
.sb-form-input.sb-input-error { border-color: #EF4444; }

.sb-select-wrap {
    position: relative;
}
.sb-form-select {
    width:         100%;
    padding:       0.65rem 2.5rem 0.65rem 0.875rem;
    font-family:   var(--sb-font);
    font-size:     var(--sb-text-sm);
    color:         var(--sb-dark-2);
    background:    var(--sb-lighter);
    border:        1.5px solid var(--sb-border);
    border-radius: var(--sb-radius-sm);
    outline:       none;
    -webkit-appearance: none;
    appearance:    none;
    cursor:        pointer;
    transition:    border-color 0.2s, box-shadow 0.2s;
}
.sb-form-select:focus {
    border-color: var(--sb-primary);
    background:   var(--sb-white);
    box-shadow:   0 0 0 3px var(--sb-primary-ring);
}
.sb-select-arrow {
    position:       absolute;
    right:          12px;
    top:            50%;
    transform:      translateY(-50%);
    pointer-events: none;
    color:          var(--sb-muted);
}

.sb-radio-group {
    display:        flex;
    flex-direction: column;
    gap:            var(--sb-space-2);
}

.sb-radio-label {
    display:       flex;
    align-items:   center;
    gap:           var(--sb-space-3);
    font-size:     var(--sb-text-sm);
    color:         var(--sb-dark-2);
    cursor:        pointer;
    user-select:   none;
    padding:       0.55rem 0.75rem;
    border:        1.5px solid var(--sb-border);
    border-radius: var(--sb-radius-sm);
    transition:    var(--sb-transition-fast);
}
.sb-radio-label:hover {
    border-color: var(--sb-primary-mid);
    background:   var(--sb-primary-light);
}

.sb-radio-input {
    position: absolute;
    opacity:  0;
    width:    0;
    height:   0;
}

.sb-radio-custom {
    width:         18px;
    height:        18px;
    border:        2px solid var(--sb-border);
    border-radius: 50%;
    background:    var(--sb-white);
    flex-shrink:   0;
    transition:    border-color 0.2s, background 0.2s;
    display:       flex;
    align-items:   center;
    justify-content: center;
}
.sb-radio-input:checked + .sb-radio-custom {
    border-color: var(--sb-primary);
    background:   var(--sb-primary);
    box-shadow:   inset 0 0 0 3px var(--sb-white);
}
.sb-radio-input:checked ~ span { color: var(--sb-primary); font-weight: var(--sb-fw-semibold); }
.sb-radio-label:has(.sb-radio-input:checked) {
    border-color: var(--sb-primary);
    background:   var(--sb-primary-light);
}

.sb-phone-input {
    display:   flex;
    gap:       0;
    border:    1.5px solid var(--sb-border);
    border-radius: var(--sb-radius-sm);
    overflow:  hidden;
    background: var(--sb-lighter);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.sb-phone-input:focus-within {
    border-color: var(--sb-primary);
    background:   var(--sb-white);
    box-shadow:   0 0 0 3px var(--sb-primary-ring);
}

.sb-phone-code {
    display:      flex;
    align-items:  center;
    gap:          var(--sb-space-1);
    padding:      0.65rem 0.75rem;
    font-size:    var(--sb-text-sm);
    font-weight:  var(--sb-fw-semibold);
    color:        var(--sb-dark-2);
    background:   var(--sb-light);
    border-right: 1.5px solid var(--sb-border);
    white-space:  nowrap;
    flex-shrink:  0;
}

.sb-form-input--phone {
    border:        none;
    border-radius: 0;
    background:    transparent;
    flex:          1;
    min-width:     0;
}
.sb-form-input--phone:focus {
    box-shadow: none;
}

.sb-form-error {
    font-size:  var(--sb-text-xs);
    color:      #EF4444;
    min-height: 16px;
    display:    block;
}

.sb-form-privacy {
    font-size:  var(--sb-text-xs);
    color:      var(--sb-muted);
    text-align: center;
    margin-top: calc(-1 * var(--sb-space-2));
}
.sb-form-privacy a {
    color: var(--sb-primary);
    text-decoration: underline;
}

.sb-form-success {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-direction:  column;
    gap:             var(--sb-space-3);
    text-align:      center;
    padding:         var(--sb-space-6) 0;
    color:           var(--sb-accent-green);
    font-size:       var(--sb-text-base);
}

@media (max-width: 768px) {
    .sb-contact-form { padding: var(--sb-space-6); gap: var(--sb-space-4); }
    .sb-radio-group { gap: var(--sb-space-2); }
}