/* ============================================================
   SONDAX MEDICAL SERVICES — 20.sondax-medical.css
   Shared styles for medical category, subcategory, and detail pages.
   Page-specific styles are inline in their respective .ascx files.
   ============================================================ */

/* ---- BREADCRUMB ---- */
.st-med-bc { background: var(--color-muted-bg, #f8f9fa); border-bottom: 1px solid var(--color-border); }
.st-med-bc-inner { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--color-muted); padding: 12px 0; flex-wrap: wrap; }
.st-med-bc-inner a { color: var(--color-muted); text-decoration: none; }
.st-med-bc-inner a:hover { color: #0d9488; }
.st-med-bc-sep { color: var(--color-border); }

/* ---- TEAL COLOR THEME ---- */
:root {
    --color-medical: #0d9488;
    --color-medical-dark: #0b7a70;
    --color-medical-bg: rgba(13, 148, 136, 0.06);
    --color-medical-border: rgba(13, 148, 136, 0.2);
    --color-medical-deep: #0f4c75;
}

/* ---- SHARED CARD COMPONENTS ---- */
.st-med-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-xl); }
.st-med-section { margin-bottom: 40px; }
.st-med-section-title { font-size: 1.125rem; font-weight: 800; color: var(--color-text); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.st-med-section-title::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }

/* ---- TEAL BUTTON ---- */
.st-med-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: var(--color-medical); color: #fff; border: none; border-radius: var(--radius-lg); font-weight: 700; font-size: 0.9375rem; text-decoration: none; cursor: pointer; transition: background 0.2s, transform 0.2s; }
.st-med-btn:hover { background: var(--color-medical-dark); transform: translateY(-1px); }
.st-med-btn-outline { background: transparent; border: 2px solid var(--color-medical); color: var(--color-medical); }
.st-med-btn-outline:hover { background: var(--color-medical-bg); transform: translateY(-1px); }

/* ---- BADGE / CHIP ---- */
.st-med-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 100px; font-size: 0.75rem; font-weight: 600; }
.st-med-badge-teal { background: rgba(13, 148, 136, 0.1); border: 1px solid rgba(13, 148, 136, 0.25); color: #0d9488; }
.st-med-badge-blue { background: rgba(15, 76, 117, 0.1); color: #0f4c75; }
.st-med-badge-amber { background: rgba(245, 166, 35, 0.1); color: #b45309; }
.st-med-badge-red { background: rgba(220, 38, 38, 0.1); color: #dc2626; }

/* ---- CATEGORY PAGE: HOME GRID ---- */
.st-med-cats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }

/* ---- DETAIL PAGE LAYOUT ---- */
.st-med-d-layout { display: grid; grid-template-columns: 1fr 380px; gap: 40px; padding: 48px 0; align-items: start; }

/* ---- PROCESS STEPS ---- */
.st-med-process { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }

/* ---- INCLUDED ITEMS GRID ---- */
.st-med-included-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }

/* ---- FAQ ACCORDION ---- */
.st-med-faq-item { border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: 8px; overflow: hidden; }
.st-med-faq-q { padding: 16px 20px; font-weight: 700; font-size: 0.9375rem; color: var(--color-text); cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; user-select: none; }
.st-med-faq-q:hover { background: var(--color-muted-bg, #f8f9fa); }
.st-med-faq-icon { flex-shrink: 0; color: #0d9488; transition: transform 0.25s; }
.st-med-faq-item.open .st-med-faq-icon { transform: rotate(45deg); }
.st-med-faq-a { display: none; padding: 0 20px 16px; font-size: 0.875rem; color: var(--color-muted); line-height: 1.7; }
.st-med-faq-item.open .st-med-faq-a { display: block; }

/* ---- BOOKING SIDEBAR ---- */
.st-med-d-sidebar { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 20px; }
.st-med-booking-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 24px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07); }
.st-med-booking-field label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--color-text); margin-bottom: 5px; }
.st-med-booking-input { width: 100%; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 0.875rem; color: var(--color-text); background: var(--color-card); box-sizing: border-box; transition: border-color 0.2s; }
.st-med-booking-input:focus { outline: none; border-color: #0d9488; }
.st-med-booking-btn { width: 100%; padding: 14px; background: #0d9488; color: #fff; border: none; border-radius: var(--radius-lg); font-weight: 800; font-size: 1rem; cursor: pointer; transition: background 0.2s, transform 0.2s; }
.st-med-booking-btn:hover { background: #0b7a70; transform: translateY(-1px); }

/* ---- RESPONSIVE ---- */
@media (max-width: 1100px) {
    .st-med-d-layout { grid-template-columns: 1fr; }
    .st-med-d-sidebar { display: none; }
}

@media (max-width: 768px) {
    .st-med-d-layout { padding: 32px 0; }
    .st-med-process { grid-template-columns: repeat(2, 1fr); }
    .st-med-included-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .st-med-process { grid-template-columns: 1fr; }
}