.upcomingCompleted-section,
.orderViewDetails-section {
    top: 120px;
    position: absolute;
    inset-inline-start: 20%;
    width: 80%;
}
.upcomingCompleted-section .container,
.orderViewDetails-section .container{
    background-color: var(--colorBackgroundMyAccountSection);
    border-radius: 16px;
}
.orderViewDetails-section h3:first-child{
    color: var(--colorHeaderOnOrder); 
    font-size: clamp(1.25rem, 2vw, 1.75rem); /* 20px → 28px */
}
.order-info span{
  font-weight: var(--fontWeight700);
}
.order-info .confirmOrder-btn{
    background: var(--colorButtonSave);;
    color: var(--whiteColor);
    width: 20%;
    border-radius: 100px;
}
.upcomingCompleted-section .switch-btn.active,
.orderViewDetails-section .service-switch-btn.active{
    background-color: var(--colorShowAllLink) !important;
    color: var(--colorBackgroundRowOdd) !important;
    border-radius: 100px !important;
}
.orderViewDetails-section .orderinfo-btn,
.orderViewDetails-section .serviceBillings-btn,
.orderViewDetails-section .visitNotes-btn,
.orderViewDetails-section .history-btn,
.upcomingCompleted-section .switch-btn{
    background-color: var(--colorBackgroundMyAccountSection) !important;
    border: 1px solid var(--colorShowAllLink) !important;
    color: var(--colorShowAllLink) !important;
    font-weight: var(--fontWeight500) !important;
    border-radius: 100px !important;
}
/********************************/

/* When dropdown menu is moved outside table, keep SAME look as table dropdown */
.my-Orders .dropdown-floating {
  padding-inline-start: 8px;
  padding-inline-end: 8px;
}

.my-Orders .dropdown-floating .dropdown-item {
  padding: 8px 16px;
  margin-top: 8px;
  border-radius: 100px;
}

.my-Orders .dropdown-floating .dropdown-item:first-child {
  margin-top: 0;
}
#filterCollapse{
    width: 60%;
}
/********************************/
.my-Orders .form-select,
.my-Orders input {
    background-color: var(--colorBackgroundFilterTable);
    color: var(--colorlable) !important; /* placeholder color */
    border: none;
    border-radius: 500px;
    padding: 12px 16px;
}
.my-Orders .search img{
    width: clamp(14px, 1vw, 20px);
}
/*********************/
.page{
  margin: 16px;
   
}
.page .pagination .page-link {
  border-radius: 500px;
  width: 40px;
  height: 40px;
  color: var(--colorHeadTableNewOrder);
  border: none;
}
.page .pagination .link{
  background: none;
}
.page .pagination .page-link:hover,
.page .pagination .link:focus{
    border: 1px solid var(--colorShowAllLink);
    background-color: rgba(233, 225, 255, 1);
    color: var(--colorShowAllLink);
    outline: none !important;
    box-shadow: none !important;
}
.active-page{
    border: 1px solid var(--colorShowAllLink) !important;
    background-color: rgba(233, 225, 255, 1) !important;
}
/************************/

.d-custom-none {
    display: block !important;
}
/************************/
/*button on table name optionsMenu*/
.my-Orders .tableParent .dropdown-menu{
    padding-inline-start: 8px;
    padding-inline-end: 8px;
}
.my-Orders .tableParent .dropdown-menu .dropdown-item{ 
    padding: 8px 16px;
    margin-top: 8px;
    border-radius: 100px;
}

/******************************/
/*service billing modal , history view modal*/
.service-billings .view-datails-modal .order-info {
    display: block !important;
}
.history .view-datails-modal .order-info {
    display: block !important;
}
/************************/
/*responsive small secreen my oder "upcomming" page*/
@media screen and (min-width: 1097px) {
    .d-custom-none {
        display: none !important;
    }
}
@media screen and (min-width:991px){
    .my-Orders .filterSearch {
        display: flex;
        align-items: center;
        justify-content: space-between;
       
    }

    html[dir='rtl'] .my-Orders .filterSearch input {
        text-align: right;
    }
    .small{
        display: none !important;
    }
}

