/**
 * Section Border Radius — CSS Variable Bindings
 *
 * This file applies the section-specific CSS variables (defined in :root via
 * main_css_libs.blade.php, sourced from business_settings) to each layout's
 * main card element. Using !important ensures these theme customizations
 * override any inline <style> blocks that may appear later in the page.
 *
 * Settings keys follow: {LayoutType}_border_radius  (e.g. T1_border_radius)
 * CSS variables follow: --{LayoutType}-border-radius (e.g. --T1-border-radius)
 */

/* =========================================================
   Testimonial Layouts (T1–T8)
   ========================================================= */
#testimonial_section_t1 .t1-card {
    border-radius: var(--T1-border-radius, 16px) !important;
}

#testimonial_section_t2 .t2-card {
    border-radius: var(--T2-border-radius, 12px) !important;
}

.testimonial_3 .t3-card {
    border-radius: var(--T3-border-radius, 10px) !important;
}

#testimonial_section_t6 .t6-card {
    border-radius: var(--T6-border-radius, 16px) !important;
}

/* =========================================================
   Product Card Layouts (pc_1–pc_5)
   ========================================================= */
.ubx-product-card-pc_1 {
    border-radius: var(--pc_1-border-radius, 0px) !important;
}

.ubx-product-card-pc_2 {
    border-radius: var(--pc_2-border-radius, 15px) !important;
}

.ubx-product-card-pc_3 {
    border-radius: var(--pc_3-border-radius, 13px) !important;
}

.ubx-product-card-pc_4 {
    border-radius: var(--pc_4-border-radius, 24px) !important;
}

.ubx-product-card-pc_5 {
    border-radius: var(--pc_5-border-radius, 18px) !important;
}

/* =========================================================
   Category Listing Layouts (c1–c14)
   ========================================================= */
.c1-category-card {
    border-radius: var(--c1-border-radius, 10px) !important;
}

.category-layout-c3 .category-card-c3 {
    border-radius: var(--c3-border-radius, 18px) !important;
}

/* =========================================================
   Blog Layouts
   ========================================================= */

/* =========================================================
   Group Listing / Tabs (TB1–TB5)
   Targets the tab nav pill/button shape in each layout.
   ========================================================= */
.custom-tab-TB1 {
    border-radius: var(--TB1-border-radius, 100px) !important;
}

.modern-tabs-TB2 .nav-link-TB2 {
    border-radius: var(--TB2-border-radius, 8px) var(--TB2-border-radius, 8px) 0 0 !important;
}

.custom-tab-btn-TB3 {
    border-radius: var(--TB3-border-radius, 100px) !important;
}

.card-tabs-TB4::-webkit-scrollbar-thumb {
    border-radius: var(--TB4-border-radius, 3px) !important;
}

.nav-tabs-TB5 .nav-link-TB5 {
    border-radius: var(--TB5-border-radius, 4px) !important;
}

/* =========================================================
   FAQ Layouts
   ========================================================= */
.ub-faq-grid__card {
    border-radius: var(--faq-grid-border-radius, 14px) !important;
}

.ub-faq-sidebar__navwrap {
    border-radius: var(--faq-sidebar-border-radius, 14px) !important;
}

.ub-faq-tabs__bar {
    border-radius: var(--faq-htabs-border-radius, 16px) !important;
}

.ub-faq-card {
    border-radius: var(--faq-cards-border-radius, 20px) !important;
}

.ub-faq-dark__bg {
    border-radius: var(--faq-dark-border-radius, 20px) !important;
}

.ub-faq-hero__hero {
    border-radius: var(--faq-hero-border-radius, 24px) !important;
}

.ub-faq-compact__grid {
    border-radius: var(--faq-compact-border-radius, 16px) !important;
}

/* =========================================================
   Subscribe Layouts (S2, S4, S7, S8, S9 — layouts with
   a prominent main card/container element)
   ========================================================= */
.ubx-s2-container {
    border-radius: var(--S2-border-radius, 8px) !important;
}

.ubx-s4-card {
    border-radius: var(--S4-border-radius, 12px) !important;
}

.ubx-s7-card {
    border-radius: var(--S7-border-radius, 40px) !important;
}

.ubx-s8-box {
    border-radius: var(--S8-border-radius, 4px) !important;
}

.ubx-s9-box {
    border-radius: var(--S9-border-radius, 12px) !important;
}

/* =========================================================
   Coupon Banner Layouts (CB6 coupon card, CB8 gift card,
   CB10 stack card layer)
   ========================================================= */
.coupon-card-6 {
    border-radius: var(--coupon-banner-6-border-radius, 8px) !important;
}

.coupon-gift-card {
    border-radius: var(--coupon-banner-8-border-radius, 8px) !important;
}

.coupon-stack-card__layer {
    border-radius: var(--coupon-banner-10-border-radius, 4px) !important;
}

/* =========================================================
   Timeline Layouts (tm2–tm5)
   ========================================================= */
.timeline-t2-card {
    border-radius: var(--tm2-border-radius, 16px) !important;
}

.timeline-t3-card {
    border-radius: var(--tm3-border-radius, 24px) !important;
}

.timeline-t4-card {
    border-radius: var(--tm4-border-radius, 20px) !important;
}

.timeline-t5-content-box {
    border-radius: var(--tm5-border-radius, 20px) !important;
}

/* =========================================================
   Scroll Text / Scroller Layouts
   ========================================================= */
.scroll-badge-item {
    border-radius: var(--scroll-text-3-border-radius, 8px) !important;
}

.scroll-split-bar {
    border-radius: var(--scroll-text-4-border-radius, 10px) !important;
}

/* =========================================================
   Offer Card Layouts (oc_10 hardcoded value override)
   oc_1–oc_9 use per-card inline $cardRadius from DB so
   the CSS variable acts as the class-level default only.
   ========================================================= */
.oc-10-card {
    border-radius: var(--oc_10-border-radius, 12px) !important;
}

/* =========================================================
   Slider Layout Types
   CSS var applies as fallback when no per-slide border_radius
   is set (inline style wins over these class-level rules).
   ========================================================= */
.image_slider_container {
    border-radius: var(--slider-image-border-radius, 0px);
    overflow: hidden;
}
.video_slider_container {
    border-radius: var(--slider-video-border-radius, 0px);
    overflow: hidden;
}
.color_slider_container {
    border-radius: var(--slider-color-border-radius, 0px);
    overflow: hidden;
}

/* =========================================================
   Banner Layout Types
   Targets the card/wrapper element of each banner layout.
   Per-item inline border-radius (set per-banner in admin)
   takes precedence on inner image elements. These rules
   apply to the outer container where no inline style exists.
   ========================================================= */
.grid-four-banner-card {
    border-radius: var(--banner-grid4-border-radius, 0px) !important;
    overflow: hidden !important;
}
.two-images-banner-card {
    border-radius: var(--banner-two-images-border-radius, 0px) !important;
    overflow: hidden !important;
}
.tf-img-with-text:not(.three-img-grid-banner) {
    border-radius: var(--banner-land-text-border-radius, 0px) !important;
    overflow: hidden !important;
}
.three-img-grid-banner {
    border-radius: var(--banner-three-images-border-radius, 0px) !important;
    overflow: hidden !important;
}
.banner-with-text-section {
    border-radius: var(--banner-with-text-border-radius, 0px) !important;
    overflow: hidden !important;
}
.tf-slideshow.slider-video {
    border-radius: var(--banner-with-video-border-radius, 0px) !important;
    overflow: hidden !important;
}