/* SincSports Bootstrap Theme
   This file overrides core Bootstrap colors & key components.
   Include it AFTER bootstrap.min.css
*/

/* Root-level color system */
:root {
    /* Brand helpers */
    --sinc-primary: #7FCC4C;   /* from logo */
    --sinc-dark: #0f172a;
    --sinc-muted: #6b7280;
    --sinc-light: #f9fafb;

    /* Bootstrap theme colors */
    --bs-primary: #3b82f6;          /* soft blue primary */
    --bs-primary-rgb: 59, 130, 246;

    --bs-success: #22c55e;          /* balanced green */
    --bs-success-rgb: 34, 197, 94;

    /* Optional: links that feel on-brand */
    --bs-link-color: #2563eb;
    --bs-link-hover-color: #1d4ed8;
}

/* Typography defaults still controlled by your page CSS.
   This just makes sure .text-* utilities feel consistent. */
.text-primary {
    color: var(--bs-primary) !important;
}

.text-success {
    color: var(--bs-success) !important;
}

/* Background utility helpers */
.bg-primary {
    background-color: var(--bs-primary) !important;
}

.bg-success {
    background-color: var(--bs-success) !important;
}

/* Border utilities */
.border-primary {
    border-color: var(--bs-primary) !important;
}

.border-success {
    border-color: var(--bs-success) !important;
}

/* Primary button using the new palette */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #3b82f6;
    --bs-btn-border-color: #3b82f6;

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2563eb;
    --bs-btn-hover-border-color: #2563eb;

    --bs-btn-focus-shadow-rgb: 59, 130, 246;

    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1d4ed8;
    --bs-btn-active-border-color: #1d4ed8;

    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #3b82f6;
    --bs-btn-disabled-border-color: #3b82f6;
}

/* Success button, matching your green */
.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: #22c55e;
    --bs-btn-border-color: #22c55e;

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #16a34a;
    --bs-btn-hover-border-color: #16a34a;

    --bs-btn-focus-shadow-rgb: 34, 197, 94;

    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #15803d;
    --bs-btn-active-border-color: #15803d;

    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #22c55e;
    --bs-btn-disabled-border-color: #22c55e;
}

/* Alerts (optional but nice for cohesion) */
.alert-primary {
    color: #0b2a6f;
    background-color: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.3);
}

.alert-success {
    color: #065f46;
    background-color: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.3);
}

/* Badges (optional) */
.badge.bg-primary {
    background-color: var(--bs-primary) !important;
}

.badge.bg-success {
    background-color: var(--bs-success) !important;
}

/* Nav pills (for active tab styles) */
.nav-pills .nav-link.active,
.nav-pills .nav-link.show {
    color: #fff;
    background-color: var(--bs-primary);
}
.shape > svg {
    display: none
}

}

.shape-top {
    top: 0;
    right: 0;
    left: 0
}

    .shape-top > * {
        -webkit-transform-origin: bottom center;
        transform-origin: bottom center
    }