@media screen and (max-width:990px){
    .my-Orders {
        inset-inline-start: 0;
        width: 100%;
        top: 180px;
    }
    .my-Orders .searchsmall{
        display: block !important;
    }
    .my-Orders .searchlarge{
        display: none;
    }
    .my-Orders #filterCollapse {
        display: flex;         
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 24px;
        overflow: hidden;      
        height: 0;             
        transition: height 0.3s ease; 
    }

    .my-Orders #filterCollapse.show {
        height: auto;         
    }

    .my-Orders #filterCollapse .iteam {
        width: calc((100% - 12px)/2);
    }
    #filterCollapse {
        width: 100%;
    }
}

@media screen and (max-width:770px){
    .my-Orders .search{
        width: 100%;
    }
    .my-Orders .heading{
        display: flex;
        flex-direction: column;
        align-items: flex-start !important;
        gap: 32px;
        padding-inline-end: 8px;
    }
    .my-Orders .upcomingCompleted-btn{
        width: 100%;
        justify-content: space-between;
    }
    .my-Orders .upcomingCompleted-btn .upcoming-btn,
    .my-Orders .upcomingCompleted-btn .completed-btn{
       width: 48%;
    }
   
}
@media screen and (max-width:1900px) {
    .my-Orders span{
        font-size: var(--fontSizeNewOrder);
    }
    
}

.my-Orders .tableParent table {
    width: 100%;
    table-layout: fixed !important;
    min-width: 1100px; 
}

.my-Orders .tableParent th:last-child,
.my-Orders .tableParent td:last-child {
    width: 50px !important;
}

.my-Orders .tableParent table td:last-child,
.my-Orders .tableParent table th:last-child {
    overflow: visible !important;
    position: relative; 
}

.my-Orders .tableParent table tbody td:last-child {
    overflow: visible !important;
}

.my-Orders .tableParent .dropdown-menu {
    z-index: 9999;
}


/* My Orders actions dropdown (works inside table AND when moved to body) */
.my-Orders .dropdown-menu.ap-actions,
.dropdown-menu.ap-actions.dropdown-floating {
    border: 0;
    padding: 10px;
    border-radius: 14px;
    min-width: 220px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

.my-Orders .dropdown-menu.ap-actions .ap-actions__btn,
.dropdown-menu.ap-actions.dropdown-floating .ap-actions__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 44px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none; /* important: remove blue underline */
    margin: 8px 0;
    border: 2px solid transparent;
}

.my-Orders .dropdown-menu.ap-actions .ap-actions__btn--primary,
.dropdown-menu.ap-actions.dropdown-floating .ap-actions__btn--primary {
    background: #5b2aa9;
    color: #fff !important;
}

.my-Orders .dropdown-menu.ap-actions .ap-actions__btn--danger,
.dropdown-menu.ap-actions.dropdown-floating .ap-actions__btn--danger {
    background: #fff;
    color: #e30000 !important;
    border-color: #e30000;
}


/* ================================
   Fix table header/value truncation
   Scope: My Orders only
================================ */

/* 1) Let header wrap (show full column titles) */
.my-Orders .tableParent table thead th {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: initial !important;
    line-height: 1.2;
    vertical-align: middle;
}

/* 2) Keep body cells readable (no forced ellipsis) */
.my-Orders .tableParent table tbody td {
    overflow: visible !important;
    text-overflow: initial !important;
}

/* 3) TIME column: show full "08:00 AM – 09:00 AM" (no cut) */
.my-Orders .tableParent table thead th:nth-child(3),
.my-Orders .tableParent table tbody td:nth-child(3) {
    white-space: nowrap !important;
    min-width: 170px;
}

/* 4) Service / Payment / Status columns: give them enough width */
.my-Orders .tableParent table thead th:nth-child(5),
.my-Orders .tableParent table tbody td:nth-child(5) {
    min-width: 140px;
}

.my-Orders .tableParent table thead th:nth-child(7),
.my-Orders .tableParent table tbody td:nth-child(7) {
    min-width: 140px;
}

.my-Orders .tableParent table thead th:nth-child(8),
.my-Orders .tableParent table tbody td:nth-child(8) {
    min-width: 140px;
}

/* Prevent columns overlapping */
.my-Orders .tableParent table {
    width: 100%;
    table-layout: fixed;
}

    /* Ensure cells don't draw over each other */
