/* Shared corner treatment for rectangular cards and controls. */
:root { --ig-corner-radius: 6px; }

/* Override legacy page-specific shapes without changing layout or hover effects. */
html body :is(
    .thumbnail, .card, .panel, .well, .alert, .modal-content, .dropdown-menu,
    .beautifulSmile, .chat-booking-alternative,
    .ig-full-arch-pricing, .ig-price-box, .ig-pricing-option,
    .ig-pricing-denture-line, .ig-pricing-anesthesia,
    .doctor-content-card, .doctor-profile-card, .care-advantage-card,
    .payment-plan-card, .ig-smile-card, .thumb-card,
    .ig-contact-logo, .ig-open-days, .office-hours-note
) {
    border-radius: var(--ig-corner-radius) !important;
}

html body :is(
    .btn, .ea-btn, .chat-booking-button, .mobile-appointment-button,
    .banner-action, .proceed-action, .navbar-toggle, .form-control,
    .second-opinion-link, .dio-value-link,
    input[type="submit"], input[type="button"], input[type="reset"]
) {
    border-radius: var(--ig-corner-radius) !important;
}

/* Image borders and heading backgrounds need their own rounded corners. */
html body #circle-silder .thumbnail img,
html body #main-slider .carousel-content .slogans,
html body #header-sec .social-icons a,
html body #header-sec .show-search,
html body #header-sec .search-side i,
html body .ig-service-offers .ig-full-arch-pricing > .btn,
html body #contact .contact-panel-grid > div,
html body #contact .map-route iframe {
    border-radius: var(--ig-corner-radius) !important;
}

/* Panels attached to a page edge keep that edge square. */
html body #main-slider .carousel-content .slogans:has(.banner-action) {
    border-left: 0;
    border-radius: 0 var(--ig-corner-radius) var(--ig-corner-radius) 0 !important;
}
html body .circles-quotes {
    border-radius: 0 0 var(--ig-corner-radius) var(--ig-corner-radius) !important;
}

/* Contact headers join their content inside a rounded, clipped outer card. */
html body #contact:has(.ig-office-hours) .contact-panel-grid .thumbnail {
    border-radius: 0 !important;
}

/* Keep colored child panels inside their parent's corner shape. */
html body .panel > .panel-heading,
html body .modal-content > .modal-header {
    border-top-left-radius: var(--ig-corner-radius);
    border-top-right-radius: var(--ig-corner-radius);
}
html body .panel > .panel-footer,
html body .modal-content > .modal-footer {
    border-bottom-left-radius: var(--ig-corner-radius);
    border-bottom-right-radius: var(--ig-corner-radius);
}