.shape-right {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

    .shape-right > * {
        position: inherit;
        top: inherit;
        bottom: inherit;
        right: inherit;
        -webkit-transform-origin: center left;
        transform-origin: center left
    }

.shape-bottom {
    right: 0;
    bottom: 0;
    left: 0
}

    .shape-bottom > * {
        -webkit-transform-origin: top center;
        transform-origin: top center
    }

.shape-bottom-100 {
    right: 0;
    bottom: 100%;
    left: 0
}

    .shape-bottom-100 > * {
        -webkit-transform-origin: top center;
        transform-origin: top center
    }

.shape-left {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

    .shape-left > * {
        position: inherit;
        top: inherit;
        bottom: inherit;
        left: inherit;
        -webkit-transform-origin: center right;
        transform-origin: center right
    }

.shape-fluid-x > * {
    width: 100%;
    height: auto
}

.shape-fluid-y > * {
    width: auto;
    height: 100%
}

.shape-flip-x {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1)
}

.shape-blur-1 {
    top: 0;
    right: 0;
    left: 0
}

/* ============================================
   POSITIVE SPACING (6–14)
   ============================================ */

/* Margin (all sides) */
.m-6 {
    margin: 4.5rem !important;
}

.m-7 {
    margin: 6rem !important;
}

.m-8 {
    margin: 7.5rem !important;
}

.m-9 {
    margin: 9rem !important;
}

.m-10 {
    margin: 12rem !important;
}

.m-11 {
    margin: 14rem !important;
}

.m-12 {
    margin: 16rem !important;
}

.m-13 {
    margin: 18rem !important;
}

.m-14 {
    margin: 20rem !important;
}

/* Margin Top */
.mt-6 {
    margin-top: 4.5rem !important;
}

.mt-7 {
    margin-top: 6rem !important;
}

.mt-8 {
    margin-top: 7.5rem !important;
}

.mt-9 {
    margin-top: 9rem !important;
}

.mt-10 {
    margin-top: 12rem !important;
}

.mt-11 {
    margin-top: 14rem !important;
}

.mt-12 {
    margin-top: 16rem !important;
}

.mt-13 {
    margin-top: 18rem !important;
}

.mt-14 {
    margin-top: 20rem !important;
}

/* Margin Bottom */
.mb-6 {
    margin-bottom: 4.5rem !important;
}

.mb-7 {
    margin-bottom: 6rem !important;
}

.mb-8 {
    margin-bottom: 7.5rem !important;
}

.mb-9 {
    margin-bottom: 9rem !important;
}

.mb-10 {
    margin-bottom: 12rem !important;
}

.mb-11 {
    margin-bottom: 14rem !important;
}

.mb-12 {
    margin-bottom: 16rem !important;
}

.mb-13 {
    margin-bottom: 18rem !important;
}

.mb-14 {
    margin-bottom: 20rem !important;
}

/* Margin Start (Left) */
.ms-6 {
    margin-left: 4.5rem !important;
}

.ms-7 {
    margin-left: 6rem !important;
}

.ms-8 {
    margin-left: 7.5rem !important;
}

.ms-9 {
    margin-left: 9rem !important;
}

.ms-10 {
    margin-left: 12rem !important;
}

.ms-11 {
    margin-left: 14rem !important;
}

.ms-12 {
    margin-left: 16rem !important;
}

.ms-13 {
    margin-left: 18rem !important;
}

.ms-14 {
    margin-left: 20rem !important;
}

/* Margin End (Right) */
.me-6 {
    margin-right: 4.5rem !important;
}

.me-7 {
    margin-right: 6rem !important;
}

.me-8 {
    margin-right: 7.5rem !important;
}

.me-9 {
    margin-right: 9rem !important;
}

.me-10 {
    margin-right: 12rem !important;
}

.me-11 {
    margin-right: 14rem !important;
}

.me-12 {
    margin-right: 16rem !important;
}

.me-13 {
    margin-right: 18rem !important;
}

.me-14 {
    margin-right: 20rem !important;
}

/* Horizontal margin */
.mx-6 {
    margin-left: 4.5rem !important;
    margin-right: 4.5rem !important;
}

.mx-7 {
    margin-left: 6rem !important;
    margin-right: 6rem !important;
}

.mx-8 {
    margin-left: 7.5rem !important;
    margin-right: 7.5rem !important;
}

.mx-9 {
    margin-left: 9rem !important;
    margin-right: 9rem !important;
}

.mx-10 {
    margin-left: 12rem !important;
    margin-right: 12rem !important;
}

.mx-11 {
    margin-left: 14rem !important;
    margin-right: 14rem !important;
}

.mx-12 {
    margin-left: 16rem !important;
    margin-right: 16rem !important;
}

.mx-13 {
    margin-left: 18rem !important;
    margin-right: 18rem !important;
}

.mx-14 {
    margin-left: 20rem !important;
    margin-right: 20rem !important;
}

/* Vertical margin */
.my-6 {
    margin-top: 4.5rem !important;
    margin-bottom: 4.5rem !important;
}

.my-7 {
    margin-top: 6rem !important;
    margin-bottom: 6rem !important;
}

.my-8 {
    margin-top: 7.5rem !important;
    margin-bottom: 7.5rem !important;
}

.my-9 {
    margin-top: 9rem !important;
    margin-bottom: 9rem !important;
}

.my-10 {
    margin-top: 12rem !important;
    margin-bottom: 12rem !important;
}

.my-11 {
    margin-top: 14rem !important;
    margin-bottom: 14rem !important;
}

.my-12 {
    margin-top: 16rem !important;
    margin-bottom: 16rem !important;
}

.my-13 {
    margin-top: 18rem !important;
    margin-bottom: 18rem !important;
}

.my-14 {
    margin-top: 20rem !important;
    margin-bottom: 20rem !important;
}


/* ============================================
   POSITIVE PADDING (6–14)
   ============================================ */

.p-6 {
    padding: 4.5rem !important;
}

.p-7 {
    padding: 6rem !important;
}

.p-8 {
    padding: 7.5rem !important;
}

.p-9 {
    padding: 9rem !important;
}

.p-10 {
    padding: 12rem !important;
}

.p-11 {
    padding: 14rem !important;
}

.p-12 {
    padding: 16rem !important;
}

.p-13 {
    padding: 18rem !important;
}

.p-14 {
    padding: 20rem !important;
}

.pt-6 {
    padding-top: 4.5rem !important;
}

.pt-7 {
    padding-top: 6rem !important;
}

.pt-8 {
    padding-top: 7.5rem !important;
}

.pt-9 {
    padding-top: 9rem !important;
}

.pt-10 {
    padding-top: 12rem !important;
}

.pt-11 {
    padding-top: 14rem !important;
}

.pt-12 {
    padding-top: 16rem !important;
}

.pt-13 {
    padding-top: 18rem !important;
}

.pt-14 {
    padding-top: 20rem !important;
}

.pb-6 {
    padding-bottom: 4.5rem !important;
}

.pb-7 {
    padding-bottom: 6rem !important;
}

.pb-8 {
    padding-bottom: 7.5rem !important;
}

.pb-9 {
    padding-bottom: 9rem !important;
}

.pb-10 {
    padding-bottom: 12rem !important;
}

.pb-11 {
    padding-bottom: 14rem !important;
}

.pb-12 {
    padding-bottom: 16rem !important;
}

.pb-13 {
    padding-bottom: 18rem !important;
}

.pb-14 {
    padding-bottom: 20rem !important;
}

.ps-6 {
    padding-left: 4.5rem !important;
}

.ps-7 {
    padding-left: 6rem !important;
}

.ps-8 {
    padding-left: 7.5rem !important;
}

.ps-9 {
    padding-left: 9rem !important;
}

.ps-10 {
    padding-left: 12rem !important;
}

.ps-11 {
    padding-left: 14rem !important;
}

.ps-12 {
    padding-left: 16rem !important;
}

.ps-13 {
    padding-left: 18rem !important;
}

.ps-14 {
    padding-left: 20rem !important;
}

.pe-6 {
    padding-right: 4.5rem !important;
}

.pe-7 {
    padding-right: 6rem !important;
}

.pe-8 {
    padding-right: 7.5rem !important;
}

.pe-9 {
    padding-right: 9rem !important;
}

.pe-10 {
    padding-right: 12rem !important;
}

.pe-11 {
    padding-right: 14rem !important;
}

.pe-12 {
    padding-right: 16rem !important;
}

.pe-13 {
    padding-right: 18rem !important;
}

.pe-14 {
    padding-right: 20rem !important;
}

.px-6 {
    padding-left: 4.5rem !important;
    padding-right: 4.5rem !important;
}

.px-7 {
    padding-left: 6rem !important;
    padding-right: 6rem !important;
}

.px-8 {
    padding-left: 7.5rem !important;
    padding-right: 7.5rem !important;
}

.px-9 {
    padding-left: 9rem !important;
    padding-right: 9rem !important;
}

.px-10 {
    padding-left: 12rem !important;
    padding-right: 12rem !important;
}

.px-11 {
    padding-left: 14rem !important;
    padding-right: 14rem !important;
}

.px-12 {
    padding-left: 16rem !important;
    padding-right: 16rem !important;
}

.px-13 {
    padding-left: 18rem !important;
    padding-right: 18rem !important;
}

.px-14 {
    padding-left: 20rem !important;
    padding-right: 20rem !important;
}

.py-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
}