.my-Orders .tableParent table th,
.my-Orders .tableParent table td {
    overflow: hidden;
    text-overflow: ellipsis; /* show ... only if needed */
    white-space: nowrap;
    vertical-align: middle;
}

/* Time column: allow more width */
.my-Orders .tableParent table th:nth-child(3),
.my-Orders .tableParent table td:nth-child(3) {
    width: 190px;
}

/* Provider/Customer column: give it enough width */
.my-Orders .tableParent table th:nth-child(4),
.my-Orders .tableParent table td:nth-child(4) {
    width: 160px;
}

/* Service column */
.my-Orders .tableParent table th:nth-child(5),
.my-Orders .tableParent table td:nth-child(5) {
    width: 140px;
}

/* If you want headers NOT truncated, keep wrap for headers only */
.my-Orders .tableParent table thead th {
    white-space: normal; /* wrap header text */
    overflow: visible;
    text-overflow: initial;
}

/* ================================
   My Orders - FIX column overlap
================================= */

.my-Orders .tableParent table {
    width: 100%;
    table-layout: fixed !important;
    min-width: 1100px;
}

.my-Orders .tableParent table tbody td {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.my-Orders .tableParent table th,
.my-Orders .tableParent table td {
    white-space: nowrap !important;
    vertical-align: middle;
}

.my-Orders .tableParent table td:nth-child(4),
.my-Orders .tableParent table td:nth-child(5),
.my-Orders .tableParent table td:nth-child(6) {
    white-space: normal !important;
    word-break: break-word;
}

.my-Orders .tableParent table th:nth-child(3),
.my-Orders .tableParent table td:nth-child(3) {
    width: 190px;
    white-space: nowrap !important;
}

.my-Orders .tableParent th:last-child,
.my-Orders .tableParent td:last-child {
    width: 50px !important;
}



.my-Orders .tableParent table td:last-child,
.my-Orders .tableParent table th:last-child {
    overflow: visible !important;
    position: relative;
}

.my-Orders .tableParent table tbody td:last-child {
    overflow: visible !important;
}

.my-Orders .tableParent .dropdown-menu {
    z-index: 9999;
}


/* My Orders actions dropdown (works inside table AND when moved to body) */

.my-Orders .dropdown-menu.ap-actions,
.dropdown-menu.ap-actions.dropdown-floating {
    border: 0;
    padding: 10px;
    border-radius: 14px;
    min-width: 220px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

.my-Orders .dropdown-menu.ap-actions .ap-actions__btn,
.dropdown-menu.ap-actions.dropdown-floating .ap-actions__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 44px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none; /* important: remove blue underline */
    margin: 8px 0;
    border: 2px solid transparent;
}

.my-Orders .dropdown-menu.ap-actions .ap-actions__btn--primary,
.dropdown-menu.ap-actions.dropdown-floating .ap-actions__btn--primary {
    background: #5b2aa9;
    color: #fff !important;
}

.my-Orders .dropdown-menu.ap-actions .ap-actions__btn--danger,
.dropdown-menu.ap-actions.dropdown-floating .ap-actions__btn--danger {
    background: #fff;
    color: #e30000 !important;
    border-color: #e30000;
}

/* Toast state colors */
.cancel-toast.toast--success,
.cancel-toast .toast-header.toast--success {
    background: #0f9d2a !important;
    color: #fff !important;
}

.cancel-toast.toast--error,
.cancel-toast .toast-header.toast--error {
    background: #e30000 !important;
    color: #fff !important;
}

.cancel-toast.toast--success .toast-body,
.cancel-toast.toast--error .toast-body {
    color: #fff !important;
}
.my-Orders .tableParent.table-responsive {
  overflow-x: auto !important;
  overflow-y: visible !important;
}

.my-Orders .tableParent {
  overflow: visible !important;
}

.my-Orders .tableParent table td:last-child,
.my-Orders .tableParent table th:last-child {
  overflow: visible !important;
  position: relative;
}

.my-Orders .dropdown-menu {
  z-index: 99999 !important;
}

/********************************/
/* Cancel confirm modal header */
.my-Orders .cancel-confirm-modal .modal-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.my-Orders .cancel-confirm-modal .modal-title {
    margin: 0;
}

.my-Orders .cancel-confirm-modal .modal-header .btn-close {
    margin: 0 !important;
    position: static;
}