html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
video,
iframe {
    max-width: 100%;
}

.card,
.modal-content,
.form-control,
.form-select,
.btn {
    min-width: 0;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table {
    vertical-align: middle;
}

.table th,
.table td {
    white-space: nowrap;
}

textarea.form-control {
    min-height: 110px;
}

.modal-dialog {
    max-width: min(96vw, var(--bs-modal-width, 500px));
    margin-left: auto;
    margin-right: auto;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    white-space: normal;
}

.btn-sm {
    min-height: 32px;
}

.form-label,
label {
    overflow-wrap: anywhere;
}

@media (max-width: 991.98px) {
    .container,
    .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }

    .card-body,
    .card-header,
    .card-footer {
        padding: 1rem;
    }

    .row {
        --bs-gutter-x: 1rem;
    }
}

@media (max-width: 767.98px) {
    h1,
    .h1 {
        font-size: 1.75rem;
    }

    h2,
    .h2 {
        font-size: 1.45rem;
    }

    .d-flex:not(.flex-nowrap) {
        flex-wrap: wrap;
    }

    .input-group {
        flex-wrap: nowrap;
    }

    .main-bg-wrapper {
        align-items: stretch;
        padding: 24px 12px !important;
    }

    .brand-box,
    .reg-box {
        width: 100% !important;
        max-width: 520px;
        padding: 24px !important;
        border-radius: 16px !important;
        margin-left: auto;
        margin-right: auto;
    }

    .table th,
    .table td {
        font-size: .875rem;
    }
}

/* Shared responsive hardening for influencer and brand dashboards */
.topbar,
.bottom-nav,
.sidebar,
.brand-topbar,
.brand-bottom-nav,
.brand-sidebar {
    max-width: 100vw;
}

.req-wrap,
.brand-content,
.content-wrapper {
    overflow-x: hidden;
}

.brand-card,
.req-card,
.di-profile-card {
    overflow: hidden;
}

.di-profile-img,
.creator-img,
.details-avatar,
.profile-mini-img {
    object-fit: cover;
}

@media (max-width: 991.98px) {
    .sidebar {
        width: min(86vw, 320px) !important;
        left: min(-86vw, -320px) !important;
    }

    .sidebar.active {
        left: 0 !important;
    }

    .di-hero {
        padding: 86px 0 98px !important;
    }

    .di-hero h1 {
        margin-top: 42px !important;
        font-size: clamp(32px, 7vw, 48px) !important;
    }

    .di-search-section {
        margin-top: -46px !important;
    }

    .di-search-card {
        padding: 18px !important;
        border-radius: 16px !important;
    }

    .di-section-title {
        margin-top: 54px !important;
        font-size: clamp(28px, 6vw, 36px) !important;
    }
}

@media (max-width: 767.98px) {
    .topbar {
        height: 56px !important;
        padding: 0 14px !important;
    }

    .bottom-nav {
        height: 68px !important;
        z-index: 1030 !important;
    }

    .bottom-nav a {
        width: 25%;
        font-size: 11px !important;
        line-height: 1.2;
    }

    .content-wrapper {
        padding-bottom: 88px !important;
    }

    .table-responsive .btn,
    .table-responsive .btn-sm {
        width: auto;
        min-width: 76px;
    }

    .di-profile-card {
        border-left: 0 !important;
        border-top: 4px solid #1CA7A6;
    }

    .di-profile-img {
        height: 230px !important;
        border-radius: 14px !important;
    }

    .brand-card .d-flex.gap-3,
    .req-actions .d-flex {
        min-width: 0;
    }

    .form-control,
    .form-select {
        min-height: 42px;
    }
}

@media (max-width: 575.98px) {
    .btn,
    .btn-sm {
        width: 100%;
    }

    .btn-group .btn,
    .table .btn,
    .modal-footer .btn,
    .brand-topbar .btn,
    .icon-btn {
        width: auto;
    }

    .modal-footer {
        align-items: stretch;
    }

    .modal-footer .btn {
        flex: 1 1 auto;
    }
}

/* 2026 responsive audit hardening */
:root {
    --responsive-page-max: 1320px;
    --responsive-edge: clamp(14px, 3vw, 28px);
}