.py-7 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
}

.py-8 {
    padding-top: 7.5rem !important;
    padding-bottom: 7.5rem !important;
}

.py-9 {
    padding-top: 9rem !important;
    padding-bottom: 9rem !important;
}

.py-10 {
    padding-top: 12rem !important;
    padding-bottom: 12rem !important;
}

.py-11 {
    padding-top: 14rem !important;
    padding-bottom: 14rem !important;
}

.py-12 {
    padding-top: 16rem !important;
    padding-bottom: 16rem !important;
}

.py-13 {
    padding-top: 18rem !important;
    padding-bottom: 18rem !important;
}

.py-14 {
    padding-top: 20rem !important;
    padding-bottom: 20rem !important;
}

/* ============================================
   NEGATIVE MARGINS (6–14)
   ============================================ */

.m-n6 {
    margin: -4.5rem !important;
}

.m-n7 {
    margin: -6rem !important;
}

/* typo fixed below */
.m-n8 {
    margin: -7.5rem !important;
}

.m-n9 {
    margin: -9rem !important;
}

.m-n10 {
    margin: -12rem !important;
}

.m-n11 {
    margin: -14rem !important;
}

.m-n12 {
    margin: -16rem !important;
}

.m-n13 {
    margin: -18rem !important;
}

.m-n14 {
    margin: -20rem !important;
}

