.user-panel{--ta-primary:#5d87ff;--ta-secondary:#49beff;--ta-success:#13deb9;--ta-warning:#f6b51e;--ta-error:#ef4444;--ta-dark:#1c2536;--ta-text:#5a6a85;--ta-border:#dfe5ef;--ta-light:#f6f9fc;--ta-light-primary:#eef3ff;background:var(--ta-light);color:var(--ta-text);font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif}.user-panel *{box-sizing:border-box}.user-panel h1,.user-panel h2,.user-panel h3,.user-panel h4,.user-panel h5,.user-panel h6{color:var(--ta-dark);font-weight:600}.user-panel .sidebar{background:#fff;border-right:1px solid var(--ta-border);box-shadow:0 1px 4px rgba(133,146,173,.12)}.user-panel .dashboard-main{background:var(--ta-light)}.user-panel .navbar-header{background:#fff;border-bottom:1px solid var(--ta-border);box-shadow:0 1px 4px rgba(133,146,173,.08)}.user-panel .dashboard-main-body{padding:30px}.user-panel .card,.user-panel .user-grid-card{background:#fff;border:1px solid var(--ta-border);border-radius:10px;box-shadow:0 1px 4px rgba(133,146,173,.12)}.user-panel .card-header{background:#fff;border-bottom:1px solid var(--ta-border)}.user-panel .card-title{color:var(--ta-dark)!important;font-weight:600}.user-panel label,.user-panel .form-label{color:var(--ta-dark);font-weight:500}.user-panel .form-control,.user-panel .form-select,.user-panel select,.user-panel textarea,.user-panel input:not([type=radio]):not([type=checkbox]):not([type=hidden]){border:1px solid var(--ta-border);border-radius:7px;min-height:40px;padding:9px 12px}.user-panel .form-control:focus,.user-panel .form-select:focus,.user-panel select:focus,.user-panel textarea:focus{border-color:var(--ta-primary);box-shadow:0 0 0 3px rgba(93,135,255,.14);outline:0}.user-panel .btn{border-radius:7px;font-weight:500;min-height:40px}.user-panel .btn-primary{background:var(--ta-primary);border-color:var(--ta-primary)}.user-panel .badge{border-radius:5px;font-weight:500}.user-panel .alert{border-radius:7px}.user-panel .table-responsive{border:1px solid var(--ta-border);border-radius:7px}.user-panel .table thead th{background:var(--ta-light);color:var(--ta-dark);font-size:12px;font-weight:600;white-space:nowrap}.user-panel .table>:not(caption)>*>*{border-bottom-color:var(--ta-border);padding:12px 14px}.user-panel .table tbody tr:hover{background:var(--ta-light-primary)}@media(max-width:767px){.user-panel .dashboard-main-body{padding:16px 12px}.user-panel .card-body{padding:16px}.user-panel .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}.user-panel .table{min-width:760px}}@media(max-width:390px){.user-panel .dashboard-main-body{padding-left:10px;padding-right:10px}.user-panel .card-body{padding:14px 12px}}html[data-theme=dark] .user-panel{--ta-text:#d7e2f2;--ta-border:#333f55;--ta-light:#1c2536;--ta-light-primary:#2f405f;background:#1c2536}html[data-theme=dark] .user-panel .sidebar,html[data-theme=dark] .user-panel .navbar-header,html[data-theme=dark] .user-panel .card,html[data-theme=dark] .user-panel .card-header{background:#253248;border-color:var(--ta-border)}html[data-theme=dark] .user-panel h1,html[data-theme=dark] .user-panel h2,html[data-theme=dark] .user-panel h3,html[data-theme=dark] .user-panel h4,html[data-theme=dark] .user-panel h5,html[data-theme=dark] .user-panel h6,html[data-theme=dark] .user-panel label{color:#fff}
.user-panel .sidebar {
    inset-inline-start: 0;
    width: 295px;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1050;
    transition: transform .2s ease;
    padding-top: env(safe-area-inset-top, 0px);
}
.user-panel .sidebar > div:first-of-type { flex: 0 0 auto; }
.user-panel .sidebar-logo { height: 88px; padding: 20px 24px; display: flex; align-items: center; border-bottom: 1px solid var(--ta-border); }
.user-panel .sidebar-logo img { max-width: 178px; max-height: 46px; object-fit: contain; }
.user-panel .sidebar-menu-area { flex: 1; min-height: 0; height: auto; overflow-y: auto; overscroll-behavior: contain; padding: 12px 20px calc(24px + env(safe-area-inset-bottom, 0px)); scrollbar-width: thin; }
.user-panel .user-menu-section { color: #7c8fac; font-size: 12px; font-weight: 700; letter-spacing: .06em; margin: 20px 12px 8px; text-transform: uppercase; }
.user-panel .sidebar-menu li a { display: flex; align-items: center; border-radius: 7px; color: var(--ta-text); font-size: 16px; font-weight: 600; gap: 13px; min-height: 50px; padding: 10px 12px; margin-top: 2px; transition: background-color .15s ease, color .15s ease; }
.user-panel .sidebar-menu li a:hover,
.user-panel .sidebar-menu li a.active-page,
.user-panel .sidebar-menu li.dropdown.open > a,
.user-panel .sidebar-menu li.dropdown.dropdown-open > a { background: var(--ta-light-primary); color: var(--ta-primary); }
.user-panel .sidebar-menu li a strong,
.user-panel .sidebar-menu li a span { font-weight: 500; overflow-wrap: anywhere; }
.user-panel .sidebar-menu li a .menu-icon { width: 30px; height: 30px; flex: 0 0 30px; margin: 0; object-fit: contain; }
.user-panel .sidebar-menu li.dropdown > a > .menu-icon { width: 32px; height: 32px; flex-basis: 32px; }
.user-panel .sidebar-menu .sidebar-submenu li a { font-size: 15px; font-weight: 500; min-height: 46px; gap: 12px; }
.user-panel .sidebar-menu .sidebar-submenu li a .menu-icon { width: 26px; height: 26px; flex-basis: 26px; }
.user-panel .sidebar-menu li.dropdown > a { padding-right: 32px; }
.user-panel .sidebar-menu li.dropdown > a::after { content: ''; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; width: 7px; height: 7px; transform: translateY(-50%) rotate(-45deg); transition: transform .15s ease; }
.user-panel .sidebar-menu li.dropdown > a[aria-expanded="true"]::after { transform: translateY(-70%) rotate(45deg); }
.user-panel .sidebar-menu .sidebar-submenu { border-left: 1px solid var(--ta-border); margin: 4px 0 8px 22px; padding: 2px 0 2px 10px; }
.user-panel .sidebar-submenu li a { font-size: 15px; padding: 9px 10px; }
.user-panel .user-menu-badge { margin-left: auto; background: var(--ta-light-primary); color: var(--ta-primary); border-radius: 4px; padding: 2px 5px; font-size: 10px; }
.user-panel .sidebar-close-btn { background: var(--ta-light); border: 1px solid var(--ta-border); border-radius: 7px; color: var(--ta-text); width: 36px; height: 36px; right: 12px; top: calc(18px + env(safe-area-inset-top, 0px)); }
.user-panel .sidebar a:focus-visible,
.user-panel .sidebar button:focus-visible,
.user-panel .sidebar-mobile-toggle:focus-visible,
.user-panel .sidebar-toggle:focus-visible { outline: 2px solid var(--ta-primary); outline-offset: 2px; }
.user-panel .user-sidebar-backdrop { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(28, 37, 54, .48); z-index: 1040; }
.user-panel .user-sidebar-backdrop[hidden] { display: none; }
.user-panel.user-drawer-open { overflow: hidden; }
.user-panel .navbar-header { min-height: 72px; padding: 16px 24px; }
html[data-theme="dark"] .user-panel { --ta-dark: #eaeff4; }
html[data-theme="dark"] .user-panel .sidebar-menu li a { color: var(--ta-text); }
html[data-theme="dark"] .user-panel .sidebar-menu li a.active-page { color: var(--ta-primary); }
@media (min-width: 1200px) {
    .user-panel .dashboard-main { margin-left: 295px; transition: margin-left .2s ease; }
    .user-panel.user-sidebar-collapsed .sidebar { transform: translateX(-100%); }
    .user-panel.user-sidebar-collapsed .dashboard-main { margin-left: 0; }
}
@media (max-width: 1199px) {
    .user-panel .sidebar { width: clamp(270px, 76vw, 310px); max-width: 310px; transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility .2s; }
    .user-panel .sidebar.sidebar-open { transform: translateX(0); visibility: visible; }
    .user-panel .dashboard-main { margin-left: 0; }
    .user-panel .navbar-header { min-height: 64px; padding: 12px 16px; }
    .user-panel .sidebar-menu li.dropdown > a { display: flex; justify-content: flex-start; padding-right: 12px; white-space: nowrap; }
    .user-panel .sidebar-menu li.dropdown > a > span { flex: 0 0 auto; white-space: nowrap; }
    .user-panel .sidebar-menu li.dropdown > a::after { position: static; inset: auto; display: block; flex: 0 0 8px; margin-left: 16px; transform: rotate(-45deg); }
    .user-panel .sidebar-menu li.dropdown > a[aria-expanded="true"]::after { transform: rotate(45deg); }
    .user-panel .sidebar-menu li.dropdown > a > .menu-icon { flex: 0 0 32px; }
}
@media (max-width: 575px) {
    .user-panel .sidebar-logo { height: 76px; padding: 16px 54px 16px 20px; }
    .user-panel .sidebar-menu-area { padding-left: 12px; padding-right: 12px; }
    .user-panel .sidebar-menu li a { font-size: 17px; min-height: 52px; gap: 14px; padding: 10px 12px; }
    .user-panel .sidebar-menu li a .menu-icon,
    .user-panel .sidebar-menu li.dropdown > a > .menu-icon { width: 32px; height: 32px; flex-basis: 32px; }
    .user-panel .sidebar-menu .sidebar-submenu li a { font-size: 16px; min-height: 48px; }
    .user-panel .sidebar-menu .sidebar-submenu li a .menu-icon { width: 28px; height: 28px; flex-basis: 28px; }
}
@media (prefers-reduced-motion: reduce) {
    .user-panel .sidebar, .user-panel .dashboard-main, .user-panel .sidebar-menu li a { transition: none; }
}

/* Consistent TailwindAdmin typography for User/Public pages only. */
.user-panel .dashboard-main-body { font-size: 14px; line-height: 1.55; }
.user-panel .dashboard-main-body h1 { font-size: 28px; line-height: 1.25; }
.user-panel .dashboard-main-body h2 { font-size: 22px; line-height: 1.3; }
.user-panel .dashboard-main-body h3 { font-size: 18px; line-height: 1.35; }
.user-panel .dashboard-main-body h4 { font-size: 16px; line-height: 1.4; }
.user-panel .dashboard-main-body h5,
.user-panel .dashboard-main-body h6 { font-size: 14px; line-height: 1.45; }
.user-panel .dashboard-main-body label,
.user-panel .dashboard-main-body .form-label { font-size: 13px; line-height: 1.4; }
.user-panel .dashboard-main-body .form-control,
.user-panel .dashboard-main-body .form-select,
.user-panel .dashboard-main-body select,
.user-panel .dashboard-main-body textarea,
.user-panel .dashboard-main-body .btn { font-size: 14px; }
.user-panel .dashboard-main-body .table { font-size: 13px; }
.user-panel .dashboard-main-body .table thead th { font-size: 12px; }
.user-panel .dashboard-main-body .badge { font-size: 12px; }
@media (max-width: 575px) {
    .user-panel .dashboard-main-body h1 { font-size: 24px; }
    .user-panel .dashboard-main-body h2 { font-size: 20px; }
    .user-panel .dashboard-main-body h3 { font-size: 17px; }
}

/* Shared service-order presentation. Selectors intentionally keep the existing
   form names, IDs and data attributes untouched. */
.user-panel .dashboard-main-body > .row > [class*="col-"] > .card,
.user-panel .dashboard-main-body .service-order-card { overflow: hidden; }
.user-panel .service-order-card,
.user-panel .service-guide-card,
.user-panel .service-history-card { border-color: var(--ta-border); box-shadow: 0 1px 4px rgba(133,146,173,.12); }
.user-panel .service-guide-card > .card-header { background: var(--ta-primary) !important; border-bottom: 0; color: #fff; font-size: 14px; font-weight: 600; padding: 13px 16px; text-transform: none; }
.user-panel .service-guide-card > .card-header h1,
.user-panel .service-guide-card > .card-header h2,
.user-panel .service-guide-card > .card-header h3,
.user-panel .service-guide-card > .card-header h4,
.user-panel .service-guide-card > .card-header h5,
.user-panel .service-guide-card > .card-header h6 { color: #fff; }
.user-panel .dashboard-main-body .service-order-card .btn-primary,
.user-panel .dashboard-main-body .service-order-card button.btn-primary,
.user-panel .dashboard-main-body #checkoutButton {
    background: #3f6fe5 !important;
    border-color: #3f6fe5 !important;
    color: #fff !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .16);
    box-shadow: 0 7px 16px rgba(63, 111, 229, .28);
}
.user-panel .dashboard-main-body .service-order-card .btn-primary:hover,
.user-panel .dashboard-main-body .service-order-card .btn-primary:focus,
.user-panel .dashboard-main-body #checkoutButton:hover,
.user-panel .dashboard-main-body #checkoutButton:focus {
    background: #315fcf !important;
    border-color: #315fcf !important;
}
.user-panel .dashboard-main-body .service-order-card #total_payment {
    color: #fff !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .16);
}
.user-panel .dashboard-main-body .service-guide-card > .card-header {
    background: #3f6fe5 !important;
    color: #fff !important;
    font-weight: 700 !important;
}
.user-panel .dashboard-main-body .card-title { letter-spacing: -.01em; }
.user-panel .dashboard-main-body .card-title .ri-shopping-cart-fill { color: var(--ta-primary); }
.user-panel .dashboard-main-body .form-group { margin-bottom: 18px !important; }
.user-panel .dashboard-main-body .form-label { display: block; margin-bottom: 8px; font-size: 13px; }
.user-panel .dashboard-main-body .form-check { position: relative; min-height: 48px; padding: 10px 12px 10px 38px; border: 1px solid var(--ta-border); border-radius: 7px; background: #fff; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.user-panel .dashboard-main-body .form-check:hover { border-color: rgba(93, 135, 255, .5); background: var(--ta-light-primary); }
.user-panel .dashboard-main-body .form-check:has(input:checked) { border-color: var(--ta-primary); background: var(--ta-light-primary); box-shadow: 0 0 0 2px rgba(93, 135, 255, .12); }
.user-panel .dashboard-main-body .form-check-input { position: absolute; left: 13px; top: 16px; float: none; margin: 0; accent-color: var(--ta-primary); }
.user-panel .dashboard-main-body .form-check-label { color: var(--ta-dark); cursor: pointer; font-size: 13px; line-height: 1.55; }
.user-panel .dashboard-main-body .form-check-label .badge { margin-right: 4px; vertical-align: middle; }
.user-panel .dashboard-main-body .alert { border: 1px solid transparent; box-shadow: none; padding: 14px 16px; }
.user-panel .dashboard-main-body .alert h4,
.user-panel .dashboard-main-body .alert h5,
.user-panel .dashboard-main-body .alert h6 { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.user-panel .dashboard-main-body .alert ul { margin-bottom: 0; padding-left: 18px; }
.user-panel .dashboard-main-body .alert.bg-primary { background: var(--ta-primary) !important; border-color: var(--ta-primary); }
.user-panel .dashboard-main-body .alert-warning { background: #fff8e6; border-color: #f7d890; color: #73510b; }
.user-panel .dashboard-main-body .alert.bg-danger { background: #fff0f0 !important; border-color: #f2b8b8; color: #8b2727; }
.user-panel .dashboard-main-body .alert-warning h1,
.user-panel .dashboard-main-body .alert-warning h2,
.user-panel .dashboard-main-body .alert-warning h3,
.user-panel .dashboard-main-body .alert-warning h4,
.user-panel .dashboard-main-body .alert-warning h5,
.user-panel .dashboard-main-body .alert-warning h6,
.user-panel .dashboard-main-body .alert-warning strong { color: #664600; }
.user-panel .dashboard-main-body .alert.bg-danger,
.user-panel .dashboard-main-body .alert.bg-danger h1,
.user-panel .dashboard-main-body .alert.bg-danger h2,
.user-panel .dashboard-main-body .alert.bg-danger h3,
.user-panel .dashboard-main-body .alert.bg-danger h4,
.user-panel .dashboard-main-body .alert.bg-danger h5,
.user-panel .dashboard-main-body .alert.bg-danger h6,
.user-panel .dashboard-main-body .alert.bg-danger strong { color: #8b2727 !important; }
.user-panel .dashboard-main-body .alert.bg-danger .text-white { color: #8b2727 !important; }
.user-panel .dashboard-main-body #total_payment { color: #fff !important; font-size: 1.35rem; }
.user-panel .dashboard-main-body .table-responsive { background: #fff; }
.user-panel .dashboard-main-body .table { margin-bottom: 0; }
.user-panel .dashboard-main-body .table thead th { background: var(--ta-light); }
.user-panel .dashboard-main-body .btn-primary { box-shadow: 0 6px 12px rgba(93, 135, 255, .18); }
.user-panel .dashboard-main-body .btn-primary:hover { background: #4c78f1; border-color: #4c78f1; transform: translateY(-1px); }
html[data-theme="dark"] .user-panel .dashboard-main-body .form-check,
html[data-theme="dark"] .user-panel .dashboard-main-body .table-responsive { background: #253248; }
html[data-theme="dark"] .user-panel .dashboard-main-body .form-check-label { color: #eaeff4; }
html[data-theme="dark"] .user-panel .dashboard-main-body .alert-warning { background: #3b3321; border-color: #6b5727; color: #f6d98d; }
html[data-theme="dark"] .user-panel .dashboard-main-body .alert.bg-danger { background: #43272c !important; border-color: #753b43; color: #ffd1d1; }
html[data-theme="dark"] .user-panel .dashboard-main-body .alert-warning h1,
html[data-theme="dark"] .user-panel .dashboard-main-body .alert-warning h2,
html[data-theme="dark"] .user-panel .dashboard-main-body .alert-warning h3,
html[data-theme="dark"] .user-panel .dashboard-main-body .alert-warning h4,
html[data-theme="dark"] .user-panel .dashboard-main-body .alert-warning h5,
html[data-theme="dark"] .user-panel .dashboard-main-body .alert-warning h6,
html[data-theme="dark"] .user-panel .dashboard-main-body .alert-warning strong { color: #ffe4a3; }
html[data-theme="dark"] .user-panel .dashboard-main-body .alert.bg-danger,
html[data-theme="dark"] .user-panel .dashboard-main-body .alert.bg-danger h1,
html[data-theme="dark"] .user-panel .dashboard-main-body .alert.bg-danger h2,
html[data-theme="dark"] .user-panel .dashboard-main-body .alert.bg-danger h3,
html[data-theme="dark"] .user-panel .dashboard-main-body .alert.bg-danger h4,
html[data-theme="dark"] .user-panel .dashboard-main-body .alert.bg-danger h5,
html[data-theme="dark"] .user-panel .dashboard-main-body .alert.bg-danger h6,
html[data-theme="dark"] .user-panel .dashboard-main-body .alert.bg-danger strong,
html[data-theme="dark"] .user-panel .dashboard-main-body .alert.bg-danger .text-white { color: #ffd1d1 !important; }
@media (max-width: 575px) {
    .user-panel .dashboard-main-body .form-check { min-height: 54px; padding-top: 12px; padding-bottom: 12px; }
    .user-panel .dashboard-main-body .form-check-input { top: 19px; }
    .user-panel .dashboard-main-body .btn-lg { min-height: 48px; width: 100%; }
    .user-panel .dashboard-main-body #total_payment { font-size: 1.2rem; }
}