/* Townway Customer UI Pack 3 — Orders, Services, Returns, Refunds & Tracking */
:root {
    --tw-os-blue: #0007a3;
    --tw-os-blue-2: #0b55d4;
    --tw-os-navy: #081a3a;
    --tw-os-ink: #172033;
    --tw-os-muted: #68758c;
    --tw-os-line: #e4eaf3;
    --tw-os-soft: #f5f7fb;
    --tw-os-white: #fff;
    --tw-os-success: #0c9a67;
    --tw-os-warning: #e89400;
    --tw-os-danger: #dc3f50;
    --tw-os-info: #1875d1;
    --tw-os-radius: 20px;
    --tw-os-shadow: 0 16px 42px rgba(17, 34, 70, .09);
}

.tw-orders-services-modern {
    min-height: 68vh;
    padding: 22px 0 56px;
    color: var(--tw-os-ink);
    background:
        radial-gradient(circle at 9% 0, rgba(0,7,163,.055), transparent 29%),
        linear-gradient(180deg, #f7f9fd 0, #fff 420px);
}

.tw-orders-services-modern .headerTitle {
    margin: 0 !important;
    padding: 10px 0 20px !important;
    color: var(--tw-os-navy) !important;
    font-size: clamp(25px, 2.3vw, 35px) !important;
    font-weight: 850 !important;
    line-height: 1.18;
    letter-spacing: -.035em;
    text-align: left !important;
}

.tw-orders-services-modern > .container.text-center .headerTitle,
.tw-orders-services-modern > .container.rtl > .headerTitle {
    position: relative;
}

.tw-orders-services-modern > .container.text-center .headerTitle::after,
.tw-orders-services-modern > .container.rtl > .headerTitle::after {
    display: block;
    width: 58px;
    height: 4px;
    margin-top: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--tw-os-blue), #4aa7ff);
    content: "";
}

.tw-orders-services-modern .row { align-items: flex-start; }
.tw-orders-services-modern section.col-lg-9,
.tw-orders-services-modern section.col-md-9,
.tw-orders-services-modern section.col-lg-8,
.tw-orders-services-modern .col-lg-9.mt-2,
.tw-orders-services-modern .col-lg-9.col-md-9 { min-width: 0; }

/* Shared modern card surfaces */
.tw-orders-services-modern .card,
.tw-orders-services-modern .__card,
.tw-orders-services-modern .box-shadow-sm,
.tw-orders-services-modern .box-shadow-lg {
    overflow: hidden;
    border: 1px solid var(--tw-os-line) !important;
    border-radius: var(--tw-os-radius) !important;
    background: var(--tw-os-white) !important;
    box-shadow: var(--tw-os-shadow) !important;
}

.tw-orders-services-modern .card-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--tw-os-line) !important;
    background: linear-gradient(180deg, #fff, #fafcff) !important;
}

.tw-orders-services-modern .card-header h4,
.tw-orders-services-modern .card-header h5,
.tw-orders-services-modern .card-header h6 {
    margin: 0;
    color: var(--tw-os-navy);
    font-weight: 800;
}

.tw-orders-services-modern .card-body { padding: 22px; }
.tw-orders-services-modern .card-footer {
    padding: 16px 22px;
    border-top: 1px solid var(--tw-os-line) !important;
    background: #fff !important;
}

/* Tables */
.tw-orders-services-modern .table-responsive {
    overflow-x: auto;
    border-radius: var(--tw-os-radius);
    scrollbar-width: thin;
}

.tw-orders-services-modern table.table {
    min-width: 720px;
    margin: 0;
    color: var(--tw-os-ink);
    border-collapse: separate;
    border-spacing: 0;
}

.tw-orders-services-modern .table thead,
.tw-orders-services-modern .table .thead-light,
.tw-orders-services-modern .table .thead-light th,
.tw-orders-services-modern .table .thead-light td {
    background: #f2f5fb !important;
}

.tw-orders-services-modern .table thead th,
.tw-orders-services-modern .table thead td,
.tw-orders-services-modern .tdBorder,
.tw-orders-services-modern .spandHeadO {
    color: #526077 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .055em;
    text-transform: uppercase;
    border: 0 !important;
}

.tw-orders-services-modern .table tbody td,
.tw-orders-services-modern .bodytr,
.tw-orders-services-modern .order_table_td {
    padding: 17px 15px !important;
    vertical-align: middle !important;
    border-top: 1px solid #edf1f7 !important;
    background: #fff;
    color: var(--tw-os-ink);
}

