/* Jay's Trade Order Portal - shared design system */
:root{--order-navy:#263746;--order-navy-dark:#182936;--order-yellow:#ffc43f;--order-yellow-soft:#fff7df;--order-bg:#f4f6f8;--order-surface:#fff;--order-text:#68747f;--order-border:#e4e9ed;--order-danger:#d94f4f;--order-success:#2f9b70;--order-sidebar:260px;--order-topbar:74px;--order-radius:16px;--order-shadow:0 12px 34px rgba(28,45,58,.08)}
html,body{min-height:100%;font-family:"Open Sans",sans-serif;background:var(--order-bg);color:var(--order-text)}body{margin:0}h1,h2,h3,h4,h5,h6{font-family:"Nunito",sans-serif;color:var(--order-navy);font-weight:800}a{color:var(--order-navy)}.btn,.form-control,.form-select{border-radius:11px}.form-control,.form-select{min-height:44px;border-color:#dce2e6;background:#fff;color:#263746}.form-control:focus,.form-select:focus{border-color:#e4af28;box-shadow:0 0 0 3px rgba(255,196,63,.16)}.order-btn-primary{background:var(--order-navy);border-color:var(--order-navy);color:#fff;font-weight:700}.order-btn-primary:hover{background:var(--order-navy-dark);border-color:var(--order-navy-dark);color:#fff}.order-btn-light{background:#fff;border:1px solid var(--order-border);color:var(--order-navy);font-weight:700}.order-btn-light:hover{background:#f8fafb;color:var(--order-navy)}
/* layout */.app-wrapper{min-height:100vh;display:grid;grid-template-columns:var(--order-sidebar) minmax(0,1fr);grid-template-rows:var(--order-topbar) 1fr auto;grid-template-areas:"sidebar topbar" "sidebar main" "sidebar footer"}.order-topbar{grid-area:topbar;position:sticky;top:0;z-index:1020;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--order-border)}.order-topbar-inner{height:var(--order-topbar);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 30px}.order-topbar-start,.order-topbar-actions{display:flex;align-items:center;gap:12px}.order-sidebar-toggle{display:none;width:42px;height:42px;border:1px solid var(--order-border);border-radius:12px;background:#fff;color:var(--order-navy);font-size:20px}.order-topbar-title{display:flex;flex-direction:column;line-height:1.1}.order-topbar-title span{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#9aa3aa;font-weight:700}.order-topbar-title strong{margin-top:4px;font-size:15px;color:var(--order-navy);text-transform:capitalize}.order-topbar-action{height:42px;display:inline-flex;align-items:center;gap:8px;padding:0 13px;border:1px solid var(--order-border);border-radius:12px;background:#fff;color:var(--order-navy);font-size:13px;font-weight:700;text-decoration:none}.order-topbar-action:hover{background:#f8fafb;color:var(--order-navy)}.order-cart-button{position:relative}.order-cart-count{min-width:20px;height:20px;display:inline-grid;place-items:center;padding:0 5px;border-radius:999px;background:var(--order-yellow);color:var(--order-navy);font-size:10px;font-weight:800}.order-user-button{display:flex;align-items:center;gap:9px;padding:4px 7px 4px 4px;border:0;background:transparent;color:var(--order-navy)}.order-user-avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:var(--order-navy);color:var(--order-yellow);font-size:17px}.order-user-copy{flex-direction:column;align-items:flex-start;line-height:1.1}.order-user-copy small{font-size:9px;color:#9ba4ab;text-transform:uppercase;letter-spacing:.06em}.order-user-copy strong{max-width:160px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;font-size:12px}.order-user-menu{width:300px;padding:0;overflow:hidden;border:1px solid var(--order-border);border-radius:15px;box-shadow:var(--order-shadow)}.order-user-summary{padding:20px;background:linear-gradient(145deg,var(--order-navy),#344d61);color:#fff}.order-user-summary>strong{display:block;color:#fff;font-size:16px}.order-user-summary>span{display:block;margin-top:4px;color:rgba(255,255,255,.65);font-size:11px}.order-user-balance{display:flex;align-items:end;justify-content:space-between;margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14)}.order-user-balance small{font-size:10px;text-transform:uppercase;letter-spacing:.05em}.order-user-balance b{font-size:16px;color:var(--order-yellow)}.order-user-links{padding:8px}.order-user-links a{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:9px;text-decoration:none;color:var(--order-navy);font-size:13px;font-weight:700}.order-user-links a:hover{background:#f5f7f8}.order-user-links .is-danger{color:#b93f3f}
.order-sidebar{grid-area:sidebar;position:fixed;inset:0 auto 0 0;width:var(--order-sidebar);z-index:1030;display:flex;flex-direction:column;background:#1f3241;color:#fff;box-shadow:8px 0 30px rgba(20,35,47,.08)}.order-sidebar-brand{height:var(--order-topbar);display:flex;align-items:center;justify-content:space-between;padding:12px 22px;background:#fff;border-right:1px solid var(--order-border)}.order-sidebar-brand img{display:block;max-width:140px;max-height:50px}.order-sidebar-close{border:0;background:transparent;color:var(--order-navy);font-size:18px}.order-sidebar-heading{padding:25px 20px 12px}.order-sidebar-heading span{display:block;color:#fff;font-family:"Nunito";font-weight:800;font-size:14px}.order-sidebar-heading small{display:block;margin-top:3px;color:rgba(255,255,255,.45);font-size:10px}.order-sidebar-nav{flex:1;overflow:auto;padding:6px 12px 20px}.order-sidebar-link{display:flex;align-items:center;gap:10px;min-height:42px;margin-bottom:3px;padding:8px 11px;border-radius:10px;color:rgba(255,255,255,.70);font-size:12px;font-weight:600;text-decoration:none;transition:.18s ease}.order-sidebar-link:hover{background:rgba(255,255,255,.07);color:#fff}.order-sidebar-link.active{background:var(--order-yellow);color:var(--order-navy);font-weight:800}.order-sidebar-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:rgba(255,255,255,.08)}.order-sidebar-link.active .order-sidebar-icon{background:rgba(38,55,70,.10)}.order-sidebar-dot{width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:rgba(255,255,255,.25)}.order-sidebar-link.active .order-sidebar-dot{background:var(--order-navy)}.order-sidebar-footer{padding:14px;border-top:1px solid rgba(255,255,255,.08)}.order-sidebar-footer a{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:10px;background:rgba(255,255,255,.07);color:#fff;text-decoration:none;font-size:12px;font-weight:700}.order-sidebar-backdrop{display:none}.app-main{grid-area:main;min-width:0;padding:0;background:var(--order-bg)}.app-content-header{padding:28px 30px 12px}.app-content-header .container-fluid,.app-content .container-fluid{max-width:1500px;margin:auto}.app-content-header h3{font-size:26px;text-transform:capitalize}.app-content-header hr{margin-top:13px;border-color:#dfe5e9;opacity:1}.app-content{padding:8px 30px 34px}.app-footer{grid-area:footer;padding:18px 30px;border-top:1px solid var(--order-border);background:#fff;color:#87919a;font-size:11px}.app-footer a{font-weight:700;text-decoration:none}.card{border:1px solid var(--order-border);border-radius:var(--order-radius);box-shadow:0 8px 25px rgba(32,48,61,.05);overflow:hidden}.card-header{padding:16px 18px;background:#fff;border-bottom:1px solid var(--order-border)}.card-title{margin:0;font-size:16px}.card-body{padding:18px}.alert{border:0;border-radius:13px}.table{--bs-table-bg:transparent;color:#44515c}.table>thead th{padding:13px 12px;background:#f7f9fa;color:var(--order-navy);font-size:11px;text-transform:uppercase;letter-spacing:.045em;border-bottom:1px solid var(--order-border)}.table>tbody td{padding:13px 12px;border-color:#edf0f2;vertical-align:middle;font-size:13px}.table-responsive{border:1px solid var(--order-border);border-radius:14px;background:#fff;overflow:hidden}.order-modal-content{border:0;border-radius:17px;box-shadow:0 24px 60px rgba(25,40,52,.18);overflow:hidden}.order-modal-content .modal-header{padding:16px 19px;background:#f8fafb;border-bottom:1px solid var(--order-border)}.order-modal-content .modal-title{font-size:16px}.order-modal-content .modal-body{padding:20px}.order-modal-content .modal-footer{padding:13px 18px;border-top:1px solid var(--order-border)}
#loadingModal{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;background:rgba(20,35,47,.26);backdrop-filter:blur(2px)}#loadingModal .spinner{width:44px;height:44px;border:4px solid rgba(255,255,255,.55);border-top-color:var(--order-yellow);border-radius:50%;animation:orderSpin .7s linear infinite}@keyframes orderSpin{to{transform:rotate(360deg)}}.productAdded,.productUpdated{position:fixed;right:22px;bottom:22px;z-index:1500;display:none;padding:13px 16px!important;border-radius:13px!important;color:#fff;box-shadow:0 15px 35px rgba(20,35,47,.18);font-size:12px}.productAdded a,.productUpdated a{margin-top:7px}
/* auth shared */.order-auth-page,.order-register-page,.order-reset-page{min-height:100vh;background:linear-gradient(135deg,#f7f9fa,#fffaf0)}.order-auth-kicker{display:inline-flex;align-items:center;gap:8px;color:#bb7e00;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.order-auth-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:13px;background:var(--order-yellow-soft);color:#cf9000;font-size:20px}
@media(max-width:991.98px){.app-wrapper{display:block;padding-top:var(--order-topbar);min-height:100vh}.order-topbar{position:fixed;inset:0 0 auto 0;height:var(--order-topbar)}.order-sidebar-toggle{display:grid;place-items:center}.order-sidebar{transform:translateX(-102%);transition:transform .25s ease}.order-sidebar.is-open{transform:translateX(0)}.order-sidebar-backdrop{position:fixed;inset:0;z-index:1025;background:rgba(14,27,37,.45);backdrop-filter:blur(2px)}.order-sidebar-backdrop.is-open{display:block}.app-main{min-height:calc(100vh - var(--order-topbar))}.app-content-header{padding:24px 20px 10px}.app-content{padding:8px 20px 30px}.app-footer{padding:17px 20px}.order-topbar-inner{padding:0 20px}}
@media(max-width:575.98px){.order-topbar-inner{padding:0 14px}.order-topbar-title{display:none}.order-topbar-actions{gap:7px}.order-topbar-action{width:40px;padding:0;justify-content:center}.order-cart-count{position:absolute;top:-6px;right:-5px}.order-user-button{padding:0}.app-content-header{padding-left:14px;padding-right:14px}.app-content{padding-left:14px;padding-right:14px}.app-content-header h3{font-size:22px}}

.order-recent-orders-button.is-active{background:var(--order-yellow-soft);border-color:var(--order-yellow)}

/* =========================================================
   SimpleCart product action visibility
   =========================================================
   The legacy panel stylesheet used to keep the UPDATE/DELETE
   area hidden until simpleCartFunctions.js detects that the
   product already exists in the cart.

   AdminLTE/panel-style.css is no longer loaded, so this
   initial state must live in the new Order stylesheet.
   simpleCartFunctions.js can still override these display
   values with .show() / .hide() as before.
*/
.addItemArea {
    display: block;
}

.updateItemArea {
    display: none;
}

/* Keep SimpleCart visibility changes authoritative when it
   writes an inline display value. */
.addItemArea[style*="display: none"] {
    display: none !important;
}

.updateItemArea[style*="display: block"],
.updateItemArea[style*="display: flex"] {
    display: block !important;
}





/* =========================================================
   User account dropdown
   ========================================================= */

.order-user-menu {
    width: 340px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--order-border);
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 22px 55px rgba(26, 42, 55, .16);
}

.order-user-summary {
    padding: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 196, 63, .16), transparent 38%),
        linear-gradient(145deg, var(--order-navy), #344d61);
    color: #fff;
}

.order-user-summary-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.order-user-summary-avatar {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--order-yellow);
    color: var(--order-navy);
    font-size: 19px;
}

.order-user-summary-top > div {
    min-width: 0;
}

.order-user-summary-top strong {
    display: block;
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
}

.order-user-summary-top span:not(.order-user-summary-avatar) {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, .62);
    font-size: 10px;
}

.order-user-balance {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 13px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.order-user-balance small {
    color: rgba(255, 255, 255, .68);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.order-user-balance b {
    color: var(--order-yellow);
    font-size: 16px;
    font-weight: 800;
}

.order-user-menu-label {
    padding: 12px 16px 4px;
    color: #9aa4ac;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.order-user-links {
    padding: 5px 8px 8px;
}

.order-user-links a {
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 10px;
    border-radius: 11px;
    color: var(--order-navy);
    text-decoration: none;
    transition:
        background .2s ease,
        transform .2s ease;
}

.order-user-links a:hover,
.order-user-links a.active {
    background: #f5f7f8;
    color: var(--order-navy);
    transform: translateX(2px);
}

.order-user-links a.active {
    background: #fff8e6;
}

.order-user-link-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #f4f6f7;
    color: #667581;
    font-size: 15px;
    transition:
        background .2s ease,
        color .2s ease;
}

.order-user-links a:hover .order-user-link-icon,
.order-user-links a.active .order-user-link-icon {
    background: var(--order-yellow);
    color: var(--order-navy);
}

.order-user-link-copy {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.order-user-link-copy strong {
    color: inherit;
    font-size: 12px;
    font-weight: 800;
}

.order-user-link-copy small {
    margin-top: 4px;
    color: #98a1a8;
    font-size: 9px;
    font-weight: 600;
}

.order-user-link-arrow {
    color: #bcc4c9;
    font-size: 11px;
}

.order-user-menu-divider {
    height: 1px;
    margin: 0 16px;
    background: var(--order-border);
}

.order-user-links-footer {
    padding-top: 8px;
}

.order-user-links a.is-danger {
    color: #b64444;
}

.order-user-links a.is-danger .order-user-link-icon {
    background: #fff1f1;
    color: #bd5252;
}

.order-user-links a.is-danger:hover {
    background: #fff5f5;
    color: #a93838;
}

@media (max-width: 575.98px) {
    .order-user-menu {
        width: min(330px, calc(100vw - 24px));
    }
}

/* =========================================================
   User dropdown - independent of Bootstrap dropdown JS
   ========================================================= */
.order-user-dropdown {
    position: relative;
}

.order-user-button {
    cursor: pointer;
}

.order-user-chevron {
    margin-left: 2px;
    color: #8d989f;
    font-size: 11px;
    transition: transform .2s ease;
}

.order-user-dropdown.is-open .order-user-chevron {
    transform: rotate(180deg);
}

.order-user-dropdown .order-user-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: auto;
    z-index: 1080;

    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    transform: translateY(-7px) scale(.985);
    transform-origin: top right;

    transition:
        opacity .18s ease,
        transform .18s ease,
        visibility .18s ease;
}

.order-user-dropdown.is-open .order-user-menu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

/* Bootstrap's .dropdown-menu rules must not take control of this menu. */
.order-user-dropdown .order-user-menu.dropdown-menu,
.order-user-dropdown .order-user-menu.dropdown-menu.show {
    position: absolute !important;
    inset: auto 0 auto auto !important;
    margin: 0 !important;
}

/* Ensure topbar doesn't clip the open menu. */
.order-topbar,
.order-topbar-inner,
.order-topbar-actions {
    overflow: visible !important;
}

@media (max-width: 575.98px) {
    .order-user-dropdown .order-user-menu {
        position: fixed;
        top: calc(var(--order-topbar) - 2px);
        right: 12px;
        width: min(340px, calc(100vw - 24px));
        max-height: calc(100vh - var(--order-topbar) - 20px);
        overflow-y: auto;
    }
}