/* Responsive CSS for the School Profile Page */

/* Container: Add padding and stack vertically on small screens */
.nav-tabs .nav-link.active { background: #2246d2; color: #fff !important; }
        .nav-tabs .nav-link { color: #2246d2; font-weight: 500; }
        .tab-content>.tab-pane { padding: 16px 0; }
        .school-section-card { background: #fafbfc; border-radius: 10px; padding: 18px 18px 10px 18px; margin-bottom: 18px; border: 1px solid #f1f1f1; }
        .school-section-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 12px; }
        .school-section-list { list-style: none; padding-left: 0; margin: 0; }
        .school-section-list li { padding: 3px 0 3px 18px; position: relative; color: #333; }
        .school-section-list li:before { content: ''; display: inline-block; width:7px; height:7px; border-radius: 50%; background: #2246d2; position: absolute; left: 0; top: 10px; }
        .school-hours-list li:before { background: #28a745; }
        .school-facility-group { font-weight: 500; color: #2246d2; margin-bottom: 6px; }
        .nearby-list { list-style:none; padding:0; margin:0; }
        .nearby-list li { display:flex; gap:10px; align-items:center; margin-bottom:18px; }
        .nearby-logo { width:36px; height:36px; border-radius:7px; object-fit:cover; }
        .nearby-school-name { font-weight:500; color:#333; font-size:1.09em; }
        .nearby-distance { font-size:0.96em; color:#888; margin-left: 7px; }
                body { background: #fcfcfc; }
        .school-main-container {
            max-width:1200px;
            margin: 0 auto;
            display: flex;
            gap: 32px;
            padding: 32px 0;
        }
        .school-main-left {
            flex: 2 2 0;
            background: #fff;
            border-radius: 14px;
            box-shadow: 0 2px 16px #0001;
            padding: 32px 32px 16px 32px;
        }
        .school-main-right {
            flex: 1 1 0;
            background: #fff;
            border-radius: 14px;
            box-shadow: 0 2px 16px #0001;
            padding: 24px 20px 12px 20px;
            min-width:270px;
        }
        .school-logo { width: 100px; height: 72px; border-radius: 10px; object-fit: cover; }
        .school-hdr-title { font-size: 2.1rem; font-weight: 700; }
        .school-hdr-row { display: flex; gap: 18px; align-items:center; }
        .school-badges span {
            padding: 3px 12px;
            border-radius: 7px;
            background: #ffb70b;
            color: #ffffff;
            font-size: 0.98em;
            margin-right: 8px;
        }
        .school-section-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 12px;
            margin-top: 28px;
        }
        .school-section-card {
            background: #fafbfc;
            border-radius: 10px;
            padding: 18px 18px 10px 18px;
            margin-bottom: 18px;
            border: 1px solid #f1f1f1;
        }
        .school-section-list {
            list-style: none;
            padding-left: 0;
            margin: 0;
        }
        .school-section-list li {
            padding: 3px 0 3px 18px;
            position: relative;
            color: #333;
        }
        .school-section-list li:before {
            content: '';
            display: inline-block;
            width:7px; height:7px;
            border-radius: 50%;
            background: #2246d2;
            position: absolute;
            left: 0; top: 10px;
        }
        .school-hours-list li:before {
            background: #28a745;
        }
        .school-facility-group {
            font-weight: 500;
            color: #2246d2;
            margin-bottom: 6px;
        }
        .nearby-list { list-style:none; padding:0; margin:0; }
        .nearby-list li { display:flex; gap:10px; align-items:center; margin-bottom:18px; }
        .nearby-logo { width:36px; height:36px; border-radius:7px; object-fit:cover; }
        .nearby-school-name { font-weight:500; color:#333; font-size:1.09em; }
        .nearby-distance { font-size:0.96em; color:#888; margin-left: 7px; }
        .enquiry-btn {
            margin: 28px auto 0 auto;
            display: block;
            font-weight: 700;
            background: #2246d2;
            color: #fff;
            border-radius: 25px;
            padding: 12px 38px;
            border: none;
            font-size: 1.13em;
            transition: background .14s;
        }
        .enquiry-btn:hover {
            background: #fed34d;
            color: #2246d2;
        }
        .modal-header { border-bottom: 1px solid #e8e9f1; }
        .modal-footer { border-top: 1px solid #e8e9f1; }
        .form-label { font-weight: 600; }
        .form-control:focus {
            border-color: #2246d2;
            box-shadow: 0 0 0 0.2rem rgba(34,70,210,0.08);
        }
        .enquiry-success {
            color: #16a34a;
            font-weight: 600;
            margin-bottom: 1rem;
        }
        .enquiry-error {
            color: #dc2626;
            font-weight: 600;
            margin-bottom: 1rem;
        }
        .ad-slot img { border-radius: 10px; box-shadow: 0 1px 8px #0001; margin: 0 auto; display: block;}
        .ad-label { font-size:0.94em; color:#665; margin: 4px 0 10px 0; display:block; text-align:center;}
        @media(max-width:900px) {
            .school-main-container { flex-direction:column; padding:18px 0; }
            .school-main-left, .school-main-right { padding:16px 8px; }
        }
        
        .nearby-list { list-style: none; padding: 0; margin: 0; border-radius: 9px; background: #f6f7fb; box-shadow: 0 1px 8px rgba(60,60,60,0.07);}
        .nearby-list li { display: flex; align-items: center; padding: 13px 18px; border-bottom: 1px solid #ececf3; transition: background 0.15s;}
        .nearby-list li:last-child { border-bottom: none;}
        .nearby-list li:hover { background: #e6e9f5;}
        .nearby-logo { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; background: #fff; border: 1px solid #e2e2e2; margin-right: 15px; box-shadow: 0 1px 4px #dedede44;}
        .nearby-school-name { font-weight: 600; font-size: 1.06em; color: #2a2f4f; flex: 1; transition: color 0.13s;}
        .nearby-school-name a { color: inherit; text-decoration: none; transition: color 0.1s;}
        .nearby-school-name a:hover { color: #7952b3; text-decoration: underline;}
        .nearby-distance { font-size: 0.97em; color: #fff; background: #7952b3; border-radius: 6px; padding: 4px 12px; margin-left: 14px; font-weight: 500; min-width: 54px; text-align: center; box-shadow: 0 1px 3px #00000010; letter-spacing: 0.01em;}
        .mb-2[style*="font-weight:500;"] { font-weight: 600 !important; font-size: 1.18rem; color: #2a2f4f; letter-spacing: 0.01em; background: linear-gradient(90deg, #f6f7fb 60%, #e9e3fa 100%); padding: 10px 18px 10px 12px; border-radius: 7px; margin-bottom: 14px !important; box-shadow: 0 1px 8px rgba(60,60,60,0.07); display: inline-block;}
        .school-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.school-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 7px;
    background: #ffb70b;
    color: #fff;
    font-size: 0.98em;
    margin-right: 0; /* Remove old margin */
    margin-bottom: 6px;
    white-space: nowrap;
}

/* Responsive for mobile */
@media (max-width: 575.98px) {
    .school-hdr-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px;
    }
    .school-badges {
        gap: 6px;
    }
    .school-badge {
        font-size: 14px;
        padding: 7px 12px;
    }
      .school-logo { border-radius: 10px; object-fit: cover; }
}
.school-social-links {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 10px;
}
.school-social-link {
    font-size: 1.5em;
    display: flex;
    align-items: center;
    transition: opacity 0.2s, filter 0.2s;
}
.school-social-link.facebook   { color: #3b5998; }
.school-social-link.instagram { color: #C13584; }
.school-social-link.youtube   { color: #FF0000; }
.school-social-link.disabled {
    opacity: 0.4;
    pointer-events: none;
    filter: grayscale(70%);
}

/* Responsive: reduce icon size and gap on small screens */
@media (max-width: 600px) {
    .school-social-links {
        gap: 9px;
        justify-content: flex-start;
    }
    .school-social-link {
        font-size: 1.1em;
    }
}
.school-logo {
    width: 90px;
    height: 90px;
    border-radius: 14px;
    object-fit: cover;
    border: 2px solid #f2f2f2;
    background: #fff;
    box-shadow: 0 1px 6px #dde1f3;
}

@media (max-width: 600px) {
    .school-logo {
        width: 60px !important;
        height: 60px !important;
    }
    .card-body.p-3 {
        padding: 1rem !important;
    }
    .fw-bold[style*="font-size"] {
        font-size: 1.07rem !important;
    }
}
.school-social-links {
  gap: 15px !important;
  margin-top: 10px !important;
}
.school-social-link {
  font-size: 1.5em;
  display: flex;
  align-items: center;
  transition: opacity 0.2s, filter 0.2s;
}
.school-social-link.facebook   { color: #3b5998; }
.school-social-link.instagram { color: #C13584; }
.school-social-link.youtube   { color: #FF0000; }
.school-social-link.disabled {
  opacity: 0.4;
  pointer-events: none;
  filter: grayscale(70%);
}

/* Responsive: reduce icon/badge size and gap on small screens */
@media (max-width: 600px) {
  .school-social-links {
    gap: 9px !important;
  }
  .school-social-link {
    font-size: 1.1em;
  }
  .badge {
    padding: 7px 12px !important;
    font-size: 12px !important;
  }
  .enquiry-btn {
    width: 100%;
    font-size: 1.07em;
    padding: 12px 0;
    margin-top: 12px;
  }
}        
.badge-school {
  font-size: 13px;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .badge-school {
    font-size: 12px !important;
    padding: 7px 10px !important;
  }
}
.school-logo {
    width: 90px;
    height: 90px;
    border-radius: 14px;
    object-fit: cover;
    border: 2px solid #f2f2f2;
    background: #fff;
    box-shadow: 0 1px 6px #dde1f3;
    max-width: 100%;
    height: auto;
}

@media (max-width: 600px) {
    .school-logo {
        width: 60px !important;
        height: 60px !important;
        min-width: 40px;
        min-height: 40px;
    }
}