.tw-orders-services-modern .table tbody tr { transition: background .18s ease, transform .18s ease; }
.tw-orders-services-modern .table tbody tr:hover td { background: #f9fbff; }
.tw-orders-services-modern .table tbody tr:first-child td { border-top: 0 !important; }

/* Status and actions */
.tw-orders-services-modern .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 11px;
    border: 0;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .025em;
    box-shadow: none;
}
.tw-orders-services-modern .badge-success { color: #08764f !important; background: #e5f7f0 !important; }
.tw-orders-services-modern .badge-danger { color: #bd293c !important; background: #ffe9ec !important; }
.tw-orders-services-modern .badge-info { color: #1766b0 !important; background: #e8f3ff !important; }
.tw-orders-services-modern .badge-secondary { color: #5f6880 !important; background: #edf0f5 !important; }

.tw-orders-services-modern .__btn-grp-sm { gap: 8px; justify-content: center; }
.tw-orders-services-modern .__action-btn,
.tw-orders-services-modern .btn-sm {
    min-width: 38px;
    min-height: 38px;
    border-radius: 11px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tw-orders-services-modern .btn--primary,
.tw-orders-services-modern .btn-primary {
    border-color: var(--tw-os-blue) !important;
    background: linear-gradient(135deg, var(--tw-os-blue), var(--tw-os-blue-2)) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(0,7,163,.18);
}
.tw-orders-services-modern .btn-danger { border-color: #fee0e4 !important; background: #fff0f2 !important; color: var(--tw-os-danger) !important; }
.tw-orders-services-modern .btn-secondary { border-color: #e3e8f0 !important; background: #f1f4f8 !important; color: #4e5b72 !important; }
.tw-orders-services-modern .btn-success { border-color: #d6f2e8 !important; background: #e7f8f1 !important; color: var(--tw-os-success) !important; }
.tw-orders-services-modern .btn { font-weight: 750; transition: transform .18s ease, box-shadow .18s ease; }
.tw-orders-services-modern .btn:hover { transform: translateY(-1px); }

/* Inputs and forms */
.tw-orders-services-modern .form-control,
.tw-orders-services-modern select.form-control,
.tw-orders-services-modern textarea.form-control {
    min-height: 48px;
    border: 1px solid #dce3ee;
    border-radius: 13px;
    background: #fff;
    color: var(--tw-os-ink);
    box-shadow: none;
}
.tw-orders-services-modern textarea.form-control { min-height: 130px; padding-top: 13px; }
.tw-orders-services-modern .form-control:focus {
    border-color: rgba(0,7,163,.55);
    box-shadow: 0 0 0 4px rgba(0,7,163,.08);
}
.tw-orders-services-modern .input-label,
.tw-orders-services-modern label { color: #3f4b61; font-weight: 700; }

/* Order / return detail summary */
.tw-orders-services-modern .__bg-e2f0ff {
    overflow: hidden;
    padding: 10px;
    border: 1px solid #dce8fb;
    border-radius: 18px;
    background: linear-gradient(135deg, #edf5ff, #f8fbff) !important;
}
.tw-orders-services-modern .__bg-e2f0ff > [class*="col-"] > div {
    min-height: 84px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255,255,255,.76);
}

.tw-orders-services-modern .order_table_info_div,
.tw-orders-services-modern .order_table_tr,
.tw-orders-services-modern .paymentDetailsDiv,
.tw-orders-services-modern .totals {
    border-radius: 15px;
}
.tw-orders-services-modern .order_table_info_div {
    border: 1px solid var(--tw-os-line);
    background: #fbfcff;
}
.tw-orders-services-modern .order_table_info_div_1,
.tw-orders-services-modern .order_table_info_div_2 { padding: 12px 15px !important; }
.tw-orders-services-modern .paymentDetailsDiv {
    padding: 18px !important;
    border: 1px solid var(--tw-os-line);
    background: #f8faff;
}
.tw-orders-services-modern .paymentDetailsDiv h6 { color: var(--tw-os-navy); }

/* Product rows inside order detail */
.tw-orders-services-modern .cardstylediv,
.tw-orders-services-modern .card.box-shadow-sm {
    margin-bottom: 14px;
}
.tw-orders-services-modern .for-tab-img img,
.tw-orders-services-modern .order_table_td img,
.tw-orders-services-modern .gallery img {
    border-radius: 13px !important;
    object-fit: cover;
    background: #f5f7fb;
}

/* Tracking progress */
.tw-orders-services-modern .media-tabs {
    position: relative;
    gap: 8px;
    border: 0;
}
.tw-orders-services-modern .media-tabs .nav-item { min-width: 0; }
.tw-orders-services-modern .media-tabs .nav-link {
    height: 100%;
    padding: 16px 8px;
    border: 0 !important;
    border-radius: 14px;
    background: #f7f9fd;
}
.tw-orders-services-modern .media-tab-media {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #d9e1ed;
    border-radius: 50%;
    background: #fff;
}
.tw-orders-services-modern .track-order-success {
    border-color: var(--tw-os-success) !important;
    background: var(--tw-os-success) !important;
    box-shadow: 0 0 0 6px rgba(12,154,103,.10);
}
.tw-orders-services-modern .media-tab-title { color: var(--tw-os-navy); font-size: 13px; font-weight: 800; }

/* Tracking form */
.tw-orders-services-modern .loginContainerDiv {
    max-width: 980px;
    align-items: stretch;
    padding-top: 44px !important;
    padding-bottom: 54px !important;
}
.tw-orders-services-modern .loginContainerDiv > .card,
.tw-orders-services-modern .loginContainerDiv.card { width: 100%; }
.tw-orders-services-modern .loginImg {
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: linear-gradient(145deg, #edf4ff, #f8fbff);
}
.tw-orders-services-modern .loginImg img { max-width: 100%; max-height: 330px; object-fit: contain; }
.tw-orders-services-modern .loginContainer { padding: clamp(28px, 5vw, 58px) !important; }
.tw-orders-services-modern .primaryColor { color: var(--tw-os-blue) !important; font-weight: 850; }
.tw-orders-services-modern .submitBtnDiv .btn { min-height: 48px; border-radius: 13px; }

/* Refund/return detail */
.tw-orders-services-modern .sidebar_heading { margin-bottom: 16px; }
.tw-orders-services-modern .overflow-auto { border-radius: 16px; }
.tw-orders-services-modern .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    gap: 10px;
}
.tw-orders-services-modern .gallery a { display: block; overflow: hidden; border-radius: 13px; border: 1px solid var(--tw-os-line); }
.tw-orders-services-modern .gallery img { width: 100%; aspect-ratio: 1; }

/* Modals */
.tw-orders-services-modern .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 22px;
    box-shadow: 0 25px 70px rgba(12,27,60,.24);
}
.tw-orders-services-modern .modal-header { padding: 18px 22px; border-bottom: 1px solid var(--tw-os-line); }
.tw-orders-services-modern .modal-body { padding: 22px; }
.tw-orders-services-modern .modal-footer { padding: 16px 22px; border-top: 1px solid var(--tw-os-line); }

/* Pagination and empty states */
.tw-orders-services-modern .pagination { gap: 6px; justify-content: center; }
.tw-orders-services-modern .page-link {
    min-width: 38px;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--tw-os-line);
    border-radius: 10px !important;
    color: var(--tw-os-blue);
}
.tw-orders-services-modern center { padding: 38px 20px; color: var(--tw-os-muted); font-weight: 650; }

@media (max-width: 991.98px) {
    .tw-orders-services-modern { padding-top: 12px; }
    .tw-orders-services-modern .headerTitle { font-size: 27px !important; }
    .tw-orders-services-modern .media-tabs { flex-wrap: wrap; }
    .tw-orders-services-modern .media-tabs .nav-item { flex: 1 1 45%; }
    .tw-orders-services-modern .loginImg { min-height: 280px; }
}

@media (max-width: 767.98px) {
    .tw-orders-services-modern { padding-bottom: 35px; }
    .tw-orders-services-modern .container { padding-left: 14px; padding-right: 14px; }
    .tw-orders-services-modern .headerTitle { padding: 6px 0 15px !important; font-size: 25px !important; }
    .tw-orders-services-modern .card-body { padding: 17px; }
    .tw-orders-services-modern .card-header,
    .tw-orders-services-modern .card-footer { padding: 15px 17px; }
    .tw-orders-services-modern table.table { min-width: 650px; }
    .tw-orders-services-modern .__bg-e2f0ff > [class*="col-"] { margin-bottom: 8px; }
    .tw-orders-services-modern .paymentDetailsDiv { margin-top: 0 !important; }
    .tw-orders-services-modern .loginContainerDiv { display: block !important; padding-top: 24px !important; }
    .tw-orders-services-modern .loginImg { display: none; }
    .tw-orders-services-modern .loginContainer { padding: 28px 20px !important; }
}

@media (max-width: 575.98px) {
    .tw-orders-services-modern .media-tabs .nav-item { flex-basis: 100%; }
    .tw-orders-services-modern .media-tabs .nav-link { display: flex; align-items: center; gap: 12px; text-align: left; }
    .tw-orders-services-modern .media-tab-media { flex: 0 0 42px; margin: 0 !important; }
    .tw-orders-services-modern .media-body { text-align: left !important; }
    .tw-orders-services-modern .__btn-grp-sm { justify-content: flex-start; }
    .tw-orders-services-modern .modal-dialog { margin: 10px; }
}