*,
*::before,
*::after {
    min-width: 0;
}

body {
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

main,
section,
article,
aside,
header,
footer,
.row,
.container,
.container-fluid,
.brand-shell,
.brand-main,
.brand-content,
.dashboard-shell,
.dashboard-grid,
.dashboard-card,
.section-box,
.single-form,
.brand-card,
.card,
.modal,
.modal-dialog,
.modal-content,
.offcanvas,
.jo-container,
.jo-inner-page-container {
    max-width: 100%;
}

.brand-content,
.dashboard-shell,
.container-fluid.px-3,
.container-fluid.px-4,
.container-fluid.py-3 {
    width: min(100%, var(--responsive-page-max));
    margin-left: auto;
    margin-right: auto;
}

p,
li,
td,
th,
label,
small,
span,
h1,
h2,
h3,
h4,
h5,
h6,
.fw-semibold,
.brand-page-title,
.dashboard-card p,
.dashboard-card h3,
.metric-label,
.metric-value,
.detail-row,
.list-group-item,
.dropdown-item,
.menu-title,
.sub-menu a {
    overflow-wrap: anywhere;
}

.text-truncate {
    min-width: 0;
}

.row > * {
    min-width: 0;
}

.card,
.brand-card,
.dashboard-card,
.section-box,
.single-form,
.empty-state,
.modal-content {
    overflow-wrap: anywhere;
}

.card img,
.brand-card img,
.dashboard-card img,
.list-group img,
.table img,
.modal img {
    max-width: 100%;
    height: auto;
}

iframe,
embed,
object,
video {
    display: block;
    width: 100%;
}

.ratio > iframe,
.ratio > video {
    height: 100%;
}

.btn,
button,
input,
select,
textarea {
    max-width: 100%;
}

.btn,
.btn-sm,
.btn-lg,
.btn-influencer,
.google-btn,
.quick-actions a,
.brand-nav a,
.bottom-nav a,
.brand-bottom-nav a {
    min-height: 44px;
    line-height: 1.25;
}

.btn-group {
    flex-wrap: wrap;
}

.input-group {
    max-width: 100%;
}

.input-group > .form-control,
.input-group > .form-select {
    width: 1%;
}

input[type="file"].form-control {
    min-width: 0;
}

.form-check,
.form-switch {
    min-width: 0;
}

.form-check-label {
    white-space: normal;
}

.table-responsive {
    border-radius: 8px;
}

.dataTables_wrapper,
.dt-container,
.dataTables_scroll,
.dataTables_scrollBody {
    max-width: 100%;
    overflow-x: auto;
}

.modal {
    padding-left: 0 !important;
}

.modal-dialog {
    width: min(96vw, var(--bs-modal-width, 500px));
}

.modal-dialog.modal-lg {
    --bs-modal-width: 860px;
}

.modal-body {
    max-height: calc(100dvh - 180px);
    overflow-y: auto;
}

.modal-header,
.modal-footer {
    gap: .75rem;
}

.offcanvas {
    max-width: min(92vw, 360px);
}

.alert[style*="position: absolute"],
.alert[style*="position:absolute"] {
    position: fixed !important;
    top: 76px !important;
    left: var(--responsive-edge) !important;
    right: var(--responsive-edge) !important;
    width: auto !important;
    max-width: 520px;
    margin-left: auto;
}

.login-bg,
.page-bg,
.main-bg-wrapper {
    min-height: calc(100dvh - 70px);
    padding: clamp(28px, 6vw, 72px) var(--responsive-edge) !important;
}

.login-box,
.reg-box,
.brand-box {
    width: min(100%, 460px) !important;
}

body .login-bg > .login-box,
body .page-bg > .reg-box,
body .main-bg-wrapper > .brand-box {
    width: min(calc(100vw - 28px), 460px) !important;
    max-width: calc(100vw - 28px) !important;
}

.reg-box[style*="max-width:720px"] {
    width: min(100%, 720px) !important;
}

body .page-bg > .reg-box[style*="max-width:720px"] {
    width: min(calc(100vw - 28px), 720px) !important;
}

.login-box img,
.reg-box img {
    max-width: min(100%, 185px);
    height: auto;
}

.login-box .text-center,
.reg-box .text-center,
.brand-box .text-center {
    min-width: 0;
    overflow-wrap: anywhere;
}

.login-box .input-group,
.reg-box .input-group,
.brand-box .input-group {
    width: 100%;
}

.google-btn {
    width: 100%;
    white-space: normal;
}

.topbar,
.brand-topbar {
    min-width: 0;
}

.topbar strong,
.brand-topbar strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar,
.brand-sidebar {
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.bottom-nav,
.brand-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
}

.bottom-nav a,
.brand-bottom-nav a {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-shell {
    padding: clamp(16px, 3vw, 28px);
    padding-bottom: 96px;
}

.dashboard-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.quick-actions {
    align-items: stretch;
}

.quick-actions a {
    justify-content: center;
}

.brand-nav a {
    align-items: flex-start;
}

.metric-card {
    height: 100%;
}

.metric-value {
    font-size: clamp(24px, 4vw, 32px);
}

.detail-row {
    gap: 12px;
}

.select2-container {
    max-width: 100% !important;
    width: 100% !important;
}

.select2-container--default .select2-selection--multiple {
    min-height: 44px;
}

.social-card,
.social-card-v2 {
    max-width: 100%;
}

.profile-img,
.letter-avatar {
    width: clamp(112px, 28vw, 160px) !important;
    height: clamp(112px, 28vw, 160px) !important;
}

.letter-avatar {
    font-size: clamp(42px, 12vw, 64px) !important;
}

.notify-box {
    left: var(--responsive-edge);
    right: var(--responsive-edge);
    top: 76px;
}

.notify {
    min-width: 0;
}

.jo-header {
    max-width: 100%;
    gap: clamp(10px, 2vw, 24px);
}

.jo-header,
.jo-header-right,
.jo-header-nav nav,
.navbar-nav-right,
.jo-footer-top__nwsltr,
.tt-footer-top__socials,
.jo-footer-widget .links {
    min-width: 0;
}

.main_logo,
.jo-header .main_logo {
    max-width: min(42vw, 190px);
    height: auto;
}

.jo-header-nav nav {
    flex-wrap: wrap;
}

.jo-header-nav nav a,
.jo-header-submenu a,
#mobileMenu nav a,
.dropdown-toggle-btn,
.dropdown-link {
    overflow-wrap: anywhere;
}

#mobileMenu {
    width: min(86vw, 360px) !important;
    max-width: 100%;
}

#mobileMenu .offcanvas-body {
    overflow-y: auto;
}