.mt-n6 {
    margin-top: -4.5rem !important;
}

.mt-n7 {
    margin-top: -6rem !important;
}

.mt-n8 {
    margin-top: -7.5rem !important;
}

.mt-n9 {
    margin-top: -9rem !important;
}

.mt-n10 {
    margin-top: -12rem !important;
}

.mt-n11 {
    margin-top: -14rem !important;
}

.mt-n12 {
    margin-top: -16rem !important;
}

.mt-n13 {
    margin-top: -18rem !important;
}

.mt-n14 {
    margin-top: -20rem !important;
}

.mb-n6 {
    margin-bottom: -4.5rem !important;
}

.mb-n7 {
    margin-bottom: -6rem !important;
}

.mb-n8 {
    margin-bottom: -7.5rem !important;
}

.mb-n9 {
    margin-bottom: -9rem !important;
}

.mb-n10 {
    margin-bottom: -12rem !important;
}

.mb-n11 {
    margin-bottom: -14rem !important;
}

.mb-n12 {
    margin-bottom: -16rem !important;
}

.mb-n13 {
    margin-bottom: -18rem !important;
}

.mb-n14 {
    margin-bottom: -20rem !important;
}

.ms-n6 {
    margin-left: -4.5rem !important;
}

.ms-n7 {
    margin-left: -6rem !important;
}

.ms-n8 {
    margin-left: -7.5rem !important;
}

.ms-n9 {
    margin-left: -9rem !important;
}

.ms-n10 {
    margin-left: -12rem !important;
}

.ms-n11 {
    margin-left: -14rem !important;
}

.ms-n12 {
    margin-left: -16rem !important;
}

.ms-n13 {
    margin-left: -18rem !important;
}

.ms-n14 {
    margin-left: -20rem !important;
}

.me-n6 {
    margin-right: -4.5rem !important;
}

.me-n7 {
    margin-right: -6rem !important;
}

.me-n8 {
    margin-right: -7.5rem !important;
}

.me-n9 {
    margin-right: -9rem !important;
}

.me-n10 {
    margin-right: -12rem !important;
}

.me-n11 {
    margin-right: -14rem !important;
}

.me-n12 {
    margin-right: -16rem !important;
}

.me-n13 {
    margin-right: -18rem !important;
}

.me-n14 {
    margin-right: -20rem !important;
}

.mx-n6 {
    margin-left: -4.5rem !important;
    margin-right: -4.5rem !important;
}

.mx-n7 {
    margin-left: -6rem !important;
    margin-right: -6rem !important;
}

.mx-n8 {
    margin-left: -7.5rem !important;
    margin-right: -7.5rem !important;
}

.mx-n9 {
    margin-left: -9rem !important;
    margin-right: -9rem !important;
}

.mx-n10 {
    margin-left: -12rem !important;
    margin-right: -12rem !important;
}

.mx-n11 {
    margin-left: -14rem !important;
    margin-right: -14rem !important;
}

.mx-n12 {
    margin-left: -16rem !important;
    margin-right: -16rem !important;
}

.mx-n13 {
    margin-left: -18rem !important;
    margin-right: -18rem !important;
}

.mx-n14 {
    margin-left: -20rem !important;
    margin-right: -20rem !important;
}

.my-n6 {
    margin-top: -4.5rem !important;
    margin-bottom: -4.5rem !important;
}

.my-n7 {
    margin-top: -6rem !important;
    margin-bottom: -6rem !important;
}

.my-n8 {
    margin-top: -7.5rem !important;
    margin-bottom: -7.5rem !important;
}

.my-n9 {
    margin-top: -9rem !important;
    margin-bottom: -9rem !important;
}

.my-n10 {
    margin-top: -12rem !important;
    margin-bottom: -12rem !important;
}

.my-n11 {
    margin-top: -14rem !important;
    margin-bottom: -14rem !important;
}

.my-n12 {
    margin-top: -16rem !important;
    margin-bottom: -16rem !important;
}

.my-n13 {
    margin-top: -18rem !important;
    margin-bottom: -18rem !important;
}

.my-n14 {
    margin-top: -20rem !important;
    margin-bottom: -20rem !important;
}