/* profile bussiness */
body,
input,
textarea,
select,
button,
label,
p,
span,
td,
th,
li,
a,
h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto'!important;
}

/* Icon fonts ko Roboto se exclude karo */
i, i.fa, i.fas, i.far, i.fab, i.fal,
[class^="fa-"], [class*=" fa-"] {
    font-family: "Font Awesome 5 Free", "FontAwesome" !important;
}
@media only screen and (max-width: 991px) {
    ul.nav.nav-tabs.dashboard-tabs {
        position: static!important;
    }
}

ul.nav.nav-tabs.dashboard-tabs {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px 6px;
    list-style: none;
    padding: 10px 12px;
    margin: 0 0 18px 0;
    border: 2px solid #070f07 !important;
    border-radius: 10px;
    background: #f5f5f5;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* ══════════════════════════════════════════
   FOLLOWING TABLE STYLES
   ══════════════════════════════════════════ */
.following-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    font-family: 'Roboto'!important;
}
.following-table thead tr {
    background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
    color: #ffffff;
}
.following-table thead th {
    padding: 13px 15px;
    text-align: left;
    font-weight: 600;
    letter-spacing: 0.4px;
    white-space: nowrap;
    border: none;
    font-family: 'Roboto'!important;
}
.following-table tbody tr {
    border-bottom: 1px solid #e8ecef;
    background: #ffffff;
    transition: background 0.15s ease;
}
.following-table tbody tr:hover { background: #f4f8ff; }
.following-table tbody tr:nth-child(even) { background: #f9fbff; }
.following-table tbody tr:nth-child(even):hover { background: #eef4ff; }
.following-table tbody td {
    padding: 12px 15px;
    vertical-align: middle;
    color: #444;
    font-family: 'Roboto'!important;
    font-size: 13px;
}

.following-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Roboto'!important;
}
.badge-charity  { background: #d4edda; color: #155724; }
.badge-business { background: #cce5ff; color: #004085; }
.badge-user     { background: #f0f0f0; color: #555; }

.following-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.following-action-btn {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: opacity 0.2s ease, transform 0.1s ease;
    vertical-align: middle;
    line-height: 1.5;
    font-family: 'Roboto' !important;
}
.following-action-btn:hover { opacity: 0.85; transform: translateY(-1px); text-decoration: none; }
.following-btn-view     { background-color: #3498db; color: #ffffff !important; }
.following-btn-unfollow { background-color: #e74c3c; color: #ffffff !important; }

.following-no-data {
    text-align: center;
    color: #999;
    padding: 30px !important;
    font-style: italic;
    font-family: 'Roboto'!important;
}

/* ── View Detail Modal ── */
#followingViewModal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
#followingViewModal.active {
    display: flex;
}
.following-modal-box {
    background: #fff;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    width: 95%;
    max-width: 460px;
    border-radius: 10px;
    overflow: hidden;
    font-family: 'Roboto'!important;
}
.following-modal-header {
    background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.following-modal-header h5 {
    color: #fff;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Roboto'!important;
}
.following-modal-close {
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    font-weight: bold;
    line-height: 1;
    background: none;
    border: none;
    padding: 0;
}
.following-modal-body {
    padding: 22px 24px;
}
.following-modal-logo-wrap {
    text-align: center;
    margin-bottom: 18px;
}
.following-modal-logo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ddd;
    display: none;
}
.following-modal-logo-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #e0e8f0;
    border: 2px dashed #bbb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 32px;
}
#followingModalDetailsTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    font-family: 'Roboto'!important;
}
#followingModalDetailsTable tr { border-bottom: 1px solid #f0f0f0; }
#followingModalDetailsTable tr:last-child { border-bottom: none; }
#followingModalDetailsTable td { padding: 8px 10px; font-family: 'Roboto'!important; }
#followingModalDetailsTable td:first-child { font-weight: 600; color: #555; width: 40%; }
#followingModalDetailsTable td:last-child { color: #333; }
.following-modal-footer {
    padding: 10px 20px 16px;
    text-align: right;
}
.following-modal-footer button {
    padding: 7px 20px;
    background: #6c757d;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 13px;
    cursor: pointer;
    font-family: 'Roboto' !important;
}
.following-modal-footer button:hover { background: #5a6268; }

/* Mobile responsiveness */
@media (max-width: 600px) {
    .following-table thead th,
    .following-table tbody td { padding: 9px 10px; font-size: 12px; }
    .following-action-btn { padding: 4px 9px; font-size: 11px; }
}

.tabpanel-header {
    padding: 18px 30px 8px 30px !important;
    border-bottom: 1px solid #ededed;
}

.tabpanel-content {
    padding: 10px !important;
}
.address-tbl thead th, .address-tbl tfoot td {
    color: #005ca3;
    font-size: 16px;
    font-weight: 700;
    text-transform: none !important;
    padding: 9px 12px;
    border-right: 1px solid #eee;
    line-height: 20px;
}

.setting-box {
    border-bottom: 1px solid #ededed;
    padding-bottom: 10px !important;
    margin-bottom: 10px !important;
}
.custom-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    overflow: hidden;
}

.custom-modal-content {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.custom-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 26px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
}

body.modal-open {
    overflow: hidden;
}

.tabpanel-left.payment-card {
    width: 50px !important;
    height: 50px !important;
    line-height: 50px !important;
}
.payment-block .opening-head {
    background: transparent;
    position: absolute;
    top: 18px !important;
    right: 7px !important;
    background-color: white;
}
.payment-block .opening-head input[type=checkbox]:not(old) {
    width: 16px !important;
    height: 16px!important;
    float: left !important;
}
@if(\Auth::id() &&(\Auth::user()->role_id == 5))
.payment-block {
    border: 1px solid #aaa;
    width: 23%;
    border-radius: 8px;
    margin: 0 22px 22px 0;
    padding: 3px 6px;
    position: relative;
    display: inline-block;
    vertical-align: top;
    background-color: #fff !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.payment-block:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.opening-head {
    background: #8bc34a !important;
}
.check-section.flex {
    border: 1px solid #e3e3e3;
    padding: 10px 10px;
    margin: 20px 0px;
    text-align: center;
    background: #ccfccc !important;
}
.chosen-container .chosen-drop {
    position: absolute;
    top: 100%;
    z-index: 1010;
    width: 100%;
    border: 1px solid #aaa;
    border-top: 0;
    background: #ccfccc!important;
    -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
    clip: rect(0, 0, 0, 0);
    -webkit-clip-path: inset(100% 100%);
    clip-path: inset(100% 100%);
}

@elseif(\Auth::id() && (\Auth::user()->role_id == 6))
.payment-block {
    border: 1px solid #aaa;
    width: 23%;
    border-radius: 8px;
    margin: 0 22px 22px 0;
    padding: 13px 11px;
    position: relative;
    display: inline-block;
    vertical-align: top;
    background-color: #fff !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.payment-block:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.opening-head {
    background: #005ca3 !important;
}
.check-section.flex {
    border: 1px solid #e3e3e3;
    padding: 10px 10px;
    margin: 20px 0px;
    text-align: center;
    background: #669dc8 !important;
}
.chosen-container .chosen-drop {
    position: absolute;
    top: 100%;
    z-index: 1010;
    width: 100%;
    border: 1px solid #aaa;
    border-top: 0;
    background: #589ed3!important;
    -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
    clip: rect(0, 0, 0, 0);
    -webkit-clip-path: inset(100% 100%);
    clip-path: inset(100% 100%);
}
@endif

/* Close button */
.modal.custom-upload-modal .close {
    color: #fff;
    opacity: 1;
    font-size: 20px;
    cursor: pointer;
}

.field-inner.field-title {
    width: 250px !important;
}

.field-inner:nth-child(odd) {
    margin-right: 0px !important;
}
.m-t20 {
    margin-top: 25px !important;
    margin-bottom: 10px;
}
.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 7px !important;
}

.transaction-tbl {
    width: 100%;
    border-collapse: collapse;
}
.transaction-tbl th, .transaction-tbl td {
    border: 1px solid #ccc;
    padding: 8px 12px;
    text-align: center;
}
.transaction-tbl th {
    background-color: #f4f4f4;
    font-weight: 600;
}
.transaction-tbl td a.btn {
    padding: 3px 8px;
    font-size: 13px;
    margin: 0 2px;
}
.tabpanel-header {
    margin-bottom: 15px;
}

.dashboard-tabs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    list-style: none;
    padding: 8px;
    border: 2px solid #000 !important;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    background-color: #f9f9f9;
    margin-bottom: 16px;
}

.dashboard-tabs li {
    background: #fff;
    text-align: center;
    border: 1px solid #ccc;
    padding: 0;
    font-size: 16px;
}

@if(\Auth::id() &&(\Auth::user()->role_id == 5))

ul.nav.nav-tabs.dashboard-tabs li.section-title {
    background: #2d5f2e !important;
}
ul.nav.nav-tabs.dashboard-tabs li.section-title h5 {
    background: #2d5f2e !important;
    color: #fff !important;
    margin: 0 !important;
    padding: 9px 16px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-align: left !important;
    width: 100% !important;
    display: block !important;
    line-height: 1.4 !important;
    border-radius: 6px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.dashboard-tabs li.section-title {
    grid-column: 1 / -1;
    background: #f8f8f8;
    font-weight: bold;
    text-align: center;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
}
.dashboard-header h5 {
    padding: 10px 14px!important;
    font-size: 16px!important;
    color: #000;
    margin-bottom: 0px!important;
    background-color: #ccfccc;
}
ul.nav.nav-tabs.dashboard-tabs li {
    background: #fff;
    border: 1px solid #d0d0d0 !important;
    border-radius: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    align-items: stretch;
    min-width: 0;
    transition: box-shadow 0.15s ease;
}

ul.nav.nav-tabs.dashboard-tabs li:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.RegisterCategory {
    background: #d8f5d0 !important;
    border: 1px solid #5a5a5a !important;
    height: 44px !important;
    color: #000 !important;
    border-radius: 6px !important;
    padding: 8px 40px 8px 12px !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
}
ul.nav.nav-tabs.dashboard-tabs li a:hover,
ul.nav.nav-tabs.dashboard-tabs li.active a {
    background: #2d5f2e !important;
    color: #fff !important;
    border-radius: 22px !important;
}

@elseif(\Auth::id() && (\Auth::user()->role_id == 6))

ul.nav.nav-tabs.dashboard-tabs li.section-title {
    background: #005ca3 !important;
}
ul.nav.nav-tabs.dashboard-tabs li.section-title h5 {
    background: #005ca3 !important;
    color: #fff !important;
    margin: 0 !important;
    padding: 9px 16px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-align: left !important;
    width: 100% !important;
    display: block !important;
    line-height: 1.4 !important;
    border-radius: 6px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.dashboard-tabs li.section-title {
    grid-column: 1 / -1;
    background: #005ca3;
    font-weight: bold;
    text-align: center;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
}
.dashboard-tabs li.section-title h5 {
    color: #fff !important;
    margin: 0;
}
ul.nav.nav-tabs.dashboard-tabs li {
    background: #fff;
    border: 1px solid #d0d0d0 !important;
    border-radius: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    align-items: stretch;
    min-width: 0;
    transition: box-shadow 0.15s ease;
}

ul.nav.nav-tabs.dashboard-tabs li:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.dashboard-header h5 {
    padding: 10px 14px!important;
    font-size: 16px!important;
    color: #fff;
    margin-bottom: 0px!important;
    background-color: #589ed3;
}

.RegisterCategory {
    background: #eaf6fc !important;
    border: 1px solid #5a5a5a !important;
    height: 44px !important;
    color: #000 !important;
    border-radius: 6px !important;
    padding: 8px 40px 8px 12px !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
}
ul.nav.nav-tabs.dashboard-tabs li a:hover,
ul.nav.nav-tabs.dashboard-tabs li.active a {
    background: #005ca3 !important;
    color: #fff !important;
    border-radius: 22px !important;
}

@else

ul.nav.nav-tabs.dashboard-tabs li a:hover,
ul.nav.nav-tabs.dashboard-tabs li.active a {
    background: #005ca3 !important;
    color: #fff !important;
    border-radius: 22px !important;
}
ul.nav.nav-tabs.dashboard-tabs li.section-title {
    background: #2c3e50 !important;
}
ul.nav.nav-tabs.dashboard-tabs li.section-title h5 {
    background: #2c3e50 !important;
    color: #fff !important;
    margin: 0 !important;
    padding: 9px 16px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-align: left !important;
    width: 100% !important;
    display: block !important;
    line-height: 1.4 !important;
    border-radius: 6px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

@endif

.dashboard-tabs li a {
    display: block;
    color: #333;
    text-decoration: none;
}

.dashboard-tabs li a:hover {
    background: #007bff;
    color: #fff;
}
ul.nav.nav-tabs.dashboard-tabs li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 8px 10px;
    color: #333;
    text-decoration: none;
    border-radius: 22px !important;
    white-space: normal;
    word-break: break-word;
    font-size: 12.5px;
    line-height: 1.35;
    text-align: center;
    min-height: 42px;
    font-family: 'Roboto'!important;
    font-weight: 500;
    transition: background 0.18s ease, color 0.18s ease;
}

ul.nav.nav-tabs.dashboard-tabs li a:hover,
ul.nav.nav-tabs.dashboard-tabs li.active a {
    background: #005ca3 !important;
    color: #fff !important;
    text-decoration: none;
}

@media (max-width: 991px) {
    .dashboard-tabs {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px;
        position: static !important;
    }

    ul.nav.nav-tabs.dashboard-tabs li {
        width: 100% !important;
        margin: 0 !important;
    }

    ul.nav.nav-tabs.dashboard-tabs li a {
        font-size: 12px;
        padding: 8px 4px;
        min-height: 40px;
    }
}

ul.nav.nav-tabs.dashboard-tabs li.section-title {
    grid-column: 1 / -1 !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 0 !important;
    margin: 4px 0 2px 0 !important;
    width: 100% !important;
    box-shadow: none !important;
}

@media (max-width: 767px) {
    .search-btn .form-control, .btn {
        width: 65% !important;
    }
	
	.search-btn .form-control, .btn-sm {
        width: 65% !important;
    }

}

@media (max-width: 768px) {
    .dashboard-tabs {
        grid-template-columns: repeat(2, 1fr);
    }
    .tabpanel-btn {
        width: 32%!important;
    }
}

@media (max-width: 767px) {
    .dashboard-tabs {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px;
        padding: 6px;
    }

    ul.nav.nav-tabs.dashboard-tabs li {
        width: 100% !important;
        margin: 0 !important;
    }

    ul.nav.nav-tabs.dashboard-tabs li a {
        font-size: 12px;
        padding: 9px 6px;
        min-height: 42px;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 600px) {
    .tabpanel-btn {
        width: 75% !important;
        margin-left: 50px;
    }
}

@media (max-width: 480px) {
    .dashboard-tabs {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 5px;
        padding: 5px;
    }

    ul.nav.nav-tabs.dashboard-tabs li a {
        font-size: 11px;
        padding: 8px 4px;
        min-height: 40px;
    }
}

@media (max-width: 400px) {
    .tabpanel-btn {
        width: 100% !important;
        padding: 15px 20px 5px 9px !important;
        margin-left: 0px;
        text-align: center !important;
    }
}

.section-title-box {
    background: #fff;
    border-radius: 6px 6px 0 0;
    padding: 14px 20px !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.section-title-box .tab-headleft h4 {
    margin-bottom: 2px;
    text-align: left;
}

.section-title-box .tab-headleft p {
    margin-bottom: 0;
    text-align: left;
}

.section-title-box .tabpanel-btn {
    margin-top: 0 !important;
}

.tabpanel-header .tab-headleft h4,
.tabpanel-header > div > h4,
.tabpanel-header h4 {
    text-align: left !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #000 !important;
    margin-bottom: 4px !important;
}

.tabpanel-header .tab-headleft p,
.tabpanel-header > div > p,
.tabpanel-header p {
    text-align: justify !important;
    color: #555 !important;
    margin-bottom: 0 !important;
}

/* White box wrapper for all tab panels */
.tab-pane-whitebox {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    margin-bottom: 10px;
    overflow: hidden;
}

.save-btn,
.black-btn,
.blue-btn,
button[type="submit"].btn-success,
.pwd-save-btn {
    background: #2d5f2e !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 10px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}
.save-btn:hover,
.black-btn:hover,
.blue-btn:hover,
button[type="submit"].btn-success:hover,
.pwd-save-btn:hover {
    background: #1e4220 !important;
}

@if(\Auth::id() &&(\Auth::user()->role_id == 6))
ul.nav.nav-tabs.dashboard-tabs li.section-title,
.dashboard-tabs li.section-title {
    background-color: #005ca3 !important;
    grid-column: 1 / -1 !important;
    padding: 0 !important;
}

ul.nav.nav-tabs.dashboard-tabs li.section-title h5,
.dashboard-tabs li.section-title h5,
ul.nav.nav-tabs.dashboard-tabs li.section-title h5 *,
.dashboard-tabs li.section-title > h5 {
    background-color: #005ca3 !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    line-height: 1.4 !important;
}

ul.nav.nav-tabs.dashboard-tabs li.section-title a,
.dashboard-tabs li.section-title a {
    color: #ffffff !important;
    background-color: #005ca3 !important;
    pointer-events: none;
}

@elseif(\Auth::id() && (\Auth::user()->role_id == 5))
ul.nav.nav-tabs.dashboard-tabs li.section-title,
.dashboard-tabs li.section-title {
    background-color: #2d5f2e !important;
    grid-column: 1 / -1 !important;
    padding: 0 !important;
}

ul.nav.nav-tabs.dashboard-tabs li.section-title h5,
.dashboard-tabs li.section-title h5,
ul.nav.nav-tabs.dashboard-tabs li.section-title h5 *,
.dashboard-tabs li.section-title > h5 {
    background-color: #2d5f2e !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    line-height: 1.4 !important;
}

ul.nav.nav-tabs.dashboard-tabs li.section-title a,
.dashboard-tabs li.section-title a {
    color: #ffffff !important;
    background-color: #2d5f2e !important;
    pointer-events: none;
}

@endif

ul.nav.nav-tabs.dashboard-tabs li.section-title a {
    pointer-events: none;
    cursor: default;
    background: transparent !important;
    color: transparent !important;
}

@media (max-width: 1200px) {
    ul.nav.nav-tabs.dashboard-tabs {
        grid-template-columns: repeat(6, 1fr) !important;
    }
}

ul.nav.nav-tabs li {
    margin: 0;
    border: 1px solid #ededed;
    background: #fff;
    padding: 0;
    margin-right: 15px;
    width: 100%!important;
}

/* ══════════════════════════════════════════
   PROMO CODES — Styles
   ══════════════════════════════════════════ */
.promo-generator-box {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 22px 24px;
    margin-bottom: 22px;
}
.promo-type-radio-group {
    display: flex;
    gap: 24px;
    margin-bottom: 18px;
    align-items: center;
}
.promo-type-radio-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}
.promo-type-radio-group input[type=radio] {
    width: 16px !important;
    height: 16px !important;
    position: relative !important;
    opacity: 1 !important;
    margin: 0 !important;
}
.promo-prefix-wrap {
    display: flex;
    align-items: center;
    gap: 0;
    max-width: 380px;
}
.promo-prefix-label {
    background: #005ca3;
    color: #fff;
    padding: 8px 14px;
    border-radius: 5px 0 0 5px;
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
    border: 1px solid #005ca3;
}
.promo-manual-input {
    flex: 1;
    border: 1px solid #ccc;
    border-left: none;
    border-radius: 0 5px 5px 0;
    padding: 8px 12px;
    font-size: 14px;
}
.promo-manual-input:focus {
    outline: none;
    border-color: #005ca3;
}
.btn-generate-promo {
    background: #005ca3 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 9px 22px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    margin-top: 14px;
}
.btn-generate-promo:hover:not(:disabled) {
    background: #004a85 !important;
}
.btn-generate-promo:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
}
.info-icon-red {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: #dc3545;
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    margin-left: 4px;
    vertical-align: middle;
    transition: background 0.2s;
    border: none;
    outline: none;
}
.info-icon-red:hover { background: #b02a37; }

/* Promo info popup */
.promo-info-popup {
    display: none;
    position: fixed;
    z-index: 99999;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.45);
}
.promo-info-popup-inner {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 10px;
    padding: 28px 32px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    text-align: center;
}
.promo-info-popup-inner p {
    font-size: 15px;
    color: #333;
    margin-bottom: 18px;
}
.promo-info-popup-close {
    background: #005ca3;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 24px;
    font-size: 14px;
    cursor: pointer;
}

#promoAutoCount {
    max-width: 200px;
    display: inline-block;
}

/* Badge pills for promotions table */
.badge-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}
.badge-active   { background: #d4edda; color: #155724; }
.badge-inactive { background: #f8d7da; color: #721c24; }
.badge-yes      { background: #cce5ff; color: #004085; }
.badge-no       { background: #f0f0f0; color: #555; }

.edit-btn {
    display: inline-block;
    padding: 3px 10px;
    background: #005ca3;
    color: #fff;
    border-radius: 4px;
    font-size: 13px;
    text-decoration: none;
    margin: 2px 1px;
}
.edit-btn:hover { background: #004a85; color: #fff; }

.delete-btn {
    display: inline-block;
    padding: 3px 10px;
    background: #dc3545;
    color: #fff;
    border-radius: 4px;
    font-size: 13px;
    border: none;
    cursor: pointer;
    margin: 2px 1px;
}
.delete-btn:hover { background: #b02a37; }

.actions-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

/* Promotion empty state */
.empty-state {
    text-align: center;
    padding: 30px 20px;
    color: #aaa;
}
.empty-state i { font-size: 36px; margin-bottom: 12px; display: block; }
.empty-state p { font-size: 14px; }

/* ══════════════════════════════════════════
   QUERIES TABLE
   ══════════════════════════════════════════ */
.queries-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.queries-table thead tr {
    background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
    color: #ffffff;
}

.queries-table thead th {
    padding: 13px 15px;
    text-align: left;
    font-weight: 600;
    letter-spacing: 0.4px;
    white-space: nowrap;
    border: none;
}

.queries-table tbody tr {
    border-bottom: 1px solid #e8ecef;
    background: #ffffff;
    transition: background 0.15s ease;
}

.queries-table tbody tr:hover {
    background: #f4f8ff;
}

.queries-table tbody tr:nth-child(even) {
    background: #f9fbff;
}

.queries-table tbody tr:nth-child(even):hover {
    background: #eef4ff;
}

.queries-table tbody td {
    padding: 12px 15px;
    vertical-align: middle;
    color: #444;
}

.table-scroll {
    overflow-x: auto;
}

.message-cell {
    max-width: 260px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.5;
}

.subject-cell {
    max-width: 160px;
    white-space: normal;
    word-break: break-word;
}

.date-cell {
    white-space: nowrap;
    color: #777;
    font-size: 13px;
}

.email-link {
    color: #3498db;
    text-decoration: none;
}

.email-link:hover {
    text-decoration: underline;
}

.no-data {
    text-align: center;
    color: #999;
    padding: 30px !important;
    font-style: italic;
}

/* ── Pagination ── */
.queries-pagination {
    margin-top: 18px;
    padding: 0 2px;
}

.pagination-info {
    float: left;
    font-size: 13px;
    color: #666;
    line-height: 34px;
}

.pagination-links {
    float: right;
}

.page-btn {
    display: inline-block;
    padding: 6px 12px;
    margin: 0 2px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    background: #ffffff;
    color: #3498db;
    border: 1px solid #d0e4f5;
    transition: background 0.15s ease, color 0.15s ease;
}

.page-btn:hover {
    background: #3498db;
    color: #ffffff;
    text-decoration: none;
}

.page-btn-active {
    background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
    color: #ffffff !important;
    border-color: transparent;
    cursor: default;
}

.page-btn-disabled {
    background: #f5f5f5;
    color: #bbb;
    border-color: #e8e8e8;
    cursor: not-allowed;
}

/* ── Action Buttons ── */
.actions-cell {
    white-space: nowrap;
}

.action-btn {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    margin-right: 4px;
    letter-spacing: 0.3px;
    transition: opacity 0.2s ease, transform 0.1s ease;
    vertical-align: middle;
    line-height: 1.5;
}

.action-btn:hover {
    opacity: 0.85;
    transform: translateY(-1px);
    text-decoration: none;
}

.reply-btn {
    background-color: #3498db;
    color: #ffffff !important;
}

/* ── Delete Modal ── */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.55);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.modal-overlay.active {
    visibility: visible;
    opacity: 1;
}

.modal-box {
    background: #ffffff;
    border-radius: 12px;
    padding: 36px 32px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    transform: scale(0.88);
    transition: transform 0.25s ease;
}

.modal-overlay.active .modal-box {
    transform: scale(1);
}

.modal-icon {
    font-size: 38px;
    margin-bottom: 10px;
}

.modal-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px;
}

.modal-body {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 24px;
}

.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.modal-btn {
    padding: 9px 22px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: opacity 0.2s ease;
    line-height: 1.4;
    min-width: 110px;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.modal-btn:hover {
    opacity: 0.85;
    text-decoration: none;
}

.modal-btn-delete {
    background: #e74c3c;
    color: #fff !important;
}

.modal-btn-cancel {
    background: #bdc3c7;
    color: #333;
}

.swal-roboto { font-family: 'Roboto'!important; }
.swal2-popup, .swal2-title, .swal2-html-container, .swal2-confirm, .swal2-cancel {
    font-family: 'Roboto'!important;
}

#donation-summary .btn-sm {
    padding: 4px 12px !important;
    font-size: 13px !important;
    border-radius: 4px !important;
    line-height: 1.5 !important;
    display: inline-block !important;
    white-space: nowrap !important;
}

@media (max-width: 991px) {
    ul.nav.nav-tabs.dashboard-tabs {
        grid-template-columns: repeat(4, 1fr) !important;
        position: static !important;
    }
    ul.nav.nav-tabs.dashboard-tabs li a {
        font-size: 12px;
        padding: 8px 6px;
        min-height: 40px;
    }
}

@media (max-width: 768px) {
    ul.nav.nav-tabs.dashboard-tabs {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 5px !important;
        padding: 8px !important;
    }
    ul.nav.nav-tabs.dashboard-tabs li {
        width: 100% !important;
        margin: 0 !important;
    }
}

@media (max-width: 767px) {
    ul.nav.nav-tabs.dashboard-tabs {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 5px !important;
        padding: 6px !important;
    }
    ul.nav.nav-tabs.dashboard-tabs li a {
        font-size: 11.5px;
        padding: 9px 5px;
        min-height: 40px;
    }
}

@media (max-width: 480px) {
    ul.nav.nav-tabs.dashboard-tabs {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 4px !important;
        padding: 5px !important;
    }
    ul.nav.nav-tabs.dashboard-tabs li a {
        font-size: 11px;
        padding: 8px 4px;
        min-height: 38px;
    }
}

/* ══════════════════════════════════════════════════════════════
   DASHBOARD HEADER
   ══════════════════════════════════════════════════════════════ */
.dashboard-header h5 {
    padding: 11px 16px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin-bottom: 0 !important;
    letter-spacing: 0.2px;
}

@if(\Auth::id() && \Auth::user()->role_id == 5)
.dashboard-header h5 {
    background-color: #2d5f2e !important;
    color: #fff !important;
}
@elseif(\Auth::id() && \Auth::user()->role_id == 6)
.dashboard-header h5 {
    background-color: #005ca3 !important;
    color: #fff !important;
}
@endif

/* ══════════════════════════════════════════
   PASSWORD CHANGE
   ══════════════════════════════════════════ */
.toggle-eye { position: absolute; right: 12px; top: 53px; cursor: pointer; color: #666; }
.toggle-eye:hover { color: #000; }
.password-white-box { background: #fff; border-radius: 8px; padding: 24px 22px 18px 22px; box-shadow: 0 2px 10px rgba(0,0,0,0.07); margin-bottom: 6px; }
.password-input-wrap { position: relative; display: flex; align-items: center; }
.password-input-wrap .form-control { padding-right: 40px !important; padding-left: 34px !important; width: 100% !important; }
.password-input-wrap .toggle-eye { position: absolute; left: 10px; bottom: 8px; top: auto; right: auto; cursor: pointer; color: #666; font-size: 15px; z-index: 10; }
.password-input-wrap .toggle-eye:hover { color: #0b5e2a; }
#changepassword .field-label .star { margin-left: 4px; }
.pwd-save-btn { background: #005ca3 !important; color: #fff !important; border: none !important; border-radius: 25px !important; padding: 10px 28px !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer; transition: background 0.2s ease; }
.pwd-save-btn:hover { background: #004a85 !important; }
.pwd-rule-error { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #dc3545; margin-bottom: 3px; }
.pwd-rule-error i { font-size: 11px; }
.pwd-rule-ok { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #0b5e2a; margin-bottom: 3px; }
.pwd-rule-ok i { font-size: 11px; }
#personaldetail .formBtn { grid-column: 1 / -1 !important; display: flex !important; justify-content: flex-end !important; width: 100% !important; }
#personaldetail .formBtn .m-t20 { display: flex; justify-content: flex-end; width: 100%; }

@media (max-width: 767px) {
    #personaldetail .formBtn, #personaldetail .formBtn .m-t20 { justify-content: center !important; }
    #changepassword .d-flex.justify-content-end { justify-content: center !important; }
    .password-white-box { padding: 16px 14px; }
}

/* ══════════════════════════════════════════
   EY CARD SYSTEM
   ══════════════════════════════════════════ */
.ey-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    overflow: hidden;
    margin-bottom: 24px;
}

.ey-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 12px;
}

.ey-header-blue {
    background: linear-gradient(135deg, #1a3a5c 0%, #2563a8 100%);
}

.ey-header-green {
    background: linear-gradient(135deg, #1f7a3a 0%, #28a745 100%);
}

.ey-header-icon { font-size: 22px; line-height: 1; }
.ey-card-title  { margin: 0; font-size: 17px; font-weight: 600; color: #fff; }
.ey-card-subtitle { margin: 2px 0 0; font-size: 12.5px; color: rgba(255,255,255,.75); }
.ey-card-body { padding: 24px; }

.ey-info-blue {
    font-size: 13px;
    color: #555;
    background: #f0f5ff;
    border-left: 3px solid #2563a8;
    padding: 10px 14px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.ey-info-green {
    font-size: 13px;
    color: #555;
    background: #eefaf1;
    border-left: 3px solid #28a745;
    padding: 10px 14px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.ey-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 22px;
    margin-bottom: 18px;
}
.ey-form-row--3 { grid-template-columns: repeat(3, 1fr); }

.ey-field { display: flex; flex-direction: column; }
.ey-star { color: #e53935; margin-left: 2px; }

.ey-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    border: 1.5px solid #dde3ec;
    border-radius: 7px;
    font-size: 13.5px;
    color: #2c3e50;
    background: #fafbfd;
    transition: border-color .2s, box-shadow .2s;
    outline: none;
}

.ey-input:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52,152,219,.12);
    background: #fff;
    outline: none;
}

.ey-select-wrap {
    position: relative;
    width: 100%;
}

.ey-select-wrap .ey-input {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 34px;
    cursor: pointer;
}

textarea.ey-input {
    min-height: 110px;
    resize: vertical;
}

.ey-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 7px;
}

.ey-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #555;
    pointer-events: none;
}

.ey-error { font-size: 12px; color: #e53935; margin: 4px 0 0; }
.ey-map-hint { display: block; margin-top: 8px; font-size: 12px; color: #777; }

.ey-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}

.ey-btn-cancel {
    padding: 9px 22px;
    border: 1.5px solid #adb5bd;
    border-radius: 6px;
    background: #fff;
    color: #555;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.ey-btn-cancel:hover { background: #f5f5f5; }

.ey-btn-save {
    padding: 9px 26px;
    border: none;
    border-radius: 6px;
    background: #1a3a5c;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.ey-btn-save:hover { background: #2563a8; }

@keyframes eyFlash {
    0%   { background: #ddeeff; }
    100% { background: #fff; }
}
.field-autofilled { animation: eyFlash 2s ease-out; }

/* ══════════════════════════════════════════
   UNIFIED DASHBOARD TYPOGRAPHY
   ══════════════════════════════════════════ */
.tabpanel-header h4, .ey-card-title {
  font-family: 'Roboto'!important;
    font-weight: 700 !important;
    text-transform: none !important;
}

.tabpanel-header h4 {
    font-size: 22px !important;
    color: #333333 !important;
    margin: 0 0 5px 0 !important;
}

/* ══════════════════════════════════════════
   TABLE SCROLL (ANTI-FINGER SHIFT)
   ══════════════════════════════════════════ */
.table-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 15px;
}

/* ══════════════════════════════════════════
   BUTTON PLACEMENT & ALIGNMENT
   ══════════════════════════════════════════ */
.ey-actions-centered {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
    width: 100%;
}

.ey-btn-save-submit {
    padding: 11px 35px;
    border: none !important;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    background: #1a3a5c;
    color: #fff !important;
}

@if(Auth::check() && Auth::user()->role_id == 5)
.ey-btn-save-submit {
    background: #1f7a3a !important;
}
.ey-btn-save-submit:hover {
    background: #28a745 !important;
    transform: translateY(-1px);
}
@else
.ey-btn-save-submit:hover {
    background: #2563a8 !important;
    transform: translateY(-1px);
}
@endif

.tabpanel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 767px) {
    .ey-form-row, .ey-form-row--3 {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .ey-btn-save-submit {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 575px) {
    .ey-card-body { padding: 16px; }
    .ey-actions { flex-direction: column-reverse; }
    .ey-btn-cancel, .ey-btn-save {
        width: 100%;
        text-align: center;
    }
}

/* ── B / C Type Symbol ── */
.following-type-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Roboto'!important;
}
.symbol-charity  { background:#d4edda; color:#155724; border:1px solid #b1dfbb; }
.symbol-business { background:#cce5ff; color:#004085; border:1px solid #b8daff; }

/* ── Table ── */
.following-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
   font-family: 'Roboto'!important;
}
.following-table thead tr,
.queries-table thead tr,
.following-modal-header,
/* ==========================================================
   BRANCH TABLE
========================================================== */

.branch-table {
    width: 100%;
    border-collapse: collapse;
     font-family:Roboto !important;
}

/* Charity - role_id 5 - Green (default) */
.branch-table thead tr {
    background: linear-gradient(135deg, #1a3d1b 0%, #4caf50 100%);
}

/* Business - role_id 6 - Blue */
.branch-table thead tr.role-business {
    background: linear-gradient(135deg, #1a3a5c 0%, #2563a8 100%) !important;
}

.branch-table thead th {
    padding: 14px 15px;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    border: none;
    white-space: nowrap;
    letter-spacing: .3px;
}

.branch-table tbody tr {
    border-bottom: 1px solid #e8ecef;
    background: #fff;
    transition: all .2s ease;
}

.branch-table tbody tr:nth-child(even) {
    background: #f9fbff;
}

.branch-table tbody tr:hover {
    background: #f4f8ff;
}

.branch-table tbody td {
    padding: 12px 15px;
    font-size: 13px;
    color: #444;
    vertical-align: middle;
}

/* ==========================================================
   ADDRESS TABLE
========================================================== */

/* Charity - role_id 5 - Green (default) */
.address-tbl thead tr {
    background: linear-gradient(135deg, #1a3d1b 0%, #4caf50 100%);
}

/* Business - role_id 6 - Blue */
.address-tbl thead tr.role-business {
    background: linear-gradient(135deg, #1a3a5c 0%, #2563a8 100%) !important;
}

/* ==========================================================
   BRANCH ACTION BUTTONS
========================================================== */

.branch-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.branch-btn {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 5px;
    text-decoration: none !important;
    font-size: 12px;
    font-weight: 600;
    color: #fff !important;
    transition: .2s ease;
}

.branch-btn:hover {
    opacity: .85;
    transform: translateY(-1px);
}

.branch-btn-edit {
    background: #3498db;
}

.branch-btn-delete {
    background: #e74c3c;
}

/* ==========================================================
   EMPTY DATA
========================================================== */

.branch-no-data {
    text-align: center;
    padding: 30px !important;
    color: #999;
    font-style: italic;
}

/* ==========================================================
   ADD BRANCH BUTTON DISABLED
========================================================== */

.keyservice-add-btn.disabled {
    background: #999 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* ==========================================================
   MOBILE RESPONSIVE
========================================================== */

@media (max-width: 768px) {

    .branch-table thead th,
    .branch-table tbody td {
        padding: 10px;
        font-size: 12px;
    }

    .branch-btn {
        padding: 4px 8px;
        font-size: 11px;
    }

    .branch-actions {
        flex-direction: column;
    }
}

.following-table thead th {
    padding: 13px 15px;
    text-align: left;
    font-weight: 600;
    letter-spacing: 0.4px;
    white-space: nowrap;
    border: none;
}
.following-table tbody tr {
    border-bottom: 1px solid #e8ecef;
    background: #ffffff;
    transition: background 0.15s ease;
}
.following-table tbody tr:hover { background:#f4f8ff; }
.following-table tbody tr:nth-child(even) { background:#f9fbff; }
.following-table tbody tr:nth-child(even):hover { background:#eef4ff; }
.following-table tbody td {
    padding: 12px 15px;
    vertical-align: middle;
    color: #444;
    font-size: 13px;
}

/* ── Badges ── */
.following-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}
.badge-charity  { background:#d4edda; color:#155724; }
.badge-business { background:#cce5ff; color:#004085; }

/* ── Action buttons ── */
.following-actions { display:flex; gap:6px; flex-wrap:wrap; }
.following-action-btn {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s ease, transform 0.1s ease;
    vertical-align: middle;
    line-height: 1.5;
    font-family: 'Roboto'!important;
}
.following-action-btn:hover { opacity:0.85; transform:translateY(-1px); text-decoration:none; }
.following-btn-view     { background-color:#3498db; color:#ffffff !important; }
.following-btn-unfollow { background-color:#e74c3c; color:#ffffff !important; }
.following-no-data {
    text-align: center;
    color: #999;
    padding: 30px !important;
    font-style: italic;
}

/* ── Shared Modal Backdrop ── */
#followingViewModal,
#unfollowConfirmModal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
#followingViewModal.active,
#unfollowConfirmModal.active { display:flex; }

/* ── Modal Box ── */
.following-modal-box {
    background: #fff;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    width: 95%;
    max-width: 460px;
    border-radius: 10px;
    overflow: hidden;
    font-family: 'Roboto'!important;
}
.following-modal-header {
    background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.following-modal-header h5 {
    color: #fff;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}
.following-modal-close {
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    font-weight: bold;
    line-height: 1;
    background: none;
    border: none;
    padding: 0;
}
.following-modal-body { padding:22px 24px; }

/* ── Logo placeholder ── */
.following-modal-logo-wrap { text-align:center; margin-bottom:16px; }
.following-modal-logo-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #e0e8f0;
    border: 2px dashed #bbb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.following-modal-logo-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* ── Contact strip ── */
#followingModalContactStrip {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 4px;
}
.fmc-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #333;
}
.fmc-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.fmc-icon-name  { background:#e8f4fd; color:#3498db; }
.fmc-icon-email { background:#fff3cd; color:#856404; }
.fmc-icon-phone { background:#d4edda; color:#155724; }
.fmc-muted { color:#aaa; font-style:italic; }
.fmc-text a { color:#3498db; text-decoration:none; }
.fmc-text a:hover { text-decoration:underline; }

/* ── Details table inside modal ── */
#followingModalDetailsTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
#followingModalDetailsTable tr { border-bottom:1px solid #f0f0f0; }
#followingModalDetailsTable tr:last-child { border-bottom:none; }
#followingModalDetailsTable td { padding:8px 10px; }
#followingModalDetailsTable td:first-child { font-weight:600; color:#555; width:40%; }
#followingModalDetailsTable td:last-child  { color:#333; }

/* ── Modal footer ── */
.following-modal-footer { padding:10px 20px 16px; text-align:right; }
.following-modal-footer button {
    padding: 7px 20px;
    background: #6c757d;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 13px;
    cursor: pointer;
   font-family: 'Roboto'!important;
}
.following-modal-footer button:hover { background:#5a6268; }

/* ── Pagination info ── */
.pagination-info { font-size:13px; color:#666; }

@media (max-width:600px) {
    .following-table thead th,
    .following-table tbody td { padding:9px 10px; font-size:12px; }
    .following-action-btn { padding:4px 9px; font-size:11px; }
}

/* ==========================================================
   BRANCH TABLE
========================================================== */

.branch-table{
    width:100%;
    border-collapse:collapse;
     font-family: 'Roboto'!important;
}

.branch-table thead th{
    padding:14px 15px;
    color:#fff;
    font-size:13px;
    font-weight:600;
    border:none;
    white-space:nowrap;
}

.branch-table tbody tr{
    border-bottom:1px solid #e8ecef;
    background:#fff;
    transition:.2s ease;
}

.branch-table tbody tr:nth-child(even){
    background:#f9fbff;
}

.branch-table tbody tr:hover{
    background:#f4f8ff;
}

.branch-table tbody td{
    padding:12px 15px;
    font-size:13px;
    color:#444;
    vertical-align:middle;
}

/* ==========================================================
   ACTION BUTTONS
========================================================== */

.branch-actions{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    align-items:center;
}

.branch-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:85px;
    height:32px;

    padding:0 12px;

    border:none !important;
    border-radius:5px;

    font-size:12px;
    font-weight:600;

    text-decoration:none !important;
    cursor:pointer;

    transition:all .2s ease;
    font-family: 'Roboto'!important;
}

.branch-btn-edit{
    background:#3498db !important;
    color:#fff !important;
}

.branch-btn-edit:hover,
.branch-btn-edit:focus{
    background:#2980b9 !important;
    color:#fff !important;
}

.branch-btn-delete{
    background:#e74c3c !important;
    color:#fff !important;
}

.branch-btn-delete:hover,
.branch-btn-delete:focus{
    background:#c0392b !important;
    color:#fff !important;
}

.branch-btn:hover{
    transform:translateY(-1px);
}

/* ==========================================================
   NO DATA
========================================================== */

.branch-no-data{
    text-align:center;
    padding:30px !important;
    color:#999;
    font-style:italic;
}

/* ==========================================================
   ADD BRANCH BUTTON
========================================================== */

#add-branch-btn.disabled{
    pointer-events:none;
    opacity:.6;
    background:#999 !important;
}

/* ==========================================================
   TABLE SCROLL
========================================================== */

.table-scroll{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:768px){

    .branch-table thead th,
    .branch-table tbody td{
        padding:10px;
        font-size:12px;
    }

    .branch-actions{
        flex-direction:column;
        align-items:flex-start;
    }

    .branch-btn{
        min-width:75px;
        height:30px;
        font-size:11px;
    }
}	
						
    .address-tbl td .btn {
        display: inline-block;
        margin-right: 36px;
        white-space: nowrap;
        vertical-align: middle;
    }
    .address-tbl td { white-space: nowrap; }
    .address-tbl th:nth-child(5),
    .address-tbl td:nth-child(5) {
        width: 14%;
        min-width: 120px;
        text-align: center;
    }
    @media (max-width: 991.98px) {
        .address-tbl td { white-space: normal !important; }
        .address-tbl td.action-buttons .btn {
            display: block !important;
            width: 100%;
            margin: 6px 15px;
        }
        
    }
	@media (max-width: 390px) and (orientation: portrait) {
        .table-scroll { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
        .address-tbl td, .address-tbl th { white-space: nowrap !important; }
    }
	
	/* ==========================================================
   EVENTS TABLE DESIGN
========================================================== */

.event-table{
    width:100%;
    border-collapse:collapse;
    font-family: 'Roboto'!important;
}

.event-table thead tr{
    background:linear-gradient(135deg,#1a3d1b 0%, #4caf50 100%);
}

.event-table thead th{
    padding:14px 15px;
    color:#fff;
    font-size:13px;
    font-weight:600;
    border:none;
    white-space:nowrap;
}

.event-table tbody tr{
    border-bottom:1px solid #e8ecef;
    background:#fff;
    transition:.2s ease;
}

.event-table tbody tr:nth-child(even){
    background:#f9fbff;
}

.event-table tbody tr:hover{
    background:#f4f8ff;
}

.event-table tbody td{
    padding:12px 15px;
    font-size:13px;
    color:#444;
    vertical-align:middle;
}

/* ==========================================================
   STATUS BADGES
========================================================== */

.event-badge{
    display:inline-block;
    padding:4px 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
}

.event-badge.badge-active{
    background:#d4edda;
    color:#155724;
}

.event-badge.badge-inactive{
    background:#f8d7da;
    color:#721c24;
}

/* ==========================================================
   ACTION BUTTONS
========================================================== */

.event-actions{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    align-items:center;
}

.event-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:85px;
    height:32px;

    padding:0 12px;

    border:none !important;
    border-radius:5px;

    font-size:12px;
    font-weight:600;
    line-height:1;

    text-decoration:none !important;
    cursor:pointer;
transition:all .2s ease;
font-family: 'Roboto'!important;
    flex:none;
}

/* Modify Button */

.event-btn-edit{
    background:#3498db !important;
    color:#fff !important;
}

.event-btn-edit:hover,
.event-btn-edit:focus,
.event-btn-edit:active{
    background:#2980b9 !important;
    color:#fff !important;
    text-decoration:none !important;
}

/* Remove Button */

.event-btn-delete{
    background:#e74c3c !important;
    color:#fff !important;
}

.event-btn-delete:hover,
.event-btn-delete:focus,
.event-btn-delete:active{
    background:#c0392b !important;
    color:#fff !important;
    text-decoration:none !important;
}

.event-btn:hover{
    transform:translateY(-1px);
}

/* Bootstrap Override */

.event-btn.btn,
.event-btn.btn-sm,
.event-btn.btn-primary,
.event-btn.btn-danger{
    border:none !important;
    box-shadow:none !important;
}

/* ==========================================================
   NO DATA
========================================================== */

.event-no-data{
    text-align:center;
    padding:30px !important;
    color:#999;
    font-style:italic;
}

/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:768px){

    .event-table thead th,
    .event-table tbody td{
        padding:10px;
        font-size:12px;
    }

    .event-actions{
        flex-direction:column;
        align-items:flex-start;
    }

    .event-btn{
        min-width:75px;
        height:30px;
        font-size:11px;
    }
}

.profile-action-buttons {
    margin-top: 20px;
    text-align: center;
}
@media (min-width: 768px) {
    .profile-action-buttons {
        text-align: right;
    }
}
.company-logo,.user_company_accre_logo {
					width: 100px; height: 100px; object-fit: cover; border-radius: 50% !important; border: 2px solid #ddd;
				}

.disabled-upload { background-color: gray !important; color: #fff !important; cursor: not-allowed !important; pointer-events: none !important; }
.profile-image-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; width: 100%; }
.image-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.image-box { width: 100%; height: auto; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.image-box img { width: 100%; height: 100%; object-fit: cover; }
.image-actions { padding: 10px; text-align: center; background: #f9f9f9; }
@media (max-width: 992px) { .profile-image-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .profile-image-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
@media (max-width: 400px) { .profile-image-grid { grid-template-columns: repeat(1, 1fr); } }

.tabpanel-box {
    border: 1px solid #bbb;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    padding: 14px 16px;
    margin-bottom: 18px;
    background: #fff;
    display: flex;
    align-items: center;        /* ← vertically centre all children */
    gap: 16px;
    transition: box-shadow 0.2s ease;
}

/* ── Left icon/image area: fixed width, centred ── */
.tabpanel-left {
    flex: 0 0 90px; 
    align-items: center;
    justify-content: center;    /* ← centres the SVG/img horizontally */
}

/* ── Right content area fills remaining space ── */
.tabpanel-right {
    flex: 1;
    min-width: 0;
}

/* ── btn-box: Upload + View side by side, not squashed ── */
.tabpanel-right .btn-box {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 8px;
}

.tabpanel-box:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.16);
}
.same-btn {
    min-width: 110px !important;   /* ← was 120px fixed, now min so text fits */
    height: 38px !important;
    padding: 0 18px !important;
    text-align: center;
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    border-radius: 20px !important;
    font-size: 13px !important;
    white-space: nowrap;
}
                .add-link-btn { width: 25px; height: 25px; border-radius: 50%; background-color: darkgray; color: white; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; transition: 0.3s ease; float: inline-end; }
                .add-link-btn:disabled { background-color: gray !important; cursor: not-allowed; }
                .add-link-btn:hover:not(:disabled) { background-color: gray; }
                .remove-link-btn { width: 25px; height: 25px; border-radius: 50%; background-color: #dc3545; color: white; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; transition: 0.3s ease; }
                .remove-link-btn:hover { background-color: #bd2130; }
                input[type="file"] { display: none !important; }
                .custom-upload-modal .modal-dialog { max-width: 900px; }
                .custom-upload-modal.small-modal .modal-dialog { max-width: 250px !important; }
                @if(\Auth::id() &&(\Auth::user()->role_id == 5))
                .custom-upload-modal .modal-header { background-color: #28a745; color: white; }
                @elseif(\Auth::id() && (\Auth::user()->role_id == 6))
                .custom-upload-modal .modal-header { background-color: #005ca3; color: white; }
                @endif
                .custom-upload-modal .modal-title { text-transform: capitalize; font-size: 16px; }
                #ColumnDetail { white-space: nowrap; overflow-x: auto; }
                #ColumnDetail img { max-width: 120px; margin: 5px; display: inline-block; vertical-align: middle; }
				.platform-row-inline {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 10px 0;
}

/* ── Streaming wrapper: full width ── */
#video-links-wrapper {
    width: 100%;
    margin-top: 10px;
}
.platform-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; }
.video-link-field input { width: 100%; }
.add-link-btn { width: 28px; height: 28px; border-radius: 50%; background-color: #6c757d; color: #fff; border: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.add-link-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.remove-link-btn { width: 28px!important; height: 28px!important; border-radius: 50%!important; background-color: #dc3545; color: white; border: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
@media (max-width: 768px) { .platform-row-inline { flex-wrap: wrap; } }
.video-link-field {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    width: 100%;                /* ← ensure full width */
}

.video-platform-select {
    min-width: 130px;
    width: 130px;
    flex-shrink: 0;
}

.video-link-field input[type="text"] {
    flex: 1 1 auto;             /* ← takes all remaining space */
    min-width: 0;               /* ← prevents overflow */
    width: 100% !important;
}
       
.ey-card-header { position: relative; }
.ey-char-badge {
    margin-left: auto;
    font-size: 11.5px;
    color: rgba(255,255,255,.85);
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 20px;
    padding: 3px 11px;
    white-space: nowrap;
    align-self: center;
}

/* ==========================================================
   GLOBAL FORM STYLES
========================================================== */

input[type=checkbox]:not(old),
input[type=radio]:not(old) {
    width: 1em !important;
    margin: 0;
    padding: 0;
    font-size: 1em;
    opacity: 1;
    position: relative;
}

.form-check-input[type=checkbox] {
    border-radius: inherit !important;
}

.form-check-input:focus {
    border-color: #fff !important;
    outline: 0;
}

/* ==========================================================
   OPENING TIMES SECTION
========================================================== */

#openingtimes .row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: 0;
    margin-right: 0;
    margin-left: 0;
}

#openingtimes .row > [class*="col-"] {
    padding: 4px;
}

.opening-hours-section .form-control {
    display: block;
    width: 100%;
    padding: 4px 8px;
    font-size: 13px !important;
    font-weight: 400;
    line-height: 1.4;
    color: #212529;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: .25rem;
}

.opening-hours-section .card {
    background: #fff !important;
    border: 1px solid #bbb !important;
    border-radius: 7px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

.opening-hours-section .card-header {
    background: #8bc34a !important;
    color: #fff !important;
    border: 1px solid #ededed;
    padding: 6px 10px !important;
    font-size: 13px !important;
    font-weight: 600;
}

.opening-hours-section .card-header .fw-bold {
    font-size: 13px !important;
    font-weight: 600 !important;
}

.opening-hours-section .card-header .form-check-input {
    background-color: #000;
    border: 1px solid #ededed;
}

.opening-hours-section .card-body {
    padding: 8px 10px !important;
}

.opening-hours-section .form-label.small {
    font-size: 11px !important;
    margin-bottom: 2px !important;
    display: block;
}

/* ==========================================================
   SAVE BUTTON AREA
========================================================== */

.save-finish-wrap {
    margin-top: 1rem;
    margin-bottom: 12px;
    text-align: center;
}

@media (min-width: 768px) {
    .save-finish-wrap {
        text-align: right;
    }
}

/* ==========================================================
   FOOTER
========================================================== */

.footer ol,
.footer ul {
    padding-left: 8px !important;
}

/* ==========================================================
   KEY SERVICES PANEL
========================================================== */

.tab-pane-whitebox {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 15px rgba(0,0,0,.08);
}

.section-title-box {
    padding: 18px 22px;
    border-bottom: 1px solid #e9ecef;
}

.section-title-box h4 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #222;
}

.section-title-box p {
    margin: 5px 0 0;
    color: #777;
    font-size: 13px;
}

/* ==========================================================
   ADD BUTTON
========================================================== */
/*charity  */
.keyservice-add-btn {
    background: linear-gradient(135deg,#1a3d1b,#4caf50);
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: .3s;
}
.keyservice-add-btn.role-business {
    background: linear-gradient(135deg, #1a3a5c 0%, #2563a8 100%);
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: .3s;
}

.keyservice-add-btn:hover {
    opacity: .9;
    transform: translateY(-1px);
}

.keyservice-add-btn:disabled {
    background: #999 !important;
    cursor: not-allowed;
}

/* ==========================================================
   TABLE
========================================================== */

.keyservice-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Roboto'!important;
}

/* Default (Charity - role_id 5) - Green */
.keyservice-table thead tr {
    background: linear-gradient(135deg, #1a3d1b 0%, #4caf50 100%);
}

/* Business - role_id 6 - Blue */
.keyservice-table thead tr.role-business {
    background: linear-gradient(135deg, #1a3a5c 0%, #2563a8 100%) !important;
}

.following-table thead tr {
    background: linear-gradient(135deg, #1a3d1b 0%, #4caf50 100%);
}

/* Business - role_id 6 - Blue */
.following-table thead tr.role-business {
    background: linear-gradient(135deg, #1a3a5c 0%, #2563a8 100%) !important;
}

.keyservice-table thead th {
    padding: 14px 15px;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    border: none;
    white-space: nowrap;
    letter-spacing: .3px;
}

.keyservice-table tbody tr {
    border-bottom: 1px solid #e8ecef;
    background: #fff;
    transition: all .2s ease;
}

.keyservice-table tbody tr:nth-child(even) {
    background: #f9fbff;
}

.keyservice-table tbody tr:hover {
    background: #f4f8ff;
}

.keyservice-table tbody td {
    padding: 12px 15px;
    font-size: 13px;
    color: #444;
    vertical-align: middle;
}

/* ==========================================================
   STATUS BADGES
========================================================== */

.keyservice-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
}

.badge-active {
    background: #d4edda;
    color: #155724;
}

.badge-inactive {
    background: #f8d7da;
    color: #721c24;
}

/* ==========================================================
   ACTION BUTTONS
========================================================== */

.keyservice-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.keyservice-btn {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 5px;
    text-decoration: none !important;
    font-size: 12px;
    font-weight: 600;
    color: #fff !important;
    transition: .2s ease;
}

.keyservice-btn:hover {
    opacity: .85;
    transform: translateY(-1px);
}

.keyservice-btn-edit {
    background: #3498db;
}

.keyservice-btn-delete {
    background: #e74c3c;
}

/* ==========================================================
   EMPTY DATA
========================================================== */

.keyservice-no-data {
    text-align: center;
    padding: 30px !important;
    color: #999;
    font-style: italic;
}

/* ==========================================================
   MOBILE RESPONSIVE
========================================================== */

@media (max-width: 768px) {

    .section-title-box {
        padding: 15px;
    }

    .tabpanel-btn {
        margin-top: 10px;
        float: none !important;
    }

    .keyservice-add-btn {
        width: 100%;
    }

    .keyservice-table thead th,
    .keyservice-table tbody td {
        padding: 10px;
        font-size: 12px;
    }

    .keyservice-btn {
        padding: 4px 8px;
        font-size: 11px;
		width: 30%!important;
    }

    .keyservice-actions {
        flex-direction: column;
    }
	.event-btn {
        min-width: inherit;
        width: 40%!important;
        margin: 5px 0;
        /* color: #fff; */
    }
	
	.search-btn, .form-control, .btn {
        min-width: 10% !important;
    }
	.btn-sm{
		  min-width: 5% !important;
	}
}

.social-url { width: 58%; border: 1px solid #e8e8e8; font-size: 13px; padding: 2px 4px; border-radius: 5px; flex: 1; }
@media (max-width: 820px){
  #socialMedia .payment-block.social-block{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:16px 14px; }
  #socialMedia .payment-block.social-block .opening-head{ order:3; margin-left:auto; }
  #socialMedia .payment-block.social-block .payment-card{ order:1; min-width:25px; }
  #socialMedia .payment-block.social-block h6{ order:2; margin:0; font-size:14px; font-weight:600; white-space:nowrap; }
  #socialMedia .payment-block.social-block .social-url{ order:4; width:100%; max-width:100%; margin:12px 0 0 0; display:block; }
}
@media (max-width: 767px){
  #socialMedia .payment-block.social-block{ display:flex !important; flex-wrap:nowrap !important; align-items:center !important; gap:8px !important; padding:10px 10px !important; }
  #socialMedia .payment-block.social-block .payment-card{ flex:0 0 36px !important; display:flex !important; align-items:center; justify-content:center; }
  #socialMedia .payment-block.social-block h6{ flex:0 0 auto !important; margin:0 !important; font-size:13px !important; white-space:nowrap !important; }
  #socialMedia .payment-block.social-block .social-url{ flex:1 1 auto !important; min-width:0 !important; max-width:none !important; margin:0 !important; padding:6px 8px !important; font-size:13px !important; }
  #socialMedia .payment-block.social-block .opening-head{ flex:0 0 auto !important; margin-left:6px !important; position:static !important; background:transparent !important; display:flex !important; align-items:center !important; }
}

 /* Hide columns on mobile */
    @media (max-width: 767px) {
        .hide-mobile { display: none !important; }
    }

    /* Options popup animation */
    @keyframes popIn {
        from { transform: scale(.93); opacity: 0; }
        to   { transform: scale(1);   opacity: 1; }
    }

    /* Full-width buttons inside options popup */
    #planOptionsBody .btn,
    #planOptionsBody a.btn {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
        border-radius: 5px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #planOptionsBody a.btn {
        color: #fff !important;
    }

#previewModal .modal-body table th { width: 35%; background: #f8f8f8; font-weight: 600; }
#previewModal .modal-body table td { background: #fff; }
.modal-header { background: #2d5f2e  !important; min-height: inherit; border: 0; }
#subscription-summary .btn.open-preview,
#subscription-summary .btn.print-subscription { padding: 3px 8px !important; font-size: 13px !important; border-radius: 4px !important; line-height: 1.5 !important; height: auto !important; min-width: unset !important; width: auto !important; display: inline-block !important; vertical-align: middle !important; white-space: nowrap !important; margin: 2px 1px !important; }

.swal-small-popup { font-size: 14px !important; padding: 15px !important; }	

/* Key SERVICES */
/* Header Flex Layout */
.ks-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* important for tablet/mobile */
}

/* Left side */
.ks-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Right side */
.ks-right {
    margin-left: auto;
}

/* Button spacing on smaller screens */
@media (max-width: 768px) {
	.keyservice-add-btn {
        width: 50%;
    }
    .ks-header-flex {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .ks-right {
        width: 100%;
        text-align: right;
    }
}

.sm-header-flex{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.sm-left{
    display:flex;
    align-items:center;
    gap:12px;
}

/* ── Grid of platform cards ── */
.sm-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap:16px;
    padding:4px 0 8px;
}

.sm-platform-card{
    border:1px solid #e6e8eb;
    border-radius:12px;
    background:#fafbfc;
    overflow:hidden;
    transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.sm-platform-card.is-active{
    background:#ffffff;
    border-color:#cfe8d8;
    box-shadow:0 2px 8px rgba(26,118,69,0.08);
}

.sm-platform-head{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 14px;
    background:#f1f3f5;
    border-bottom:1px solid #e6e8eb;
}
.sm-platform-card.is-active .sm-platform-head{
    background:linear-gradient(135deg,#2e8b50,#1f6b3a);
    border-bottom-color:transparent;
}

.sm-platform-icon{
    width:30px;
    height:30px;
    border-radius:8px;
    overflow:hidden;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
}
.sm-platform-icon img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.sm-platform-name{
    flex:1;
    font-size:14px;
    font-weight:700;
    color:#5b6470;
}
.sm-platform-card.is-active .sm-platform-name{
    color:#ffffff;
}

.sm-platform-body{
    padding:14px;
}
.sm-platform-card:not(.is-active) .sm-platform-body{
    opacity:.55;
}

.sm-url-input{
    width:100%;
    border:1px solid #dfe3e8;
    border-radius:8px;
    padding:8px 10px;
    font-size:13px;
    color:#2b6cb0;
    background:#ffffff;
}
.sm-url-input:focus{
    outline:none;
    border-color:#2e8b50;
    box-shadow:0 0 0 3px rgba(46,139,80,0.15);
}
.sm-url-input:disabled{
    background:#f1f3f5;
    color:#aab0b8;
    cursor:not-allowed;
}

/* ── Toggle switch ── */
.sm-switch{
    position:relative;
    display:inline-block;
    width:36px;
    height:20px;
    flex-shrink:0;
}
.sm-switch input{
    opacity:0;
    width:0;
    height:0;
}
.sm-switch-slider{
    position:absolute;
    cursor:pointer;
    inset:0;
    background-color:#c7cbd1;
    border-radius:999px;
    transition:.2s;
}
.sm-switch-slider::before{
    content:"";
    position:absolute;
    height:14px;
    width:14px;
    left:3px;
    top:3px;
    background-color:#ffffff;
    border-radius:50%;
    transition:.2s;
    box-shadow:0 1px 2px rgba(0,0,0,0.25);
}
.sm-switch input:checked + .sm-switch-slider{
    background-color:#ffffff;
}
.sm-switch input:checked + .sm-switch-slider::before{
    transform:translateX(16px);
    background-color:#2e8b50;
}

/* ── Footer / save button ── */
.sm-footer{
    display:flex;
    justify-content:flex-end;
    padding-top:18px;
    border-top:1px solid #eef0f2;
    margin-top:8px;
}
.sm-save-btn{
    background:#1f6b3a;
    color:#fff;
    border:none;
    border-radius:8px;
    padding:10px 22px;
    font-size:14px;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    transition:background .2s ease;
}
.sm-save-btn:hover{
    background:#185c31;
}

@media (max-width:576px){
    .sm-grid{
        grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
    }
}

.br-header-flex{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
}
.br-left{
    display:flex;
    align-items:center;
    gap:12px;
}
.br-right{
    flex-shrink:0;
}
#add-branch-btn.disabled{
    opacity:.5;
    pointer-events:none;
    cursor:not-allowed;
}

.ac-header-flex{ display:flex; align-items:center; justify-content:space-between; }
.ac-left{ display:flex; align-items:center; gap:12px; }

.ac-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
    gap:14px;
    padding:4px 0 8px;
    max-height:480px;
    overflow-y:auto;
}

.ac-item-card{
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid #e6e8eb;
    border-radius:12px;
    background:#fafbfc;
    padding:10px 14px;
    transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.ac-item-card.is-active{
    background:linear-gradient(135deg,#2e8b50,#1f6b3a);
    border-color:#1f6b3a;
    box-shadow:0 2px 8px rgba(26,118,69,0.15);
}

.ac-item-icon{
    width:30px;
    height:30px;
    border-radius:6px;
    overflow:hidden;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#2c5f8a;
}
.ac-item-icon img{ width:100%; height:100%; object-fit:contain; }

.ac-item-name{
    flex:1;
    font-size:14px;
    font-weight:600;
    color:#3a4250;
}
.ac-item-card.is-active .ac-item-name{ color:#ffffff; }

/* Toggle switch */
.ac-switch{ position:relative; display:inline-block; width:36px; height:20px; flex-shrink:0; }
.ac-switch input{ opacity:0; width:0; height:0; }
.ac-switch-slider{
    position:absolute; inset:0; cursor:pointer;
    background-color:#c7cbd1; border-radius:999px; transition:.2s;
}
.ac-switch-slider::before{
    content:""; position:absolute; height:14px; width:14px; left:3px; top:3px;
    background-color:#ffffff; border-radius:50%; transition:.2s;
    box-shadow:0 1px 2px rgba(0,0,0,0.25);
}
.ac-switch input:checked + .ac-switch-slider{ background-color:rgba(255,255,255,0.35); }
.ac-switch input:checked + .ac-switch-slider::before{ transform:translateX(16px); background-color:#1f6b3a; }

/* Footer / save button */
.ac-footer{
    display:flex; justify-content:flex-end;
    padding-top:18px; border-top:1px solid #eef0f2; margin-top:8px;
}
.ac-save-btn{
    background:#1f6b3a; color:#fff; border:none; border-radius:8px;
    padding:10px 22px; font-size:14px; font-weight:600;
    display:inline-flex; align-items:center; gap:8px; cursor:pointer;
    transition:background .2s ease;
}
.ac-save-btn:hover{ background:#185c31; }

@media (max-width:576px){
    .ac-grid{ grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); }
}

.pt-header-flex{ display:flex; align-items:center; justify-content:space-between; }
.pt-left{ display:flex; align-items:center; gap:12px; }

.pt-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
    gap:14px;
    padding:4px 0 8px;
}

.pt-item-card{
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid #e6e8eb;
    border-radius:12px;
    background:#fafbfc;
    padding:10px 14px;
    transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.pt-item-card.is-active{
    background:linear-gradient(135deg,#2e8b50,#1f6b3a);
    border-color:#1f6b3a;
    box-shadow:0 2px 8px rgba(26,118,69,0.15);
}

.pt-item-icon{
    width:30px;
    height:30px;
    border-radius:6px;
    overflow:hidden;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
}
.pt-item-icon img{ width:100%; height:100%; object-fit:contain; }

.pt-item-name{
    flex:1;
    font-size:14px;
    font-weight:600;
    color:#3a4250;
}
.pt-item-card.is-active .pt-item-name{ color:#ffffff; }

/* Toggle switch */
.pt-switch{ position:relative; display:inline-block; width:36px; height:20px; flex-shrink:0; }
.pt-switch input{ opacity:0; width:0; height:0; }
.pt-switch-slider{
    position:absolute; inset:0; cursor:pointer;
    background-color:#c7cbd1; border-radius:999px; transition:.2s;
}
.pt-switch-slider::before{
    content:""; position:absolute; height:14px; width:14px; left:3px; top:3px;
    background-color:#ffffff; border-radius:50%; transition:.2s;
    box-shadow:0 1px 2px rgba(0,0,0,0.25);
}
.pt-switch input:checked + .pt-switch-slider{ background-color:rgba(255,255,255,0.35); }
.pt-switch input:checked + .pt-switch-slider::before{ transform:translateX(16px); background-color:#1f6b3a; }

/* Empty state */
.pt-empty{
    text-align:center;
    padding:40px 20px;
    color:#8a93a0;
}
.pt-empty img{ width:60px; margin-bottom:12px; }
.pt-empty h4{ font-size:15px; font-weight:600; color:#5b6470; }

/* Footer / save button */
.pt-footer{
    display:flex; justify-content:flex-end;
    padding-top:18px; border-top:1px solid #eef0f2; margin-top:8px;
}
.pt-save-btn{
    background:#1f6b3a; color:#fff; border:none; border-radius:8px;
    padding:10px 22px; font-size:14px; font-weight:600;
    display:inline-flex; align-items:center; gap:8px; cursor:pointer;
    transition:background .2s ease;
}
.pt-save-btn:hover{ background:#185c31; }

@media (max-width:576px){
    .pt-grid{ grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); }
}

.ot-header-flex{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.ot-left{
    display:flex;
    align-items:center;
    gap:12px;
}

/* ── Grid of day cards ── */
.ot-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
    gap:16px;
    padding:4px 0 8px;
}

.ot-day-card{
    position:relative;
    border:1px solid #e6e8eb;
    border-radius:12px;
    background:#fafbfc;
    overflow:hidden;
    transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.ot-day-card.is-active{
    background:#ffffff;
    border-color:#cfe8d8;
    box-shadow:0 2px 8px rgba(26,118,69,0.08);
}

.ot-day-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 14px;
    background:#f1f3f5;
    border-bottom:1px solid #e6e8eb;
}
.ot-day-card.is-active .ot-day-head{
    background:linear-gradient(135deg,#2e8b50,#1f6b3a);
    border-bottom-color:transparent;
}
.ot-day-card.is-active .ot-day-head.role-business{
    background:linear-gradient(135deg, #1a3a5c 0%, #2563a8 100%) !important;
    border-bottom-color:transparent;
}

.ot-day-name{
    font-size:13px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:#5b6470;
}
.ot-day-card.is-active .ot-day-name{
    color:#ffffff;
}

.ot-day-body{
    display:flex;
    gap:10px;
    padding:14px;
    opacity:1;
}
.ot-day-card:not(.is-active) .ot-day-body{
    opacity:.55;
}

.ot-time-field{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:4px;
}
.ot-time-field label{
    font-size:11px;
    font-weight:600;
    color:#8a93a0;
    text-transform:uppercase;
    letter-spacing:.03em;
}
.ot-time-input{
    border:1px solid #dfe3e8;
    border-radius:8px;
    padding:7px 8px;
    font-size:13px;
    color:#2b2f36;
    background:#ffffff;
    width:100%;
}
.ot-time-input:focus{
    outline:none;
    border-color:#2e8b50;
    box-shadow:0 0 0 3px rgba(46,139,80,0.15);
}
.ot-time-input:disabled{
    background:#f1f3f5;
    color:#aab0b8;
    cursor:not-allowed;
}

/* .ot-closed-badge{
    position:absolute;
    top:10px;
    right:46px;
    font-size:10px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:#8a93a0;
} */

/* ── Toggle switch ── */
.ot-switch{
    position:relative;
    display:inline-block;
    width:36px;
    height:20px;
    flex-shrink:0;
}
.ot-switch input{
    opacity:0;
    width:0;
    height:0;
}
.ot-switch-slider{
    position:absolute;
    cursor:pointer;
    inset:0;
    background-color:#c7cbd1;
    border-radius:999px;
    transition:.2s;
}
.ot-switch-slider::before{
    content:"";
    position:absolute;
    height:14px;
    width:14px;
    left:3px;
    top:3px;
    background-color:#ffffff;
    border-radius:50%;
    transition:.2s;
    box-shadow:0 1px 2px rgba(0,0,0,0.25);
}
.ot-switch input:checked + .ot-switch-slider{
    background-color:#ffffff;
}
.ot-switch input:checked + .ot-switch-slider::before{
    transform:translateX(16px);
    background-color:#2e8b50;
}

/* ── Footer / save button ── */
.ot-footer{
    display:flex;
    justify-content:flex-end;
    padding-top:18px;
    border-top:1px solid #eef0f2;
    margin-top:8px;
}
.ot-save-btn{
    background:#1f6b3a;
    color:#fff;
    border:none;
    border-radius:8px;
    padding:10px 22px;
    font-size:14px;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    transition:background .2s ease;
}
.ot-save-btn:hover{
    background:#185c31;
}

@media (max-width:576px){
    .ot-grid{
        grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
    }
}
.fav-header-flex{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.fav-left{
    display:flex;
    align-items:center;
    gap:12px;
}

.table-scroll{
    width: 100%;
    max-height: 480px;      /* vertical scroll like screenshot's red arrow */
    overflow-y: auto;
    overflow-x: auto;       /* horizontal scroll on small screens */
    border-radius: 0 0 8px 8px;
    -webkit-overflow-scrolling: touch;
}

 .password-input-wrap {
                position: relative;
            }
            .password-input-wrap input {
                padding-right: 38px;
            }
            .password-input-wrap .toggle-eye {
                position: absolute;
                top: 50%;
                right: 12px;
                transform: translateY(-50%);
                cursor: pointer;
                color: #6c757d;
            }
            .password-input-wrap .toggle-eye:hover {
                color: #343a40;
            }

/* ==========================================================
   NOTIFICATIONS TABLE DESIGN (MATCHED TO EVENTS)
========================================================== */

.event-table{
    width:100%;
    border-collapse:collapse;
    font-family:Roboto,sans-serif;
}

@if(\Auth::user()->role_id == 5)
.event-table thead tr{
    background: linear-gradient(135deg, #1a3d1b 0%, #4caf50 100%) !important;
}
@endif

@if(\Auth::user()->role_id == 6)
.event-table thead tr {
    background: linear-gradient(135deg, #1a3a5c 0%, #2563a8 100%)!important;
}
@endif


.event-table thead th{
    padding:14px 15px;
    color:#fff;
    font-size:13px;
    font-weight:600;
    border:none;
    white-space:nowrap;
}

.event-table tbody tr{
    border-bottom:1px solid #e8ecef;
    background:#fff;
    transition:.2s ease;
}

.event-table tbody tr:nth-child(even){
    background:#f9fbff;
}

.event-table tbody tr:hover{
    background:#f4f8ff;
}

.event-table tbody td{
    padding:12px 15px;
    font-size:13px;
    color:#444;
    vertical-align:middle;
}

/* Link Style inside tables */
.event-table tbody td a{
    color: #1250e1 !important;
    text-decoration: underline !important;
    font-weight: 600;
}

/* Responsive wrapper */
.table-scroll{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

/* ==========================================================
   ACTION BUTTONS
========================================================== */

.event-actions{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    align-items:center;
}

.event-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:85px;
    height:32px;
    padding:0 12px;
    border:none !important;
    border-radius:5px;
    font-size:12px;
    font-weight:600;
    line-height:1;
    text-decoration:none !important;
    cursor:pointer;
    transition:all .2s ease;
     font-family:Roboto !important;
    flex:none;
}

/* Remove Button */
.event-btn-delete{
    background:#e74c3c !important;
    color:#fff !important;
}

.event-btn-delete:hover,
.event-btn-delete:focus,
.event-btn-delete:active{
    background:#c0392b !important;
    color:#fff !important;
    text-decoration:none !important;
}

.event-btn:hover{
    transform:translateY(-1px);
}

/* ==========================================================
   NO DATA
========================================================== */

.event-no-data{
    text-align:center;
    padding:30px !important;
    color:#999;
    font-style:italic;
}

/* ==========================================================
   MOBILE RESPONSIVENESS
========================================================== */

@media(max-width:768px){
    .event-table thead th,
    .event-table tbody td{
        padding:10px;
        font-size:12px;
    }

    .event-actions{
        flex-direction:column;
        align-items:flex-start;
    }

    .event-btn{
        min-width:75px;
        height:30px;
        font-size:11px;
    }

    /* Force width on mobile inside scroll container to protect readability */
    .table-scroll table {
        min-width: 760px;
    }
}

/* ── Action bar: right-aligned on desktop/laptop ── */
.ey-actions-right{
    display:flex;
    justify-content:flex-end;
    margin-top:24px;
}
.ey-actions-right .ey-actions{
    display:flex;
    gap:12px;
}

/* ── Cancel button (neutral light) ── */
.ey-btn-cancel{
    padding:11px 26px;
    border-radius:8px;
    border:1px solid #d8dce1;
    background:#f1f3f5;
    color:#333;
    font-weight:600;
    font-size:14px;
    cursor:pointer;
    transition:.2s ease;
}
.ey-btn-cancel:hover{
    background:#e6e9ec;
}

/* ── Save button base ── */
.ey-btn-save{
    padding:11px 26px;
    border-radius:8px;
    border:none;
    color:#fff;
    font-weight:600;
    font-size:14px;
    cursor:pointer;
    box-shadow:0 4px 10px rgba(0,0,0,0.12);
    transition:.2s ease;
}
.ey-btn-save:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 14px rgba(0,0,0,0.16);
}

/* ── Role-based faded gradients ── */
.ey-btn-save--blue{
    background:linear-gradient(135deg,#1a3a5c 0%,#4a90d9 100%);
}
.ey-btn-save--green{
    background:linear-gradient(135deg,#1a3d1b 0%,#5cb85c 100%);
}

/* ── Mobile: stack/center buttons ── */
@media(max-width:768px){
    .ey-actions-right{
        justify-content:center;
    }
    .ey-actions-right .ey-actions{
        flex-direction:column;
        width:100%;
    }
    .ey-btn-cancel,
    .ey-btn-save{
        width:100%;
        text-align:center;
    }
}

.ey-password-wrap {
    position: relative;
}
.ey-password-wrap .ey-input {
    padding-right: 38px;
}
.ey-toggle-eye {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    cursor: pointer;
    color: #6c757d;
}
.ey-toggle-eye:hover {
    color: #343a40;
}
.pwd-rule-error { color:#dc3545; font-size:12px; }
.pwd-rule-ok { color:#0b5e2a; font-size:12px; }

/* ===== ADD / EDIT KEY SERVICE — mirrors Create Promotion form design ===== */

/* ── Section wrapper ── */
.promo-form-section { padding: 40px 0 60px; background: #fff; min-height: 70vh; }

/* ── Card ── */
.promo-form-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 3px 20px rgba(0,0,0,.08);
    overflow: hidden;
}
.promo-form-card-header {
    background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
    padding: 26px 36px 22px;
    color: #fff;
}
.promo-form-card-header.header-green {
    background: linear-gradient(135deg, #14532d 0%, #22c55e 100%);
}
.promo-form-card-header h4 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}
.promo-form-card-header p {
    margin: 0;
    font-size: 13.5px;
    color: rgba(255,255,255,.82);
}
.promo-form-card-body { padding: 32px 36px 36px; }

/* ── Row grid: full-width on its own row, or two-column ── */
.form-row-grid {
    display: grid;
    gap: 0 28px;
}
.form-row-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.form-row-grid.cols-1 { grid-template-columns: 1fr; }

/* ── Field groups ── */
.field-group {
    margin-bottom: 22px;
}
.field-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 7px;
}
.field-group label .star { color: #e74c3c; margin-left: 2px; }

.field-group .form-control,
.field-group textarea.form-control {
    width: 100%;
    border: 1.5px solid #dde3ec;
    border-radius: 7px;
    padding: 10px 14px;
    font-size: 13.5px;
    color: #2c3e50;
    background: #fafbfd;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}
.field-group .form-control:focus,
.field-group textarea.form-control:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52,152,219,.12);
    outline: none;
    background: #fff;
}
.field-group textarea.form-control {
    min-height: 160px;
    resize: vertical;
}

/* ── Checkbox ── */
.checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}
.checkbox-group input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.checkbox-group label { margin: 0; font-size: 13.5px; color: #2c3e50; font-weight: 500; cursor: pointer; }

/* ── Error ── */
.field-error { color: #e74c3c; font-size: 12px; margin-top: 5px; display: block; }

/* ── Divider ── */
.form-divider { border: none; border-top: 1px solid #eef0f4; margin: 26px 0; }

/* ── Footer actions ── */
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid #eef0f4;
}
.btn-save {
    background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
    color: #fff !important;
    border: none;
    padding: 11px 28px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: opacity .2s;
    box-shadow: 0 2px 10px rgba(52,152,219,.3);
}
.btn-save.btn-save-green {
    background: linear-gradient(135deg, #14532d 0%, #22c55e 100%);
    box-shadow: 0 2px 10px rgba(34,197,94,.3);
}
.btn-save:hover { opacity: .88; }
.btn-back {
    background: #ecf0f1;
    color: #2c3e50 !important;
    border: 1px solid #dde3ec;
    padding: 11px 24px;
    border-radius: 7px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background .2s;
}
.btn-back:hover { background: #dfe6e9; color: #2c3e50 !important; text-decoration: none; }

/* ── Responsive ── */
@media(max-width: 767px) {
    .promo-form-card-header { padding: 20px; }
    .promo-form-card-body { padding: 20px; }
    .form-row-grid.cols-2 { grid-template-columns: 1fr; }
}

/* ===== CREATE / EDIT PROMOTION — mirrors Events form design ===== */

/* ── Section wrapper ── */
.promo-form-section { padding: 40px 0 60px; background: #fff; min-height: 70vh; }

/* ── Card ── */
.promo-form-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 3px 20px rgba(0,0,0,.08);
    overflow: hidden;
}
.promo-form-card-header {
    background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
    padding: 26px 36px 22px;
    color: #fff;
}
.promo-form-card-header h4 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}
.promo-form-card-header p {
    margin: 0;
    font-size: 13.5px;
    color: rgba(255,255,255,.82);
}
.promo-form-card-body { padding: 32px 36px 36px; }

/* ── Row grid: full-width on its own row, or two-column ── */
.form-row-grid {
    display: grid;
    gap: 0 28px;
}
.form-row-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.form-row-grid.cols-1 { grid-template-columns: 1fr; }

/* ── Field groups ── */
.field-group {
    margin-bottom: 22px;
}
.field-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 7px;
}
.field-group label .star { color: #e74c3c; margin-left: 2px; }

.field-group .form-control,
.field-group textarea.form-control {
    width: 100%;
    border: 1.5px solid #dde3ec;
    border-radius: 7px;
    padding: 10px 14px;
    font-size: 13.5px;
    color: #2c3e50;
    background: #fafbfd;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}
.field-group .form-control:focus,
.field-group textarea.form-control:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52,152,219,.12);
    outline: none;
    background: #fff;
}
.field-group textarea.form-control {
    min-height: 110px;
    resize: vertical;
}

/* ── File upload ── */
.upload-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1.5px dashed #c5cfe0;
    border-radius: 7px;
    padding: 10px 14px;
    background: #fafbfd;
    cursor: pointer;
    transition: border-color .2s;
}
.upload-wrap:hover { border-color: #3498db; }
.upload-wrap input[type="file"] { flex: 1; border: none; background: transparent; font-size: 13px; }
.upload-wrap .upload-icon-btn {
    background: #3498db; color: #fff;
    border: none; padding: 7px 14px; border-radius: 5px;
    font-size: 13px; cursor: pointer;
}
.promo-preview-img {
    margin-top: 12px;
    border-radius: 6px;
    border: 1px solid #dde3ec;
    object-fit: cover;
}

/* ── Select ── */
.select-wrap select {
    width: 100%;
    border: 1.5px solid #dde3ec;
    border-radius: 7px;
    padding: 10px 14px;
    font-size: 13.5px;
    color: #2c3e50;
    background: #fafbfd;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232c3e50' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
    transition: border-color .2s;
    box-sizing: border-box;
}
.select-wrap select:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52,152,219,.12);
    outline: none;
}

/* ── Checkbox ── */
.checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}
.checkbox-group input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.checkbox-group label { margin: 0; font-size: 13.5px; color: #2c3e50; font-weight: 500; cursor: pointer; }

/* ── Error ── */
.field-error { color: #e74c3c; font-size: 12px; margin-top: 5px; display: block; }

/* ── Divider ── */
.form-divider { border: none; border-top: 1px solid #eef0f4; margin: 26px 0; }

/* ── Footer actions ── */
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid #eef0f4;
}
.btn-save {
    background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
    color: #fff !important;
    border: none;
    padding: 11px 28px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: opacity .2s;
    box-shadow: 0 2px 10px rgba(52,152,219,.3);
}
.btn-save:hover { opacity: .88; }
.btn-back {
    background: #ecf0f1;
    color: #2c3e50 !important;
    border: 1px solid #dde3ec;
    padding: 11px 24px;
    border-radius: 7px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background .2s;
}
.btn-back:hover { background: #dfe6e9; color: #2c3e50 !important; text-decoration: none; }

/* ── Breadcrumb ── */
.breadcrumb-box { background: #fff; border-bottom: 1px solid #e8ecef; padding: 8px 0; }
.breadcrumb-box .breadcrumb { margin: 0; background: none; padding: 4px 0; }
.breadcrumb-box .breadcrumb li a { color: #2980b9; font-size: 13px; }
.breadcrumb-box .breadcrumb li.active { font-size: 13px; color: #7f8c8d; }

/* ── Responsive ── */
@media(max-width: 767px) {
    .promo-form-card-header { padding: 20px; }
    .promo-form-card-body { padding: 20px; }
    .form-row-grid.cols-2 { grid-template-columns: 1fr; }
}


/* ── Form Grid Layout (reuse service-style grid + add multi-col support) ── */
.form-row-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 20px;
    margin-bottom: 0;
    width: 100%;
    box-sizing: border-box;
}
.form-row-grid.cols-1 .field-group {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}
.form-row-grid .field-group {
    box-sizing: border-box !important;
    margin-bottom: 15px !important;
}
.form-row-grid.form-row-2col .field-group {
    flex: 1 1 calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
    width: calc(50% - 10px) !important;
    min-width: 180px;
}
.form-row-grid.form-row-3col .field-group {
    flex: 1 1 calc(33.333% - 14px) !important;
    max-width: calc(33.333% - 14px) !important;
    width: calc(33.333% - 14px) !important;
    min-width: 140px;
}
.form-row-grid .field-group .form-control,
.form-row-grid .field-group input[type="text"],
.form-row-grid .field-group input[type="time"],
.form-row-grid .field-group select {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ── Image Preview ── */
#imagePreviewWrapper { margin-top: 10px; }
#imagePreview { height:100px; width:150px; object-fit:cover; border:1px solid #ddd; border-radius:4px; display:block; }

/* ── Misc ── */
.txthg { height: auto !important; }

/* ── Key Events ── */
.key-event-item { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.key-event-input { flex:1 1 auto; margin-bottom:0 !important; }
.key-event-add-row { display:flex; align-items:center; gap:8px; margin-top:4px; }
.key-event-input-placeholder { flex:1 1 auto; }

/* + Button */
.add-link-btn {
    flex-shrink:0; width:30px !important; height:30px !important;
    border-radius:50% !important; background-color:#28a745 !important;
    color:white !important; border:none !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    cursor:pointer; font-size:20px !important; line-height:1 !important; padding:0 !important;
    transition:background-color 0.3s ease;
}
.add-link-btn:disabled { opacity:0.5; cursor:not-allowed; }

/* − Button */
.remove-key-event {
    flex-shrink:0; width:30px !important; height:30px !important;
    border-radius:50% !important; background-color:#dc3545 !important;
    color:white !important; border:none !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    cursor:pointer; font-size:20px !important; line-height:1 !important; padding:0 !important;
}

/* ── Autofill Flash ── */
@keyframes fieldFlash { 0% { background: #ddeeff; } 100% { background: #fff; } }
.field-autofilled { animation: fieldFlash 2s ease-out; }

/* ── Google Places Dropdown ── */
.pac-container {
    border-radius: 8px !important;
    box-shadow: 0 6px 24px rgba(0,0,0,.15) !important;
    border: 1.5px solid #c5d8ff !important;
    font-family: inherit !important;
    margin-top: 4px !important;
    z-index: 99999 !important;
    max-height: 220px !important;
    overflow-y: auto !important;
}
.pac-item {
    padding: 10px 14px !important;
    font-size: 13.5px !important;
    cursor: pointer !important;
    border-top: 1px solid #f0f4ff !important;
    line-height: 1.5 !important;
}
.pac-item:hover, .pac-item-selected { background: #f0f5ff !important; }
.pac-item-query { font-size:14px !important; font-weight:600 !important; color:#1a1a2e !important; }
.pac-matched { color:#0d6efd !important; font-weight:700 !important; }
.pac-container::-webkit-scrollbar { width: 6px; }
.pac-container::-webkit-scrollbar-track { background: #f8f9fa; }
.pac-container::-webkit-scrollbar-thumb { background: #c5d8ff; border-radius: 3px; }
.pac-container::-webkit-scrollbar-thumb:hover { background: #0d6efd; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .form-row-grid.form-row-2col .field-group {
        flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important;
    }
    .form-row-grid.form-row-3col .field-group {
        flex: 1 1 calc(50% - 10px) !important; max-width: calc(50% - 10px) !important;
        width: calc(50% - 10px) !important; min-width: 130px;
    }
}
@media (max-width: 480px) {
    .form-row-grid.form-row-2col .field-group,
    .form-row-grid.form-row-3col .field-group {
        flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important;
    }
    .add-link-btn, .remove-key-event { width:25px !important; height:25px !important; font-size:16px !important; }
}
@media (max-width: 991.98px) {
    .container, .container-sm { max-width: 100% !important; width: 100% !important; }
}


/* ── Form Grid Layout ── */
.form-row-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 20px;
    margin-bottom: 0;
    width: 100%;
    box-sizing: border-box;
}
.form-row-grid.cols-1 .field-group {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}
.form-row-grid .field-group {
    box-sizing: border-box !important;
    margin-bottom: 15px !important;
}
.form-row-grid.form-row-2col .field-group {
    flex: 1 1 calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
    width: calc(50% - 10px) !important;
    min-width: 180px;
}
.form-row-grid .field-group .form-control,
.form-row-grid .field-group input[type="text"] {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Autofill flash */
@keyframes fieldFlash { 0% { background: #ddeeff; } 100% { background: #fff; } }
.field-autofilled { animation: fieldFlash 2s ease-out; }

/* Google Places dropdown */
.pac-container {
    border-radius: 8px !important;
    box-shadow: 0 6px 24px rgba(0,0,0,.15) !important;
    border: 1.5px solid #c5d8ff !important;
    font-family: inherit !important;
    margin-top: 4px !important;
    z-index: 99999 !important;
    max-height: 220px !important;
    overflow-y: auto !important;
}
.pac-item {
    padding: 10px 14px !important;
    font-size: 13.5px !important;
    cursor: pointer !important;
    border-top: 1px solid #f0f4ff !important;
    line-height: 1.5 !important;
}
.pac-item:hover, .pac-item-selected { background: #f0f5ff !important; }
.pac-item-query { font-size: 14px !important; font-weight: 600 !important; color: #1a1a2e !important; }
.pac-matched { color: #0d6efd !important; font-weight: 700 !important; }
.pac-container::-webkit-scrollbar { width: 6px; }
.pac-container::-webkit-scrollbar-track { background: #f8f9fa; }
.pac-container::-webkit-scrollbar-thumb { background: #c5d8ff; border-radius: 3px; }
.pac-container::-webkit-scrollbar-thumb:hover { background: #0d6efd; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .form-row-grid.form-row-2col .field-group {
        flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important;
    }
}
@media (max-width: 991.98px) {
    .container, .container-sm { max-width: 100% !important; width: 100% !important; }
}

/* Container Grid Setup */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Forms 2 precisely identical columns */
    gap: 20px; /* Synchronizes equal horizontal and vertical gap spacing */
    padding: 20px;
}

/* Individual Grid Card Boxes */
.cards-grid .tabpanel-box {
    background: #ffffff;
    border: 1px solid #dde3ea;
    border-radius: 10px;
    padding: 20px;
	width: 100%!important;
    display: flex;
    align-items: flex-start; /* Aligns all structural rows cleanly to the top */
    gap: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    box-sizing: border-box;
    margin: 0 !important; /* Cleans old legacy uneven break margins */
}

/* Left Elements Styling Container */
.tabpanel-left {
    flex-shrink: 0;
}
.tabpanel-left img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid #dde3ea;
}

/* Right Side Content Areas Styling */
.tabpanel-right {
    flex-grow: 1;
}

.tabpanel-box-inner-full {
    width: 100%;
}

/* Streaming Field Inline Wrappers Setup */
.video-link-field {
    display: flex;
    align-items: center;
    width: 100%;
}

/* Mobile & Tablet Responsive View Optimization */
@media (max-width: 768px) {
    .cards-grid {
        grid-template-columns: 1fr; /* Gracefully wraps into 1 column on smaller devices */
    }
}

/* ==========================================================================
   1. Dashboard Card Elements Grid Setup (Fixes First Dashboard Screen)
   ========================================================================== */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Forms two identical columns */
    gap: 20px; /* Aligns row and column gap dimensions evenly */
    padding: 20px;
}

.cards-grid .tabpanel-box {
    background: #ffffff;
    border: 1px solid #dde3ea;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    align-items: flex-start; /* Locks alignments uniformly to the top */
    gap: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.01);
    box-sizing: border-box;
    margin: 0 !important; /* Removes structural display alignment overlaps */
}

.tabpanel-left {
    flex-shrink: 0;
}

.tabpanel-left img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #dde3ea;
}

.tabpanel-right {
    flex-grow: 1;
}

.tabpanel-box-inner-full {
    width: 100%;
}

.video-link-field {
    display: flex;
    align-items: center;
    width: 100%;
}

/* ==========================================================================
   2. Uniform Gallery Grid Setup (Fixes Modal Images Content Box View)
   ========================================================================== */
.uploaded-gallery-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)); /* Force exactly 5 identical columns */
    gap: 16px; 
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
}

.gallery-card-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Locks Delete block completely to base layer */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    height: 100%;
}

/* Enforces Square Dimensions Over Varying Input Shapes */
.image-aspect-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 Aspect ratio wrapper */
    background-color: #f8fafc;
}

.image-aspect-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Centers and slices overflowing dimensions smoothly without squeeze */
}

.action-footer {
    padding: 10px 8px;
    text-align: center;
    background: #ffffff;
    border-top: 1px solid #f1f5f9;
}

.btn-delete-gallery {
    width: 100%;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: 4px;
    background-color: #dc3545;
    color: #ffffff;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: background-color 0.15s ease;
}

.btn-delete-gallery:hover {
    background-color: #bd2130;
}

.grid-full-width {
    grid-column: 1 / -1;
}

/* ==========================================================================
   3. Responsive Media Optimization Breaks
   ========================================================================== */
@media (max-width: 992px) {
    .uploaded-gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .cards-grid {
        grid-template-columns: 1fr; /* Responsive fallback down to singular rows on mobile */
    }
}

@media (max-width: 576px) {
    .uploaded-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}




.opening-hrs li.active-day .day,
.opening-hrs li.active-day .time {
    color: #0b4f88 !important;
    font-weight: bold !important;
}

/* ============================================================
   ROUNDED EDGES + BORDER on all sidebar boxes and tab content boxes
   ============================================================ */
.search-left .search-box-bar {
    border-radius: 10px !important;
    overflow: hidden;
    margin-bottom: 14px;
}
.search-left .search-box-bar h4 {
    border-radius: 10px 10px 0 0 !important;
}
.detail-tab .tab-content {
    border-radius: 0 0 10px 10px !important;
    overflow: hidden;
}
.detail-tab .tab-pane {
    border-radius: 0 0 10px 10px !important;
}

/* Tab result titles — business blue */
.tab-header {
    background-color: #d0e8f8 !important;
    color: #333 !important;
    padding: 8px 12px !important;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 10px 0;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* Rate & Review tab header alignment fix */
#Rate > .d-flex {
    background-color: #d0e8f8;
    margin: 0 0 10px 0;
    padding: 8px 12px;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
}
#Rate > .d-flex .tab-header {
    background-color: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto;
}

.search-box-bar h4, .tab-header {
    background: #d0e8f8;
    color: #333;
}

.detail-slider .owl-carousel.owl-theme .owl-nav .owl-next {
    position: absolute;
    right: 0;
    top: 50%;
    margin: -19px 0 0 0;
    background: #fff !important;
    color: #fff;
    border: 0;
}

.detail-slider .owl-carousel.owl-theme .owl-nav .owl-prev {
    position: absolute;
    top: 50%;
    left: 0;
    margin: -19px 0 0 0;
    background: #fff !important;
    color: #fff;
    border: 0;
}

.html5-endscreen { display: none; }
.address-box h5 { background: #005ca3; }
.address-box ul.address-list { background: #e3e3e3; }
.inner-banner { padding-top: 8px; }
.bold label, .bold p { font-weight: 500 !important; }

.bg-primary {
    --bs-bg-opacity: 1;
    background-color: #005d9b !important;
}

.modal-backdrop.fade.in { z-index: -69; }
.modal-dialog { margin: 7.75rem auto !important; }
.modal-title { margin: 0px !important; }
.modal-header .close { background: none; border: 0; }

.search-inner li { display: inline-flex !important; }

.address-box {
    background: #f9f9f9;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 200px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.address-box ul.address-list { background: #fff !important; }
ul.address-list { padding: 0px 25px !important; }

.address-list li i { width: 20px; text-align: center; }

/* ============================================================
   NO-IMAGE PLACEHOLDER — sidebar logo boxes (grey circle, dotted border)
   ============================================================ */
.sidebar-no-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px dashed #bbb;
    background: #f0f0f0;
    margin: 0 auto;
    color: #999;
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    line-height: 1.3;
    padding: 8px;
    box-sizing: border-box;
}
.sidebar-no-image i {
    font-size: 22px;
    color: #ccc;
    margin-bottom: 4px;
    display: block;
}

.accredlogo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: inherit;
    border: 2px solid #ddd;
    display: block;
    margin: 0 auto;
}

.logobar {
    border: none !important;
    display: block;
    background: none !important;
    text-align: center;
    margin-bottom: 8px;
}

#sync2 .owl-item { width: 200px !important; margin-right: 12px; }

/* ============================================================
   TABS — Business blue theme (matching Charity layout structure)
   ============================================================ */
.detail-tab ul.nav.nav-tabs li {
    background: #fff;
    width: 100%;
    margin-right: 3px;
    border: 0;
    padding: 0px!important;
}
.nav-tabs.bussines-tabs li a {
    display: flex;
    flex-direction: unset!important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px;
    background: #005ca3!important;
    color: #fff;
    font-weight: 500;
    border: 1px solid #ddd;
    border-radius: 0;
}

.text-warning { color: #ffc107 !important; }
.blue-border-btn.small-btn:hover .text-warning { color: #005ca3 !important; }

/* Tabs base layout */
.nav-tabs.bussines-tabs {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    border-bottom: none;
    gap: 4px;
}
.nav-tabs.bussines-tabs li { flex: 1 1 auto; text-align: center; min-width: 100px; }
.nav-tabs.bussines-tabs li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px;
    background: #005ca3;
    color: #fff;
    font-weight: 500;
    border: 1px solid #ddd;
    border-radius: 6px;
    height: 100%;
}
.nav-tabs.bussines-tabs li.active a,
.nav-tabs.bussines-tabs li a:hover {
    background: #003d70 !important;
    color: #fff !important;
}
.nav-tabs.bussines-tabs li a img { width: 26px; height: 26px; }

/* Tablet & Mobile - stacked vertical layout */
@media (max-width: 1099px) {
    .nav-tabs.bussines-tabs { display: flex; flex-direction: column; width: 100%; gap: 6px; }
    .search-inner li { display: flex!important; }
    .nav-tabs.bussines-tabs li { width: 100%; margin-bottom: 0; flex: 1 1 100% !important; min-width: 100% !important; }
    .nav-tabs.bussines-tabs li a {
        display: flex;
        align-items: center;
        flex-direction: row!important;
        justify-content: flex-start;
        padding: 10px 14px;
        text-align: left;
        border-radius: 4px;
    }
    .nav-tabs.bussines-tabs li a img {
        width: 24px;
        height: 24px;
        margin-right: 10px !important;
    }
}

dl, ol, ul { margin-top: 0; margin-bottom: 1rem !important; }

ul.icon-block li {
    border: 1px solid #ebebeb;
    display: inline-block;
    vertical-align: top;
    width: 44px;
    height: 41px;
    background: #fff;
    line-height: 50px;
    text-align: center;
    font-size: 26px;
    color: #b8b8b8;
    margin: 0px !important;
}

.opening-hrs {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.opening-hrs li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 15px;
    border-bottom: 1px solid #eee;
    width: 100%;
}
.opening-hrs li:last-child { border-bottom: none; }
.opening-hrs .day { flex: 0 0 40%; text-align: left; }
.opening-hrs .time {
    flex: 0 0 55%;
    text-align: right;
    white-space: nowrap;
}
ul.opening-hrs li span { margin: 0px !important; }

/* ============================================================
   SIDEBAR PANEL TITLES — font-size 11.5px
   ============================================================ */
.search-left .search-box-bar h4 span {
    font-size: 11.5px !important;
    font-weight: 600 !important;
}
.search-left .search-box-bar h4 {
    font-size: 11.5px !important;
}

/* ============================================================
   SIDEBAR CONTENT — font-size 10.5px
   ============================================================ */
.search-left .search-inner,
.search-left .search-inner *,
.search-left .search-inner p,
.search-left .search-inner span,
.search-left .search-inner a,
.search-left .search-inner li,
.search-left .search-inner strong,
.search-left .opening-hrs,
.search-left .opening-hrs * {
    font-size: 10.5px !important;
}

.tab-title { font-size: 18px; font-weight: 600; margin-bottom: 15px; }

.service-description {
    text-align: justify;
    font-size: 15px;
    line-height: 1.6;
    padding: 10px;
}

.service-separator {
    border: 0;
    border-top: 1px solid #005ca3;
    margin: 20px 0;
}

.service-link { list-style: none; padding: 0; margin: 0; }
.service-link li { margin-bottom: 8px; }

.modal-header { background-color: #669dc8 !important; color: #fff; }

.custom-owl-prev, .custom-owl-next {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    background: #005d9b !important;
    color: #fff;
    font-size: 28px;
    font-weight: bold;
    padding: 8px 14px;
    border-radius: 50%;
    cursor: pointer;
    line-height: 1;
}
.custom-owl-prev { left: 10px; }
.custom-owl-next { right: 10px; }

.event-btn i, .blue-border-btn.small-btn i { margin-right: 0px !important; }

.carousel-control-prev { left: -25px !important; }
.carousel-control-next { right: -25px !important; }

.carousel-control-prev, .carousel-control-next {
    width: 32px !important;
    height: 32px;
    top: 50% !important;
    transform: translateY(-50%);
    background: #005d9b !important;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
}
.carousel-control-prev i,
.carousel-control-next i { color: #fff; font-size: 22px; }

/* Thumbnails */
.thumb-container { position: relative; width: 100%; }
.thumb-track { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-behavior: smooth; }
.thumb-track::-webkit-scrollbar { display: none; }
.thumb-item { flex: 0 0 auto; margin: 0 5px; cursor: pointer; }
.thumb-item img { height: 120px; width: auto; object-fit: contain; display: block; }
.thumb-item.active img {
    border: 3px solid #005d9b;
    transform: scale(1.03);
    transition: transform 0.15s ease, border 0.15s ease;
}
.thumb-prev, .thumb-next {
    position: absolute;
    top: 50%;
    width: 32px;
    height: 32px;
    background: #005d9b;
    color: #fff;
    border: none;
    border-radius: 50%;
    transform: translateY(-50%);
    z-index: 10;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.thumb-prev { left: -20px; }
.thumb-next { right: -28px; }


@media only screen and (min-width: 1100px) {
    .col-md-8.search-right {
        flex: 0 0 66.6667% !important;
        max-width: 66.6667% !important;
        width: 66.6667% !important;
        float: left !important;
    }
    .col-md-4.search-left {
        flex: 0 0 33.3333% !important;
        max-width: 33.3333% !important;
        width: 33.3333% !important;
        float: left !important;
    }
}

@media only screen and (max-width: 1099px) {
    .container, .container-md, .container-sm { width: 100% !important; padding: 0 12px !important; }
    .search-right, .search-left { width: 100% !important; float: none !important; padding: 0 !important; }
    .common-space { padding: 15px 0 !important; }
    .carousel-control-prev { left: -15px !important; }
    .carousel-control-next { right: -15px !important; }
    .thumb-prev { left: -14px !important; }
    .thumb-next { right: -14px !important; }
    .detail-tab ul.nav.nav-tabs li { width: 100% !important; margin-bottom: 4px; }
    .address-tbl thead th, .address-tbl tfoot td { font-size: 14px !important; }
    .address-tbl tbody td { font-size: 13px !important; }
}

.search-left .search-box-bar .sidebar-separator{
    border: 0 !important;
    border-top: 1px solid #ccc !important;
    margin: 8px 0 !important;
    width: 100% !important;
    display: block !important;
}

.search-left .search-box-bar .search-inner{
    width: 100% !important;
}

.service-description.user-align { text-align: left; }
.service-description.user-align-left   { text-align: left !important; }
.service-description.user-align-right  { text-align: right !important; }
.service-description.user-align-center { text-align: center !important; }
.service-description.user-align-justify{ text-align: justify !important; text-justify: inter-word; }
.service-description.user-align *{ text-align: inherit !important; }

.search-left .search-inner ul.contact-listleft,
.search-left .search-inner ul.contact-listleft li{ width:100% !important; }
.search-left .search-inner ul.contact-listleft li{
    display:flex !important;
    align-items:flex-start !important;
    gap:10px !important;
    flex-wrap:wrap !important;
}
.search-left .search-inner ul.contact-listleft li i{
    flex:0 0 18px !important;
    width:18px !important;
    margin-top:4px;
}
.search-left .search-inner ul.contact-listleft li p{
    flex:1 1 auto !important;
    width:calc(100% - 28px) !important;
    max-width:calc(100% - 28px) !important;
    white-space:normal !important;
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
}
.search-left .search-inner ul.contact-listleft li a{
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
}

.events-table th,
.events-table td,
.rate-review-table th,
.rate-review-table td {
    font-size: 10.5px;
    font-weight: normal;
}

/* Icon-only action buttons */
.icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0d6efd;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
}
.icon-btn i { color: #fff; font-size: 16px; }
.icon-btn .tick {
  display: none;
  position: absolute;
  right: 5px;
  bottom: 5px;
  font-size: 11px;
}
.icon-btn.is-active .tick { display: block; }
.icon-btn:hover { filter: brightness(0.92); }

.blue-border-btn.small-btn { border-radius: 20px !important; }
.event-btn { border-radius: 20px !important; }

/* Review comment/message box font */
#Rate .tab-inners,
#Rate .appendreviews,
#Rate .appendreviews *,
#Rate .appendreviews p,
#Rate .appendreviews span,
#Rate .appendreviews div,
#Rate .appendreviews td,
#Rate .appendreviews th {
    font-size: 10.5px !important;
    line-height: 1.4 !important;
}

#Rate .no-reviews-msg {
    display: block;
    margin: 0 !important;
    padding: 8px 0 !important;
    font-size: 10.5px !important;
    color: #555;
}

/* Create Review button */
#Rate .btn.btn-primary[data-bs-target="#createReviewModal"] {
    font-size: 12px !important;
    padding: 4px 10px !important;
    height: auto !important;
    line-height: 1.5 !important;
    border-radius: 20px !important;
    min-width: 0 !important;
    white-space: nowrap;
}

/* Review listing subtitles */
#Rate .appendreviews .review-col-header,
#Rate .appendreviews th,
#Rate .appendreviews .review-title-col,
#Rate .appendreviews .review-date-col,
#Rate .appendreviews .review-rating-col {
    font-weight: bold !important;
    background-color: #f2f2f2 !important;
    color: #005ca3 !important;
    font-size: 10.5px !important;
    padding: 6px 8px !important;
}

/* Rate & Review listing — alternating rows */
#Rate .appendreviews table tbody tr:nth-child(odd),
#Rate .appendreviews .review-row:nth-child(odd) { background-color: #f9f9f9 !important; }
#Rate .appendreviews table tbody tr:nth-child(even),
#Rate .appendreviews .review-row:nth-child(even) { background-color: #ffffff !important; }
#Rate .appendreviews table thead tr,
#Rate .appendreviews table thead th {
    background-color: #f2f2f2 !important;
    color: #005ca3 !important;
    font-weight: bold !important;
}

/* Promotions table — alternating rows */
#Offer thead tr th {
    background-color: #f2f2f2 !important;
    color: #005ca3 !important;
    font-weight: bold !important;
}
#Offer tbody tr:nth-child(odd) { background-color: #f9f9f9 !important; }
#Offer tbody tr:nth-child(even) { background-color: #ffffff !important; }

/* Services key services list alternating rows */
.service-left ul.service-link li:nth-child(odd),
.service-right ul.service-link li:nth-child(odd) { background-color: #f9f9f9 !important; }
.service-left ul.service-link li:nth-child(even),
.service-right ul.service-link li:nth-child(even) { background-color: #ffffff !important; }

/* Empty state messages (grey italic) */
.empty-state-msg {
    display: block;
    color: #aaa;
    font-style: italic;
    font-size: 10.5px !important;
    margin-top: 8px;
    margin-left: 0;
    padding: 0 12px 12px 12px;
}

.service-left, .service-right {
    padding-left: 0 !important;
    margin-top: 0 !important;
}

.branches-wrapper {
    padding: 0 12px 12px 12px;
}

/* No-image placeholder for main carousel */
.no-image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 400px;
    background: #f0f0f0;
    border: 2px dashed #ccc;
    border-radius: 6px;
    color: #999;
    gap: 12px;
    position: relative;
    overflow: hidden;
}
.no-image-placeholder img {
    max-height: 220px;
    width: auto;
    max-width: 80%;
    object-fit: contain;
    opacity: 0.55;
    display: block;
}
.no-image-placeholder .no-img-label {
    font-size: 16px;
    font-weight: 600;
    color: #888;
    letter-spacing: 0.5px;
    margin-top: 8px;
    text-align: center;
    position: absolute;
    bottom: 28px;
    left: 0;
    width: 100%;
}
.no-image-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 120px;
    min-width: 100px;
    background: #f0f0f0;
    border: 1px dashed #ccc;
    border-radius: 4px;
    color: #aaa;
    font-size: 11px;
    font-style: italic;
    padding: 0 10px;
    text-align: center;
}

/* ============================================================
   OPENSTREETMAP PANEL
   ============================================================ */
.map-panel {
    border-radius: 10px !important;
    overflow: hidden;
    margin-bottom: 14px;
}
.map-panel h4 {
    background-color: #d0e8f8;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    border-radius: 10px 10px 0 0;
    margin: 0;
}
#business-map {
    width: 100%;
    height: 220px;
    border: none;
}
.map-no-location {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    color: #aaa;
    font-style: italic;
    font-size: 10.5px;
    border-top: 1px solid #e0e0e0;
}

.service-left h4, .service-right h4 {
    font-size: 18px; font-weight: 500; text-transform: capitalize; margin-bottom: 12px; padding: 10px!important;
}
.service-left ul.service-link li,
.service-right ul.service-link li {
    font-size: 10.5px; font-weight: 400; padding: 6px 10px; margin-bottom: 5px; margin-left: 20px;
}
.service-left ul.service-link li a,
.service-right ul.service-link li a { font-size: 10.5px; font-weight: 400; color: #005ca3; text-decoration: none; }
ul.service-link li:before {
    content: ''; position: absolute; top: 15px!important; left: 0; width: 5px!important;
    height: 5px!important; margin-left: -3px!important; background: #333; border-radius: 50%;
}
.service-left ul.service-link li a:hover,
.service-right ul.service-link li a:hover { color: #005ca3; text-decoration: underline; }
.address-tbl thead th, .address-tbl tfoot td {
    color: #005ca3; font-size: 10.5px; font-weight: 700; text-transform: capitalize !important;
    padding: 9px 12px; border-right: 1px solid #eee; line-height: 20px;
}
@media (min-width: 992px) { .modal-lg, .modal-xl { max-width: 750px!important; } }
.modal-dialog.modal-lg { max-width: 950px; }
.modal-body, .modal-body table, .modal-body td, .modal-body th, .modal-body p { font-size: 10.5px; line-height: 1.4; }
.modal-title { font-size: 16px; font-weight: 600; }
.modal-body table td, .modal-body table th { padding: 6px 8px; vertical-align: top; word-break: break-word; }
.modal-body table thead th { font-size: 10.5px; font-weight: 600; }
.modal-body { padding: 1rem 1.25rem; }

.nav-tabs.bussines-tabs{
  display:flex !important; flex-wrap:wrap !important; width:100% !important; border-bottom:0 !important;
  align-items:stretch !important; gap:4px !important; background:transparent !important; margin-bottom:8px;
}
.nav-tabs.bussines-tabs > li{ flex:1 1 120px !important; margin:0 !important; float:none !important; display:flex !important; min-width:100px !important; }
.nav-tabs.bussines-tabs > li > a{
  width:100% !important; min-height:56px !important; display:flex !important; align-items:center !important;
  justify-content:center !important; gap:8px !important; padding:10px 8px !important; line-height:1 !important;
  white-space:normal !important; overflow:hidden !important; text-overflow:ellipsis !important;
  border-radius:6px !important; border:1px solid rgba(255,255,255,0.25) !important; transition:all 0.2s ease;
  background:#005ca3 !important; color:#fff !important; text-align:center !important;
}
.nav-tabs.bussines-tabs > li > a:hover{ transform:translateY(-1px); box-shadow:0 3px 8px rgba(0,0,0,0.12); }
.nav-tabs.bussines-tabs > li.active > a,
.nav-tabs.bussines-tabs > li.active > a:hover,
.nav-tabs.bussines-tabs > li.active > a:focus{
  background:#003d70 !important; color:#fff !important;
  box-shadow:0 4px 10px rgba(0,0,0,0.18); border-color:rgba(255,255,255,0.6) !important;
}
.nav-tabs.bussines-tabs > li > a img,
.nav-tabs.bussines-tabs > li > a i{
  width:26px !important; height:26px !important; font-size:26px !important;
  line-height:26px !important; flex:0 0 26px !important; filter:contrast(1.15) brightness(1.1);
}
.nav-tabs.bussines-tabs > li > a .tab-label{ display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.detail-tab{ padding-bottom:6px; }
@media (max-width: 1099px){
  .nav-tabs.bussines-tabs{ flex-direction:column !important; gap:6px !important; }
  .nav-tabs.bussines-tabs > li{ flex:1 1 100% !important; min-width:100% !important; }
  .nav-tabs.bussines-tabs > li > a{
      justify-content:flex-start !important;
      padding-left:14px !important;
      flex-direction:row !important;
      text-align:left !important;
  }
  .nav-tabs.bussines-tabs > li > a img {
      width:24px !important;
      height:24px !important;
      font-size:20px !important;
      line-height:24px !important;
      flex:0 0 24px !important;
      margin-right:10px !important;
  }
}

/* Desktop: icon + label stacked vertically */
@media (min-width: 1100px) {
  .nav-tabs.bussines-tabs > li > a { flex-direction: column !important; }
}

.nav-tabs.bussines-tabs li a img,
.nav-tabs.bussines-tabs li a i{
    width: 26px !important; height: 26px !important; font-size: 26px !important;
    line-height: 26px !important; object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    filter: contrast(1.25) saturate(1.25) brightness(1.05);
}
.nav-tabs.bussines-tabs li a { font-size: 10.5px !important; font-weight: 600 !important; }
.tab-content a{ font-size: 10.5px !important; font-weight: 500 !important; color: #005ca3 !important; text-decoration: none; }
.tab-content a:hover{ text-decoration: underline; }
.modal-dialog{ display:flex !important; align-items:center !important; min-height: calc(100% - 1rem) !important; }
.modal-content{ margin:auto !important; }

#Rate,
#Rate .form-label,
#Rate input,
#Rate textarea {
    font-size: 10.5px;
}

.contact-section .col-md-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 49% !important; }
.contact-info span, .branch-card span, .branch-card i { font-size: 10.5px; font-weight: 500; color: #333; }
.contact-info span { line-height: 22px; margin-left: 20px; }
.contact-info .col-md-6, .contact-info .col-12 { padding-left: 35px; position: relative; }
.contact-info i { position: absolute; left: 25px; top: 3px; font-size: 18px; }
.sub-heading-small { font-size: 10.5px; color: #000 !important; font-weight: 500; text-transform: capitalize; margin: 0 0 8px 0 !important; }
.branch-card { background: #fff; border-radius: 8px; border: 1px solid #eaeaea; transition: 0.25s ease; margin-left: 10px; }
.branch-card:hover { transform: translateY(-4px); box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
.branch-card li span { font-size: 10.5px; font-weight: 500; color: #444; }
.branch-card i { font-size: 17px; width: 20px; }
@media (max-width: 1099px) {
    .branches-section .col-md-6 { flex: 0 0 100% !important; max-width: 100% !important; }
    .contact-section .contact-info .col-md-6, .contact-section .contact-info .col-12 { flex: 0 0 100% !important; max-width: 100% !important; }
}
@media (max-width: 767px) and (orientation: portrait) {
    .branches-section .col-md-6, .contact-section .contact-info .col-md-6 { flex: 0 0 100% !important; max-width: 100% !important; }
}
.table td, .table th { font-size: 10.5px; font-weight: normal!important; line-height: 1.4; }

#createReviewModal .form-label,
#createReviewModal input[readonly],
#createReviewModal .form-control,
#createReviewModal label,
#createReviewModal .modal-body,
#createReviewModal .modal-body * {
    font-size: 12px !important;
    line-height: 1.4 !important;
}
#createReviewModal .modal-title { font-size: 13px !important; }
#createReviewModal .btn { font-size: 12px !important; padding: 4px 10px !important; }
#createReviewModal .star { font-size: 1.2rem !important; }
#createReviewModal #starText { font-size: 12px !important; }
#createReviewModal textarea.form-control { font-size: 12px !important; }
#createReviewModal input.form-control { height: 28px !important; padding: 3px 6px !important; font-size: 12px !important; }

@media (max-width: 1099px) {
    .modal-dialog,
    .modal-dialog.modal-lg { 
        max-width: 92vw !important;
        width: 92vw !important;
        margin: 1rem auto !important;
    }
    .modal-content { width: 100% !important; }
}

 #starRating .star{ font-size:1.2rem; cursor:pointer; color:#ffc107; }
.search-box-bar .search-inner ul{ list-style:none; padding-left:0; margin-bottom:10px!important; }
.search-box-bar .icon-block, .search-box-bar .social-icons, .search-box-bar .payment-icons{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.search-box-bar .icon-block li, .search-box-bar .social-icons li, .search-box-bar .payment-icons li{ display:flex; align-items:center; justify-content:center; }
.search-box-bar .icon-block img, .search-box-bar .social-icons img, .search-box-bar .payment-icons img{ display:block; max-width:45px; height:auto; }

													/* registration page */

#content input, #content select, #content textarea,
#content button, #content label, #content p,
#content span, #content a, #content div,
#content h1, #content h2, #content h3,
#content h4, #content h5, #content h6,
#content .form-control, #content .field-box,
.dashboard-innercontent, .dashboard-innercontent *,
.setting-box *, .raised-box *, .authorization-box *,
.custom-popup-overlay *, .password-hint,
.strength-label, .info-icon-btn, .field-label,
.swal-title, .swal-text, .swal-btn,
.sbHolder, .sbSelector, .sbOptions,
.sbOptions li, .sbOptions a {
   font-family:Roboto !important;
}
.sbHolder{border-radius:5px !important;}

/* Remove separation bar under charity details */
.charity-details-box + .tabpanel-header{
  margin-top:20px;
}

/* Inputs/selects consistent */
.setting-box.setting-box-two .form-control,
.setting-box.setting-box-two .field-box,
.setting-box.setting-box-two .sbHolder,
.setting-box.setting-box-two select,
.setting-box.setting-box-two input[type="text"],
.setting-box.setting-box-two input[type="email"],
.setting-box.setting-box-two input[type="password"]{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  height:44px !important;
  border-radius:5px !important;
      margin-top: 0px;
}

/* -------------------- BANNER FIX ----------------------- */
.inner-banner-content .container { height: 10% !important; }

/* ============================================================
   PANEL TITLES
============================================================ */
.dashboard-innercontent .panel-title,
.dashboard-innercontent .personal-details-title,
.dashboard-innercontent .password-details-title,
h4.panel-title,
h4.personal-details-title,
h4.password-details-title {
  padding: 12px 15px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  border-radius: 6px 6px 0 0 !important;
  text-align: center !important;
  letter-spacing: 0.3px !important;
  display: block !important;
  border: 1px solid #333 !important;
  border-bottom: none !important;
}

/* Business / Basic / Silver / Gold => Blue header */
.business-title,
h4.business-title {
  background-color: #1a6fad !important;
  color: #fff !important;
  border-color: #1a6fad !important;
}

/* Gold plan => Gold header */
.gold-title,
h4.gold-title,
h5.gold-title {
  background-color: #b8860b !important;
  color: #fff8e1 !important;
  border: 1px solid #9a7209 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 14px rgba(184,134,11,0.25), 0 1px 4px rgba(0,0,0,0.12) !important;
  padding: 12px 15px !important;
  text-align: center !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  margin: 0 0 0 0 !important;
}

/* Silver plan => Silver/Grey header */
.silver-title,
h4.silver-title,
h5.silver-title {
  background-color: #7d8a99 !important;
  color: #f0f2f4 !important;
  border: 1px solid #5f6b78 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 14px rgba(100,110,125,0.25), 0 1px 4px rgba(0,0,0,0.12) !important;
  padding: 12px 15px !important;
  text-align: center !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  margin: 0 0 0 0 !important;
}

/* Password Details header => dark green */
 @if($types == 'charity')
h4.password-details-title {
  background-color: #2d5f2e !important;
  color: #fff !important;
  border-color: #2d5f2e !important;
}
@else
	h4.password-details-title {
  background-color: #1a6fad!important;
  color: #fff !important;
  border-color: #2d5f2e !important;
}
@endif

/* Charity => Dark green header */
.charity-title,
h4.charity-title,
h4.personal-details-title {
  background-color: #2d5f2e !important;
  color: #fff !important;
  border-color: #2d5f2e !important;
}

/* ============================================================
   RAISED BOXES
============================================================ */
.raised-box,
.dashboard-innercontent .raised-box,
#content .raised-box {
  background: #fff !important;
  border: 1px solid #333 !important;
  border-top: none !important;
  border-radius: 0 0 8px 8px !important;
  padding: 18px 16px 14px !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.15), 0 1px 4px rgba(0,0,0,.10) !important;
  margin-bottom: 22px !important;
}

/* Section unit wrapper */
.section-unit { margin-bottom: 22px; }

/* ============================================================
   FORM GRID  (3-col desktop → 2-col tablet → 1-col mobile)
============================================================ */
.setting-box.setting-box-two {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 18px;
  align-items: start;
}

.setting-box.setting-box-two .field-inner {
  width: 100% !important;
  margin: 0 !important;
  display: block !important;
  float: none !important;
}

.setting-box.setting-box-two .form-control,
.setting-box.setting-box-two .field-box,
.setting-box.setting-box-two .sbHolder,
.setting-box.setting-box-two select,
.setting-box.setting-box-two input[type="text"],
.setting-box.setting-box-two input[type="email"],
.setting-box.setting-box-two input[type="password"] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  height: 44px !important;
  border-radius: 5px !important;
}

.setting-box.setting-box-two textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.setting-box.setting-box-two .field-label {
  display: block;
  font-weight: 600;
  text-transform: capitalize;
  margin-bottom: 5px;
  font-size: 14px;
}

/* Full row blocks */
.setting-box.setting-box-two .form-box,
.setting-box.setting-box-two .section-unit,
.setting-box.setting-box-two .authorization-box,
.setting-box.setting-box-two .submit-wrap {
  grid-column: 1 / -1 !important;
}

/* ============================================================
   PASSWORD SECTION — 2 columns inside the raised box
============================================================ */
.password-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
  align-items: start;
}
.password-grid .field-inner {
  width: 100% !important;
  margin: 0 !important;
}
.password-grid .form-control,
.password-grid input[type="password"],
.password-grid input[type="text"] {
  width: 100% !important;
  height: 44px !important;
  border-radius: 5px !important;
}
.password-grid .field-label {
  display: block;
  font-weight: 600;
  margin-bottom: 5px;
  font-size: 14px;
}
.password-grid .full-col { grid-column: 1 / -1; }

/* ============================================================
   PASSWORD TOGGLE
============================================================ */
.password-wrapper { position: relative; }
.password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #666;
  font-size: 18px;
  z-index: 10;
}
.password-toggle:hover { color: #333; }

/* ============================================================
   PASSWORD HINT  (small red text — reduced font size)
============================================================ */
.password-hint {
  color: #c0392b;
  font-size: 11px !important;
  margin-top: 4px;
  display: block;
  line-height: 1.4;
   font-family:Roboto !important;
}

/* ============================================================
   PASSWORD STRENGTH METER
============================================================ */
.strength-wrap { margin-top: 6px; }
.strength-bar-bg {
  background: #e8e8e8;
  border-radius: 6px;
  height: 8px;
  overflow: hidden;
}
.strength-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 6px;
  transition: width .3s ease, background .3s ease;
}
.strength-label {
  font-size: 12px;
  margin-top: 4px;
  font-weight: 500;
   font-family:Roboto !important;
}

/* ============================================================
   INFO ICON BUTTON
============================================================ */
.info-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1a6fad;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  margin-left: 6px;
  vertical-align: middle;
  line-height: 1;
  flex-shrink: 0;
   font-family:Roboto !important;
}
.info-icon-btn:hover { background: #154f80; }

/* ============================================================
   CUSTOM ALERT POPUPS  (overlay + box)
============================================================ */
.custom-popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.48);
  z-index: 99999;
  align-items: center;
  justify-content: center;
}
.custom-popup-overlay.active { display: flex; }

.custom-popup-box {
  background: #fff;
  border-radius: 10px;
  max-width: 480px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
  overflow: hidden;
}

.custom-popup-header {
  background: #2d5f2e;
  color: #fff;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 600;
  position: relative;
   font-family:Roboto !important;
}
.custom-popup-close {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
   font-family:Roboto !important;
}
.custom-popup-body {
  padding: 18px 20px;
  font-size: 13.5px;
  line-height: 1.7;
  text-align: left;
   font-family:Roboto !important;
}
.custom-popup-body a { color: #1a6fad; word-break: break-all; }
.custom-popup-body ul { padding-left: 20px; margin-bottom: 8px; }
.custom-popup-footer {
  padding: 10px 18px 16px;
  text-align: right;
}
.custom-popup-footer button,
.swal-box .swal-btn {
  background: #2d5f2e;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 7px 22px;
  font-size: 13px;
  cursor: pointer;
   font-family:Roboto !important;
}
.custom-popup-footer button:hover,
.swal-box .swal-btn:hover { background: #1f4320; }

/* SweetAlert-style custom dialog */
.swal-box {
  background: #fff;
  border-radius: 12px;
  max-width: 380px;
  width: 90%;
  box-shadow: 0 10px 40px rgba(0,0,0,.30);
  text-align: center;
  padding: 30px 24px 22px;
   font-family:Roboto !important;
}
.swal-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}
.swal-icon.error   { background: #fde8e8; color: #c0392b; }
.swal-icon.warning { background: #fef3e2; color: #e67e22; }
.swal-icon.success { background: #e8f5e9; color: #2d5f2e; }
.swal-title  { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: #222;  font-family:Roboto !important; }
.swal-text   { font-size: 14px; color: #555; margin-bottom: 20px; line-height: 1.5;  font-family:Roboto !important; }

/* ============================================================
   AUTHORIZATION BOX
============================================================ */
.authorization-box {
  background: #fff !important;
  border: 1px solid #333 !important;
  border-radius: 8px !important;
  width: 100%;
  padding: 18px 16px !important;
  margin-top: 0 !important;
  margin-bottom: 18px !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.10) !important;
}
.authorization-box .filter-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.authorization-box .filter-checkbox input[type="checkbox"] {
  margin-top: 4px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.authorization-box .filter-checkbox label {
  text-align: justify;
  line-height: 1.6;
  margin: 0;
  font-size: 14px;
   font-family:Roboto !important;
}

/* ============================================================
   SUBMIT BUTTONS
============================================================ */
button.submit-btn-green,
.dashboard-innercontent button.submit-btn-green,
#regForm button.submit-btn-green,
button.submit-btn-blue,
.dashboard-innercontent button.submit-btn-blue,
#regForm button.submit-btn-blue {
  display: inline-block !important;
  border: none !important;
  border-radius: 25px !important;
  padding: 11px 36px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background .2s, box-shadow .2s !important;
  float: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  outline: none !important;
   font-family:Roboto !important;
  margin-top: 4px !important;
}
button.submit-btn-green,
.dashboard-innercontent button.submit-btn-green {
  background: #2d5f2e !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(45,95,46,.30) !important;
}
button.submit-btn-green:hover { background: #1f4320 !important; }
button.submit-btn-blue,
.dashboard-innercontent button.submit-btn-blue {
  background: #1a6fad !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(26,111,173,.30) !important;
}
button.submit-btn-blue:hover { background: #134f82 !important; }

/* Hide old blue-btn if it exists elsewhere */
.setting-box.setting-box-two .blue-btn { display: none !important; }

/* ============================================================
   CHARITY LOCK — disable personal section until fields filled
============================================================ */
.personal-lock-overlay { position: relative; }
.personal-lock-overlay.locked::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.65);
  border-radius: 8px;
  z-index: 5;
  pointer-events: all;
  cursor: not-allowed;
}
.personal-lock-overlay.locked input,
.personal-lock-overlay.locked select,
.personal-lock-overlay.locked textarea,
.personal-lock-overlay.locked button {
  pointer-events: none;
}

/* ============================================================
   HIDE REG TYPE ON CHARITY
============================================================ */
.charity-mode .box_registration_type,
.charity-mode .registration-type-wrap { display: none !important; }

/* ============================================================
   ✅ COUNTRY CODE + MOBILE INPUT GROUP
============================================================ */
.mobile-input-group {
  display: flex;
  gap: 0;
  width: 100%;
}
.mobile-input-group .country-code-select {
  flex: 0 0 90px;
  height: 44px !important;
  border-radius: 5px 0 0 5px !important;
  border: 1px solid #ced4da;
  border-right: none !important;
  background: #f8f9fa;
  font-size: 14px;
   font-family:Roboto !important;
  padding: 0 4px 0 8px;
  cursor: pointer;
  color: #333;
  appearance: auto;
  box-sizing: border-box;
}
.mobile-input-group .country-code-select:focus {
  outline: none;
  border-color: #1a6fad;
  background: #fff;
}
.mobile-input-group .mobile-number-input {
  flex: 1;
  height: 44px !important;
  border-radius: 0 5px 5px 0 !important;
  border: 1px solid #ced4da !important;
  padding: 0 12px !important;
  font-size: 14px;
   font-family:Roboto !important;
  box-sizing: border-box;
  width: 100% !important;
}
.mobile-input-group .mobile-number-input:focus {
  outline: none;
  border-color: #1a6fad !important;
  box-shadow: none;
}

/* ============================================================
   MISC
============================================================ */
.form-control.field-box.upload-text {
  height: 44px;
  border: 1px solid #908c8c;
  border-radius: 5px !important;
  margin-top: 0;
}
.sbHolder { border-radius: 5px !important; }

/* ============================================================
   MODAL
============================================================ */
.modal-body {
  text-align: justify;
  font-size: 14px;
  line-height: 1.6;
   font-family:Roboto !important;
}
.modal-body h3, .modal-body h4, .modal-body h5 {
  margin-top: 15px;
  margin-bottom: 10px;
   font-family:Roboto !important;
}
.modal-body p { margin-bottom: 12px; }

#privacypolicy .modal-title,
#termsAndConditions .modal-title {
  width: 100%;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
   font-family:Roboto !important;
}
.signup-close {
  position: absolute;
  top: 12px;
  right: 15px;
  z-index: 9999;
  color: #fff !important;
  opacity: 1;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  background: transparent;
  border: none;
  outline: none;
  text-shadow: none;
}
.signup-close:hover, .signup-close:focus { color: #e6e6e6 !important; cursor: pointer; }

.policy-heading {
  color: #00679B; display: block; position: relative;
  padding-right: 25px; text-decoration: none;
}
.policy-heading:hover { color: #004d73; }
.policy-heading.active { font-weight: 600; color: #003f5c; }
.policy-heading:after  { content: "+"; position: absolute; right: 0; top: 0; }
.policy-heading.active:after { content: "−"; }
.panel-body { border-top: 1px solid #ddd; }

.terms-heading {
  color: #00679B; display: block; position: relative;
  padding-right: 25px; text-decoration: none;
}
.terms-heading:hover { color: #004d73; }
.terms-heading.active { font-weight: 600; color: #003f5c; }
.terms-heading:after  { content: "+"; position: absolute; right: 0; top: 0; font-size: 18px; }
.terms-heading.active:after { content: "−"; }

/* ============================================================
   TABLET: 2 columns
============================================================ */
@media (max-width: 991px) {
  .setting-box.setting-box-two {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 14px !important;
  }
  .password-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ============================================================
   MOBILE: 1 column
============================================================ */
@media (max-width: 767px) {
  .container, .container-sm, .offer-content, .dashboard-innercontent {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .dashboard-innercontent {
    margin: 0 !important;
    padding: 15px !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  .common-space { padding: 10px 0 !important; }
  .tabpanel-header h4 { width: 100%; display: block; margin: 0; text-align: center; }
  .setting-box.setting-box-two {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    display: grid !important;
  }
  .password-grid { grid-template-columns: 1fr !important; }
  .gray-bg, #content, section.gray-bg {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
  }
  .authorization-box .filter-checkbox label { hyphens: auto; }
  button.submit-btn-green,
  button.submit-btn-blue { width: 100% !important; }
  .mobile-input-group .country-code-select { flex: 0 0 80px; font-size: 13px; }
}

/* Password wrapper fix */
.password-wrapper {
    position: relative !important;
    display: block !important;
}

.password-wrapper .form-control,
.password-wrapper input[type="password"],
.password-wrapper input[type="text"] {
    padding-right: 40px !important; /* ✅ icon ke liye space */
    width: 100% !important;
}

.password-toggle {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
    color: #666 !important;
    font-size: 16px !important;
    z-index: 10 !important;
    display: inline-block !important; 
}

.password-toggle:hover { color: #333 !important; }
.pw-wrapper {
  position: relative;
}

.pw-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #777;
  font-size: 17px;
  z-index: 5;
}

.pw-toggle:hover { color: #333; }

.pw-hint {
  display: block;
  font-size: 11px;
  color: #c0392b;
  margin-top: 5px;
  line-height: 1.5;
}