@media (max-width:576px) {
    .profile-user-wid {
        margin-top: -80px;
    }
}
/* ── Common form field styles ── */
.form-control,
.form-select {
    border-radius: 0px;
}
.btn{
    font-weight: 500;
}
.form-control:focus,
.form-select:focus {
    box-shadow: none;
    outline: none;
    border-color: #ced4da;
}
.card{
    border-radius: 12px;
}
.fs-15{
    font-size: 15px;
    font-weight: 500;
}
.profile-title h4,
.profile-title p{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}
.linelimit{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-title p{
    font-size: 15px;
}
.banner-bg{
    height: 120px;
	overflow: hidden;
	text-align: center;
	margin: auto;
}
.banner-bg img{
    width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.banner-edit-icon{
    position: absolute;
    border: 2px solid #fff;
    right: 10px;
    top: 10px;
    border-radius: 50%;
    padding: 1px 4px;
    background: #777;
    z-index: 9;
}
.banner-edit-icon i{
    font-size: 16px;
    color: #fff;
}
.profile-edit-icon{
    position: relative;
    border: 2px solid #fff;
    left: -25px;
    bottom: -20px;
    border-radius: 50%;
    padding: 9px 5px 2px 5px;
    background: #777;
    z-index: 9 !important;
}
.profile-edit-icon i{
    font-size: 16px;
    color: #fff;
}
.avatar-title i{
    color: white;
}
.card-column-h180{
    max-height: 180px;
    overflow: auto;
}
.card-column-h210{
    max-height: 210px;
    overflow: auto;
}
.txtlimit-180{
    max-width: 180px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.txtlimit-140{
    max-width: 140px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.txtlimit-100{
    max-width: 100px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.txtlimit-90{
    max-width: 90px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding-top: 10px;
}
.profile-description p{
    line-height: 1.4rem;
    font-size: 14px;
    text-align: justify;
    padding: 0px 10px;
}
.vCard-profile-address h6{
    font-weight: normal;
    line-height: 1.8;
    font-size: 14px;
    padding-left: 16px;
}
.table td{
    font-size: 15px !important;
}
.badge-soft-primary,
.badge-soft-secondary,
.badge-soft-success,
.badge-soft-danger,
.badge-soft-warning{
    border: 1px solid transparent;
}
.badge-soft-primary:hover,
.badge-soft-secondary:hover,
.badge-soft-success:hover,
.badge-soft-danger:hover,
.badge-soft-warning:hover{
    border: 1px solid #ddd;
}
.card-title{
    font-size: 17px;
    color: #444;
    font-weight: 500;
}
.dropdown-menu-end {
    max-height: 260px;
    overflow-y: auto;
    scrollbar-width: none;
}
.dropdown-menu-end::-webkit-scrollbar {
    display: none;
}
.dropdown-menu-end a{
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 15px;
}
.menu-dropdown a{
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    font-size: 15px !important;
    font-weight: 500;
}
.user-table{
    min-height: 60vh;
}
.modal-table{
    min-height: 40vh;
}
/* Status info dropdown panel — positioned via JS (position:fixed) so it
   escapes table-responsive overflow and auto-flips when near viewport edge */
.status-info-dropdown {
    width: 280px;
    height: 210px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}
.status-info-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #adb5bd;
    margin-bottom: 2px;
}

.user-table .dropdown-menu{
    z-index: 9999 !important;
}

/* ── Table column minimum widths (keeps content readable on mobile) ── */
#membersTable th:nth-child(1) { min-width: 36px; }    /* Checkbox */
#membersTable th:nth-child(2) { min-width: 150px; }   /* Name */
#membersTable th:nth-child(3) { min-width: 70px; }    /* ID */
#membersTable th:nth-child(4) { min-width: 115px; }   /* Phone Number */
#membersTable th:nth-child(5) { min-width: 120px; }   /* Request Type */
#membersTable th:nth-child(6) { min-width: 90px; }    /* Date */
#membersTable th:nth-child(7) { min-width: 100px; }   /* Status */
#membersTable th:nth-child(8) { min-width: 56px; }    /* Action */
.form-control,
.form-select,
.input-group-text{
    border: 1px solid #efefef;
}
.form-label{
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.custom-form .form-control,
.custom-form .form-select{
    padding: 12px 10px;
    font-size: 15px;
    font-weight: 500;
}

.image-upload{
    width: 100px;
    height: 100px;
	overflow: hidden;
	text-align: left;
}
.image-upload img{
    width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.feature-item{
    cursor:pointer;
}
.account-deletion{
    padding: 0px 0px 10px;
}
.account-deletion h5{
    line-height: 1.6;
    font-size: 14px;
    text-align: justify;
}
.login-thumb{
    margin-top: -30px;
}
.login-thumb .img-thumbnail{
    border: 4px solid #fff;
}
/* .account-pages{
    height: 100vh;
    background-image: url(../images/banner-bg.jpeg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
} */
.verify-input input[type="number"]{
    font-size: 25px;
    letter-spacing: .8em;
    text-align: center;
}
.verify-input input[type=number]::-webkit-inner-spin-button, 
.verify-input input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}


/* =================TEMPLATE==================== */
.template-main{
    padding-bottom: 40px;
 }
.template-img{
    height: 480px;
    overflow:auto;
}
.template-img::-webkit-scrollbar {
    width: 1px;
  }
.template-active{
    border: 2px solid #26ca00;
}
.template-disable{
    border: 2px solid #d4d4d4;
}
.theme-footer{
    width: 100%;
    height: 30px;
    background: #fff;
    padding-top: 20px;
    padding-bottom: 40px;
}
.theme-left{
    font-size: 16px;
    font-weight: 500;
    padding-left: 30px;
}
.theme-right{
    text-align: right;
    padding-right: 40px;
}
.theme-right a{
    color: #fff;
}
.theme-right :hover{
    color: #fff;
}

/* ── Submit button loader dots ── */
@keyframes blink-dot {
    0%, 80%, 100% { opacity: 0; }
    40%            { opacity: 1; }
}
.btn-loading-dots span {
    animation: blink-dot 1.2s infinite;
    opacity: 0;
}
.btn-loading-dots span:nth-child(1) { animation-delay: 0s;   }
.btn-loading-dots span:nth-child(2) { animation-delay: 0.4s; }
.btn-loading-dots span:nth-child(3) { animation-delay: 0.8s; }

/* ── Topnav dropdown z-index & mobile fix ── */
.topnav .dropdown-menu {
    z-index: 9999 !important;
}

/* Primary nav items — consistent font size and weight across all breakpoints */
.topnav .navbar-nav > li > .nav-link {
    font-size: 1rem !important;
    font-weight: 500 !important;
}

/* Dropdown sub-items — larger than primary nav items */
.topnav .navbar-nav .dropdown-menu .dropdown-item {
    font-size: 1rem !important;
}

@media (max-width: 991.98px) {
    .topnav .dropdown .dropdown-menu {
        position: static !important;
        float: none;
        padding-left: 1rem;
    }
    .topnav .dropdown .dropdown-menu.show {
        display: block !important;
    }
    .topnav .dropdown .dropdown-menu .dropdown-item {
        padding: 12px 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    }
    .topnav .dropdown .dropdown-menu .dropdown-item::before {
        content: '– ';
        opacity: 0.4;
    }
    .topnav .dropdown .dropdown-menu .dropdown-item:last-child {
        border-bottom: none;
    }
}

/* ── Searchable Select Widget ── */
    .ss-wrapper {
      position: relative;
      display: flex;
      width: 100%;
    }

    /* The visible trigger button mimics .form-select */
    .ss-trigger {
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      white-space: nowrap;
      background-image: var(--bs-form-select-bg-img, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"));
      background-repeat: no-repeat;
      background-position: right 0.75rem center;
      background-size: 16px 12px;
      padding-right: 2.25rem !important;
      user-select: none;
    }

    /* Placeholder state — trigger text muted when no option selected */
    .ss-wrapper.ss-is-placeholder .ss-trigger {
      color: #adb5bd;
    }

    /* Floating dropdown panel */
    .ss-panel {
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      z-index: 9999;
      min-width: 220px;
      background: #fff;
      border: 1px solid rgba(0,0,0,.15);
      border-radius: 8px;
      box-shadow: 0 8px 24px rgba(0,0,0,.12);
      overflow: hidden;
      display: none;              /* toggled via .ss-open */
    }
    .ss-wrapper.ss-open .ss-panel { display: flex; flex-direction: column; }

    .ss-search {
      padding: 8px;
      border-bottom: 1px solid #f0f0f0;
    }
    .ss-search input {
      width: 100%;
      border: 1px solid #dee2e6;
      border-radius: 6px;
      padding: 5px 10px;
      font-size: .875rem;
      outline: none;
      transition: border-color .15s;
    }
    .ss-search input:focus { 
        border-color: #dee2e6;
        box-shadow: none;
        outline: none; 
    }
    .ss-list {
      max-height: 220px;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
    }
    .ss-option {
      padding: 8px 14px;
      cursor: pointer;
      font-size: .9rem;
      transition: background .1s;
    }
    .ss-option:hover, .ss-option.ss-focused { background: #f0f4ff; }
    .ss-option.ss-selected { background: #e7f0ff; font-weight: 500; }

/* ── Multi-select (ss-multiple) ── */
.ss-wrapper--multiple .ss-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
/* Tick-only indicator — invisible when unselected */
.ss-check {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  position: relative;
  visibility: hidden;
}
.ss-option.ss-selected .ss-check {
  visibility: visible;
}
.ss-option.ss-selected .ss-check::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 0px;
  width: 7px;
  height: 13px;
  border: 2.5px solid #556ee6;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

    .ss-empty {
      padding: 10px 14px;
      font-size: .85rem;
      color: #888;
      text-align: center;
    }

/* ── ss-multiple: Select All / Deselect All action bar ── */
.ss-actions {
    display: flex;
    gap: 6px;
    padding: 6px 10px;
    border-bottom: 1px solid #eef0f7;
}
.ss-action-btn {
    flex: 1;
    padding: 4px 0;
    font-size: .78rem;
    font-weight: 500;
    border: none;
    border-radius: 5px;
    background: #f5f7ff;
    color: #555;
    cursor: pointer;
    transition: background .15s;
}
.ss-action-btn:hover {
    background: #e7f0ff;
}

/* ── Requests nav badge ── */
.nav-requests-badge {
    font-size: 10px;
    padding: 3px 6px;
    vertical-align: middle;
    line-height: 1;
}

@keyframes badge-pulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0   rgba(220, 53, 69, 0.5); }
    50%       { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(220, 53, 69, 0);   }
}
.nav-requests-badge.badge-pulse {
    animation: badge-pulse 1.5s ease-in-out infinite;
}

/* ── Filter row field height ── */
.filter-scroll-inner .form-control,
.filter-scroll-inner .ss-trigger,
.filter-scroll-inner .btn {
    height: 42px;
    min-height: 42px;
    line-height: 1;
}
.filter-scroll-inner a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Filter row ── */
.filter-scroll-inner {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 8px 0;
}
.filter-item {
    flex: 1 1 140px;
    min-width: 140px;
}
.filter-item-btn {
    flex: 0 0 115px;
    min-width: 115px;
}
.filter-item-btn-lg {
    flex: 0 0 145px;
    min-width: 145px;
}
.filter-item-btn .btn {
    white-space: nowrap;
}
.filter-item-btn .btn:hover,
.filter-item-btn .btn:focus,
.filter-item-btn .btn:focus-visible,
.filter-item-btn .btn:active,
.filter-item-btn .btn:active:focus {
    box-shadow: none !important;
    outline: none !important;
    border-color: transparent !important;
}
@media (max-width: 991.98px) {
    .filter-scroll-inner {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .filter-scroll-inner::-webkit-scrollbar { display: none; }
    .filter-item { flex: 0 0 140px; }
    .filter-item:first-child { flex: 0 0 70vw; }
    .filter-item-btn { flex: 0 0 115px; }
    .filter-item-btn:first-child { flex: 0 0 115px; }
    .filter-item-btn-lg { flex: 0 0 145px; }
}

/* ── Page access checkbox dropdown ── */
.page-access-menu {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}
.page-access-menu .dropdown-item {
    display: flex;
    align-items: left;
    gap: 5px;
    cursor: pointer;
    white-space: nowrap;
}
.page-access-menu .dropdown-item input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
}

/* ── User role radio dropdown ── */
.user-role-menu {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}
.user-role-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    white-space: nowrap;
}
.user-role-menu .dropdown-item input[type="radio"] {
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
}

/* ── Date Range Picker ──────────────────────────────────────────────────── */
input.dr-picker {
    cursor: pointer;
    background-color: #fff;
    touch-action: manipulation;
}

.dr-panel {
    display: none;
    position: fixed;
    z-index: 9999;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    padding: 14px;
}
.dr-panel.dr-open { display: block; }

.dr-grid {
    display: flex;
    gap: 20px;
}

.dr-cal { min-width: 224px; }

.dr-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.dr-cal-title {
    font-size: 13px;
    font-weight: 600;
    color: #343a40;
}
.dr-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    color: #6c757d;
    border-radius: 4px;
    font-size: 16px;
    line-height: 1;
}
.dr-nav-btn:hover { background: #f8f9fa; color: #343a40; }
.dr-nav-hidden { visibility: hidden; pointer-events: none; }

.dr-day-names,
.dr-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.dr-day-name {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #adb5bd;
    padding: 4px 0;
}
.dr-day {
    text-align: center;
    font-size: 12px;
    padding: 5px 2px;
    cursor: pointer;
    border-radius: 4px;
    color: #343a40;
    user-select: none;
    position: relative;
    z-index: 0;
}
.dr-day:not(.dr-day-empty):hover { background: #e9ecef; }
.dr-day-empty { cursor: default; }

.dr-start,
.dr-end {
    background: #556ee6 !important;
    color: #fff !important;
    border-radius: 4px;
}
.dr-in-range {
    background: #eef0fd;
    border-radius: 0;
    color: #343a40;
}
.dr-start:not(.dr-single) { border-radius: 4px 0 0 4px; }
.dr-end:not(.dr-single)   { border-radius: 0 4px 4px 0; }

.dr-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
}

@media (max-width: 767px) {
    .dr-grid { flex-direction: column; gap: 0; }
    .dr-cal  { min-width: 256px; }
    .dr-panel { max-width: calc(100vw - 24px); }
}

/* ── Request Detail Table — responsive stacking on small screens ─────────── */
.req-detail-table td,
.req-detail-table th { white-space: normal; word-break: break-word; }

@media (max-width: 575px) {
    .req-detail-table tbody tr:not(.table-light) { display: flex; flex-direction: column; }
    .req-detail-table tbody tr:not(.table-light) td { width: 100% !important; border-top: none; }
    .req-detail-table tbody tr:not(.table-light) td:first-child {
        padding-bottom: 2px;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        border-bottom: none;
    }
    .req-detail-table tbody tr:not(.table-light) td:last-child { padding-top: 2px; }
}


/* ── Invoice / Payments Preview — Print (A4) ── */
@media print {
    @page { size: A4 portrait; margin: 0; }

    /* Compensate with padding so content doesn't touch the paper edge */
    #invoiceContent { padding: 12mm 15mm !important; }

    #page-topbar,
    .topnav,
    .footer,
    .rightbar-overlay,
    .d-print-none { display: none !important; }

    body,
    #layout-wrapper { background: #fff !important; }

    .main-content { margin: 0 !important; padding: 0 !important; }
    .page-content { padding: 0 !important; }
    .container-fluid { padding: 0 !important; }
    .row { margin: 0 !important; }
    .col-lg-12 { padding: 0 !important; }

    .card { box-shadow: none !important; border: none !important; margin: 0 !important; }
    .card-body { padding: 0 !important; }

    /* Fix table-responsive clipping the price column */
    .table-responsive { overflow: visible !important; }
    .table-responsive table th,
    .table-responsive table td {border-color: #ccc; }
    /* Only description column (2nd) wraps — No. and Price stay on one line */
    .table-nowrap td:nth-child(2),
    .table-nowrap th:nth-child(2) { white-space: normal !important; word-break: break-word; }

    .table-nowrap td:nth-child(1),
    .table-nowrap th:nth-child(1),
    .table-nowrap td:nth-child(3),
    .table-nowrap th:nth-child(3) { white-space: nowrap !important; }

    table { font-size: 13px; }
    .invoice-created-by { font-size: 11px !important; }
}

/* ── PDF capture state — same table rules as @media print + larger fonts ── */
.pdf-capture { font-size: 14px !important; }
.pdf-capture address,
.pdf-capture .mt-3 { font-size: 14px !important; }
.pdf-capture table td,
.pdf-capture table th { font-size: 12px !important; border-color: #ccc; }
.pdf-capture h3 { font-size: 16px !important; }
.pdf-capture h4 { font-size: 20px !important; }
.pdf-capture .invoice-created-by { font-size: 11px !important; }

.pdf-capture .table-responsive { overflow: visible !important; }

.pdf-capture .table-nowrap td:nth-child(2),
.pdf-capture .table-nowrap th:nth-child(2) { white-space: normal !important; word-break: break-word; }

.pdf-capture .table-nowrap td:nth-child(1),
.pdf-capture .table-nowrap th:nth-child(1),
.pdf-capture .table-nowrap td:nth-child(3),
.pdf-capture .table-nowrap th:nth-child(3) { white-space: nowrap !important; }

/* Settings accordion — button font size */
#settingsAccordion .accordion-button { font-size: 1rem; }

/* admin_members.html — tighten gap between label and value in stat card */
#membersStatSection .mini-stats-wid .flex-grow-1 p { margin-bottom: 2px; }

/* admin_payments.html — refresh icon below stat value */
.stat-refresh-icon {
    font-size: 18px;
    color: #adb5bd;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    transition: color 0.2s;
}
.stat-refresh-icon:hover { color: #556ee6; }
.stat-refresh-icon.spinning {
    animation: stat-spin 0.8s linear 2;
    transition: none;
    color: #556ee6;
    pointer-events: none;
}
@keyframes stat-spin {
    to { transform: rotate(360deg); }
}
.accordion-button {
    font-weight: 500 !important;
}