.navbar-nav-right .dropdown-menu {
    max-width: calc(100vw - 24px);
}

.photo-registred,
.not-registered,
.avatar img {
    object-fit: cover;
}

.jo-footer,
.Footer_Bg,
.jo-footer-top,
.jo-footer-middle,
.tt-footer-bottom {
    max-width: 100%;
    overflow-x: hidden;
}

.jo-footer-top__nwsltr {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.jo-footer-top__nwsltr input {
    min-width: 0;
}

.jo-footer-widget .links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.brand-card .list-group-item .d-flex,
.brand-card .d-flex,
.card .d-flex {
    min-width: 0;
}

.brand-card .badge,
.card .badge {
    white-space: normal;
    text-align: left;
}

.brand-card .object-fit-cover,
.card .object-fit-cover {
    flex: 0 0 auto;
}

.requirement-attachment {
    display: inline-flex;
    max-width: 100%;
}

@media (min-width: 992px) {
    .brand-content {
        padding-left: clamp(22px, 3vw, 34px);
        padding-right: clamp(22px, 3vw, 34px);
    }

    .brand-sidebar {
        width: clamp(248px, 19vw, 270px);
    }

    .brand-main {
        margin-left: clamp(248px, 19vw, 270px);
    }
}

@media (max-width: 991.98px) {
    .brand-sidebar {
        width: min(86vw, 320px) !important;
    }

    .brand-content {
        padding-left: var(--responsive-edge) !important;
        padding-right: var(--responsive-edge) !important;
    }

    .brand-card,
    .card {
        border-radius: 8px !important;
    }

    .dashboard-welcome,
    .dashboard-card {
        padding: 18px !important;
    }

    .single-form {
        padding: 22px !important;
        border-radius: 18px !important;
    }

    .section-box {
        padding: 18px !important;
        border-radius: 16px !important;
    }
}

@media (max-width: 767.98px) {
    .brand-content,
    .dashboard-shell,
    .container-fluid.px-3,
    .container-fluid.px-4,
    .container-fluid.py-3 {
        width: 100%;
    }

    .brand-content {
        padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    }

    .topbar,
    .brand-topbar {
        height: auto !important;
        min-height: 58px;
        gap: 10px;
    }

    .brand-topbar .d-flex,
    .topbar .d-flex {
        min-width: 0;
    }

    .content-wrapper,
    body:has(.bottom-nav) {
        padding-bottom: calc(78px + env(safe-area-inset-bottom));
    }

    .modal-dialog {
        margin: .75rem auto;
    }

    .modal-body {
        max-height: calc(100dvh - 150px);
    }

    .modal-footer,
    .card-footer {
        flex-wrap: wrap;
    }

    .brand-card .d-flex.gap-3:not(.flex-nowrap),
    .card .d-flex.gap-3:not(.flex-nowrap) {
        flex-wrap: wrap;
    }

    .brand-card img[style*="width:160px"],
    .brand-card img[style*="height:160px"] {
        width: min(100%, 180px) !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
    }

    .brand-card img[style*="height:150px"],
    .brand-card img[style*="height:72px"],
    .brand-card img[style*="height:68px"],
    .brand-card img[style*="height:64px"] {
        object-fit: cover;
    }

    .social-card-v2 {
        grid-template-columns: 42px minmax(0, 1fr) 38px !important;
        gap: 10px !important;
        padding: 12px !important;
    }

    .social-select,
    .social-input {
        grid-column: 1 / -1 !important;
    }

    .otp-box {
        width: clamp(42px, 13vw, 55px) !important;
        height: clamp(42px, 13vw, 55px) !important;
    }
}

@media (max-width: 575.98px) {
    .login-box,
    .reg-box,
    .brand-box {
        padding: 24px !important;
        border-radius: 16px !important;
    }

    body .login-bg > .login-box,
    body .page-bg > .reg-box,
    body .main-bg-wrapper > .brand-box {
        width: min(calc(100vw - 24px), 460px) !important;
        max-width: calc(100vw - 24px) !important;
    }

    .reg-title {
        font-size: clamp(22px, 7vw, 26px);
    }

    .input-group {
        align-items: stretch;
    }

    .input-group-text {
        padding-left: .7rem;
        padding-right: .7rem;
    }

    .btn-group {
        display: grid;
        width: 100%;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .btn-group > .btn {
        border-radius: 8px !important;
    }

    .quick-actions a,
    .brand-card .btn,
    .card-footer .btn,
    .modal-footer .btn,
    .empty-state .btn {
        width: 100%;
    }

    .brand-card form,
    .card-footer a,
    .card-footer button {
        min-width: 0;
    }

    .brand-bottom-nav a,
    .bottom-nav a {
        font-size: 10.5px !important;
    }

    .brand-bottom-nav i,
    .bottom-nav i {
        font-size: 18px !important;
    }

    .table-responsive {
        margin-left: -4px;
        margin-right: -4px;
        width: calc(100% + 8px);
    }

    .table th,
    .table td {
        padding: .65rem .7rem;
    }

    .alert[style*="position: absolute"],
    .alert[style*="position:absolute"] {
        top: 66px !important;
        max-width: none;
    }

    .jo-header {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .jo-header-right {
        gap: 8px !important;
    }

    .navbar-nav-right {
        flex: 0 0 auto;
    }

    .jo-footer-top__nwsltr {
        flex-direction: column;
    }

    .jo-footer-top__nwsltr .jo-btn,
    .jo-footer-top__nwsltr button {
        width: 100%;
    }

    .tt-footer-top__socials {
        justify-content: center !important;
    }
}

@media (max-width: 360px) {
    .container,
    .container-fluid,
    .brand-content,
    .dashboard-shell {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .login-box,
    .reg-box,
    .brand-box,
    .card-body,
    .brand-card,
    .section-box,
    .single-form {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .bottom-nav a,
    .brand-bottom-nav a {
        font-size: 10px !important;
    }
}