/* account-ui.css */
.account-page.hidden { display: none !important; }
.account-page { width: 100%; min-height: calc(100dvh - 80px); padding: 40px 24px 96px; background: #f8f8f7; }
.account-page-content { width: 100%; max-width: 1080px; margin: 0 auto; }
.account-page-header { display: flex; align-items: center; gap: 20px; padding: 8px 0 28px; border-bottom: 1px solid #e5e5e5; }
.account-page-header h1 { flex: 1; font-size: 36px; font-weight: 800; margin: 0; letter-spacing: -1px; }
.account-page-body { padding: 28px 0; }
.account-page .tm-content-list {
  /* Full account pages belong to the document scroller. Horizontal comparison
     tables retain their own overflow via their dedicated wrappers. */
  flex: none;
  overflow: visible;
}
.account-page-body[data-view="account"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 28px; align-items: start; }
.account-page-body[data-view="account"] > .tm-profile-header { grid-column: 1 / -1; }
.account-page-body[data-view="account"] > .tm-btn-primary { grid-column: 1 / -1; max-width: 360px; margin: 0; }
.account-page-body[data-view="account"] > .acc-logout-wrap { grid-column: 1 / -1; }
.account-page-body[data-view="account"] .acc-menu-list { margin: 0; }
/* Neutral placeholder shown while Clerk confirms a returning signed-in session (no signed-out flash). */
.account-page-body[data-view="account"] > .acc-skeleton { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 28px; align-items: start; }
.account-page-body[data-view="account"] > .acc-skeleton > .acc-skel-profile { grid-column: 1 / -1; }
.acc-skeleton .acc-skel-list { margin: 0; }
.acc-skel-profile { pointer-events: none; }
.acc-skel-row { display: flex; align-items: center; gap: 14px; padding: 16px; border-bottom: 1px solid #f2f2f2; min-height: 52px; }
.acc-skel-row:last-child { border-bottom: 0; }
.acc-skel-lines { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.acc-skel { display: block; border-radius: 8px; background: linear-gradient(90deg, #eeeeec 25%, #f6f6f4 50%, #eeeeec 75%); background-size: 200% 100%; animation: acc-skel-shimmer 1.2s ease-in-out infinite; }
.acc-skel-icon { width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0; }
.acc-skel-avatar { width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; }
.acc-skel-line { height: 12px; width: 45%; max-width: 220px; }
.acc-skel-line.short { height: 10px; width: 30%; max-width: 160px; }
@keyframes acc-skel-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .acc-skel { animation: none; } }
body[data-account-page="true"] > .screen:not(#s-search) { display: none !important; }
body[data-account-page="true"] #s-search { display: block !important; }
body[data-account-page="true"] #s-search > :not(header) { display: none !important; }
body[data-account-page="true"] > .bar { display: none !important; }
body[data-account-page="true"] #modeSeg button.on { background: transparent; color: #666; box-shadow: none; }
@media (max-width: 760px) {
  .account-page { padding: 12px 16px 100px; }
  .account-page-header { justify-content: center; padding-bottom: 24px; border-bottom: none; position: relative; }
  .account-page-header h1 { flex: none; font-size: 18px; text-align: center; }
  .account-page-header [data-action="back"] { position:absolute; inset-inline-start:-8px; width:40px; height:40px; padding:8px; }
  .account-page-header [data-action="back"] svg { display:block; width:24px; height:24px; flex-shrink:0; }
  .account-page-body[data-view="account"] { display: flex; flex-direction: column; gap: 20px; }
  .account-page-body[data-view="account"] > * { width: 100%; }
  .account-page-body[data-view="account"] > .acc-skeleton { display: flex; flex-direction: column; gap: 20px; }
  .account-page-body[data-view="account"] > .acc-skeleton > * { width: 100%; }
}

@keyframes acc-fade { from { opacity: 0; } }
@keyframes acc-slideUp { from { transform: translateY(100%); } }

.acc-menu-list { background: #fff; border-radius: 16px; overflow: hidden; margin-bottom: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.02); }
.acc-menu-item { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid #f2f2f2; cursor: pointer; width: 100%; text-align:start; background: none; border-inline-start: none; border-inline-end: none; border-top: none; }
.acc-menu-item:last-child { border-bottom: none; }
.acc-menu-item:hover { background: #fafafa; }
.acc-mi-left { display: flex; align-items: center; gap: 16px; }
.acc-mi-icon { width: 22px; height: 22px; color: #111; display: flex; align-items: center; justify-content: center; }
.acc-mi-content { display: flex; flex-direction: column; gap: 2px; }
.acc-mi-text { font-size: 15px; font-weight: 700; color: #111; line-height: 1.2; }
.acc-mi-subtitle { font-size: 13px; color: #777; }
.acc-mi-right { display: flex; align-items: center; gap: 8px; }
.acc-mi-badge { background: #ff5400; color: #fff; padding: 2px 7px; border-radius: 99px; font-size: 11px; font-weight: 800; line-height: 1.2; }
.acc-mi-chevron { color: #aaa; display: flex; align-items: center; justify-content: center; }
.account-sheet-overlay.hidden{display:none}

/* Fallback Structural Sheet CSS for standalone account pages without index.html */
body.lock { overflow: hidden !important; }
.sheet-ov { position: fixed; inset: 0; background: rgba(16,19,24,.45); z-index: 2000; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.sheet-ov.on { opacity: 1; pointer-events: auto; }
.sheet { position: fixed; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; z-index: 2001; background: #fff; border-radius: 20px 20px 0 0; max-height: 86dvh; display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.25s cubic-bezier(0.2,0.8,0.2,1); box-shadow: 0 -10px 40px rgba(0,0,0,0.2); }
.sheet.on { transform: none; }
.sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: #e5e5e5; margin: 10px auto 4px; flex-shrink: 0; }
.sheet .sh { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px 8px; flex-shrink: 0; }
.sheet .sh h3 { margin: 0; font-size: 16px; font-weight: 800; color: #111; }
.sheet .sp { overflow-y: auto; flex: 1; min-height: 0; overscroll-behavior: contain; padding: 0 16px calc(16px + env(safe-area-inset-bottom)); }
.sheet .sf { flex-shrink: 0; background: #fff; padding: 8px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid #e5e5e5; }
.sheet .sf:empty { display: none; }
/* Desktop: every bottom sheet becomes a centred modal (the phone slide-up stays below 768px).
   `body .sheet` outranks the per-page `.sheet` / `.sheet.on` bases whatever their load order. */
@media (min-width: 768px) {
  body .sheet { left:50%; inset-inline-end:auto; top: 50%; bottom: auto; width: min(560px, calc(100vw - 48px)); max-height: calc(100dvh - 64px); border: 1px solid #e8e8e8; border-radius: 20px; box-shadow: 0 24px 80px rgba(0,0,0,.28); opacity: 0; visibility: hidden; transform: translate(-50%, -50%) translateY(14px); transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .2s, visibility 0s linear .22s; }
  body .sheet.on { opacity: 1; visibility: visible; transform: translate(-50%, -50%); transition-delay: 0s; }
  body .sheet .grab { display: none; }
  body .sheet .sh { padding: 20px 24px 14px; }
  body .sheet .sf { padding: 16px 24px; }
  body .sheet .sp, body .sheet ul { padding-bottom: 16px; }
  body .sheet.tm-alert-form-sheet { width: min(520px, calc(100vw - 48px)); padding-top: 20px; }
  body .sheet.tm-alert-form-sheet .tm-alert-form-handle { display: none; }
}

.tm-profile-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; padding: 12px 16px; background: #fff; border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.02); cursor: pointer; transition: background 0.2s; }
.tm-profile-header:hover { background: #fafafa; }
.tm-profile-header:active { background: #f2f2f2; }
.tm-profile-avatar { width: 64px; height: 64px; border-radius: 50%; background: #0b0f14; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; flex-shrink: 0; }
.tm-profile-info h2 { margin: 0 0 4px 0; font-size: 20px; font-weight: 800; color: #111; }
.tm-profile-info p { margin: 0; font-size: 14px; color: #777; }
.tm-profile-info { min-width: 0; }
.tm-profile-info p { overflow-wrap: anywhere; }
.acc-language-options { display: flex; gap: 6px; margin-inline-start: auto; }
.acc-language-options span, .acc-language-options button { padding: 7px 9px; border: 0; border-radius: 9px; background: #f3f3f3; color: #777; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.acc-language-options .selected { background: #0b0f14; color: white; }
.acc-language-row { gap: 16px; }
.acc-language-row .acc-mi-icon { flex-shrink: 0; }
.acc-logout-wrap { display: flex; justify-content: center; margin-top: 8px; padding-bottom: 16px; }
.tm-clerk-profile-link { background: none; border: none; color: #777; font-size: 14px; font-weight: 600; padding: 12px; cursor: pointer; }
.tm-input-group{display:block;margin-bottom:14px}.tm-input-group select{width:100%;border:0;background:transparent;font:700 16px inherit}
.tm-language-note{margin:-4px 2px 16px;color:#5b6470;font-size:12px;line-height:1.45}
.tm-data-card button{margin-block:8px 0;margin-inline:0 8px;border:1px solid #e3e1da;border-radius:8px;background:#fff;padding:7px 10px;font-weight:700;cursor:pointer}.tm-data-card a{margin-top:12px}

:root{--tm-orange:#ff5400;--tm-black:#0b0f14;--tm-gray-500:#5b6470;--tm-gray-400:#9ca3af;--tm-gray-200:#e3e1da;--tm-gray-100:#f5f3ee;--tm-danger:#dc2626}
#tm-account-root{position:fixed;inset:0;z-index:1000;pointer-events:none;display:flex;justify-content:flex-end;background:transparent;transition:background .3s;font-family:"Manrope",system-ui,sans-serif;color:var(--tm-black)}
#tm-account-root.open{pointer-events:auto;background:rgb(0 0 0/.5)}
.tm-stack-container{width:100%;max-width:480px;height:100dvh;position:relative;background:#fff;box-shadow:-4px 0 24px rgb(0 0 0/.1);overflow:hidden}
.tm-screen{position:absolute;inset:0;background:#fff;display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .3s;overflow:hidden}
.tm-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background:#fff;border-bottom:1px solid var(--tm-gray-100);flex:none}
.tm-back,.tm-close-white{border:0;background:none;color:inherit;cursor:pointer;padding:4px}.tm-btn-primary{width:100%;padding:16px;border:0;border-radius:16px;background:var(--tm-orange);color:#fff;font:800 16px inherit;cursor:pointer}.tm-btn-primary:disabled{opacity:.5;cursor:not-allowed}
.tm-input-group{padding:12px 16px;border:1px solid var(--tm-gray-200);border-radius:12px;background:var(--tm-gray-100)}.tm-input-group label{display:block;margin-bottom:4px;color:var(--tm-gray-500);font-size:12px;font-weight:700}.tm-input-group input{width:100%;border:0;outline:0;background:transparent;font:700 16px inherit}
.tm-list-item{display:flex;align-items:center;padding:16px;border-bottom:1px solid var(--tm-gray-100);cursor:pointer}.tm-list-item>svg:first-child,.tm-list-item>ph-icon:first-child{margin-inline-end:16px}.tm-switch{position:relative;display:inline-block;width:44px;height:24px}.tm-switch input{opacity:0}.tm-switch .slider{position:absolute;inset:0;border-radius:24px;background:var(--tm-gray-200)}.tm-switch .slider:before{position:absolute;content:"";width:20px;height:20px;inset-inline-start:2px;bottom:2px;border-radius:50%;background:#fff}.tm-switch input:checked+.slider{background:var(--tm-orange)}.tm-switch input:checked+.slider:before{transform:translateX(20px)}
.tm-bottom-nav{display:flex;justify-content:space-around;padding:8px 16px 24px;border-top:1px solid var(--tm-gray-200);background:#fff}.tm-nav-item{display:flex;flex:1;flex-direction:column;align-items:center;gap:4px;padding:8px;color:var(--tm-gray-500);text-decoration:none;font-size:10px;font-weight:700}.tm-nav-item.active{color:var(--tm-orange)}.tm-nav-item svg{width:24px;height:24px}
.tm-compare-table{padding:8px 16px;border-radius:16px;background:#fff}.tm-compare-row{display:flex;align-items:center;padding:12px 0;border-bottom:1px solid var(--tm-gray-100)}.tm-compare-label{width:100px;flex:none;color:var(--tm-gray-500);font-size:12px;font-weight:700}.tm-compare-val{flex:1;text-align:center;font-size:13px}
.tm-sync-status{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;font-size:12px;font-weight:700;flex:none}.tm-sync-loading{background:#fff7ed;color:#9a3412}.tm-sync-success{background:#f0fdf4;color:#166534}.tm-sync-error{background:#fef2f2;color:#991b1b}.tm-sync-status button{border:0;background:transparent;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}
.tm-content-list{flex:1;overflow:auto;padding:16px;background:#f9fafb}.tm-data-card{margin-bottom:12px;padding:16px;border:1px solid var(--tm-gray-200);border-radius:14px;background:#fff}.tm-data-card.tm-unread{border-inline-start:4px solid var(--tm-orange)}.tm-data-card h3{margin:0 0 6px}.tm-data-card p{margin:0 0 8px;color:var(--tm-gray-500);font-size:13px}.tm-data-card time{color:var(--tm-gray-400);font-size:11px}.tm-data-card a{float:inline-end;color:#c74200;font-size:12px;font-weight:800}.tm-empty{padding:48px 20px;text-align:center;color:var(--tm-gray-500)}.tm-delivery-note{padding:12px 16px;background:#fff7ed;color:#9a3412;font-size:12px}.tm-screen-footer{padding:16px 24px max(24px,env(safe-area-inset-bottom));border-top:1px solid var(--tm-gray-100)}.tm-count{padding:3px 7px;border-radius:99px;background:var(--tm-gray-100);font-size:11px;font-weight:800}
.flex{display:flex}.flex-1{flex:1}.flex-col{flex-direction:column}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-10{padding:2.5rem}.px-2{padding-inline-start:.5rem;padding-inline-end:.5rem}.px-3{padding-inline-start:.75rem;padding-inline-end:.75rem}.px-4{padding-inline-start:1rem;padding-inline-end:1rem}.px-6{padding-inline-start:1.5rem;padding-inline-end:1.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pb-10{padding-bottom:2.5rem}.pb-24{padding-bottom:6rem}.pt-10{padding-top:2.5rem}.m-0{margin:0}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-10{margin-bottom:2.5rem}.mr-2{margin-inline-end:.5rem}.mr-4{margin-inline-end:1rem}
.w-4{width:1rem}.h-4{height:1rem}.w-5{width:1.25rem}.h-5{height:1.25rem}.w-6{width:1.5rem}.h-6{height:1.5rem}.w-8{width:2rem}.h-8{height:2rem}.w-16{width:4rem}.h-16{height:4rem}.w-20{width:5rem}.h-20{height:5rem}.w-24{width:6rem}.h-24{height:6rem}.w-full{width:100%}.h-full{height:100%}.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.text-3xl{font-size:1.875rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.text-center{text-align:center}.text-white{color:#fff}.text-black{color:var(--tm-black)}.text-orange{color:var(--tm-orange)}.text-gray-300{color:#d1d5db}.text-gray-400{color:var(--tm-gray-400)}.text-gray-500{color:var(--tm-gray-500)}.text-green-700{color:#15803d}.bg-white{background:#fff}.bg-black,.bg-gray-900{background:var(--tm-black)}.bg-gray-50{background:#f9fafb}.bg-gray-100{background:var(--tm-gray-100)}.bg-orange{background:var(--tm-orange)}.bg-green-50{background:#f0fdf4}.rounded{border-radius:.25rem}.rounded-xl{border-radius:.75rem}.rounded-full{border-radius:999px}.border{border:1px solid}.border-t{border-top:1px solid}.border-b{border-bottom:1px solid}.border-gray-100{border-color:var(--tm-gray-100)}.border-gray-200{border-color:var(--tm-gray-200)}.border-white{border-color:#fff}.border-none{border:0}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.relative{position:relative}.absolute{position:absolute}.shrink-0{flex-shrink:0}.object-cover{object-fit:cover}.cursor-pointer{cursor:pointer}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.opacity-50{opacity:.5}

.tm-data-card.tm-selected { box-shadow: 0 0 0 2px var(--tm-orange); background: #fffaf7; }
.tm-compare-checkbox-overlay { position: absolute; inset-inline-start: 16px; top: 16px; width: 24px; height: 24px; cursor: pointer; z-index: 2; margin: 0; padding: 0; }
.tm-compare-checkbox-overlay input { position: absolute; opacity: 0; width: 0; height: 0; }
.tm-checkbox-custom { position: absolute; inset: 0; background: #fff; border: 2px solid #ccc; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.tm-compare-checkbox-overlay input:checked ~ .tm-checkbox-custom { background: var(--tm-orange); border-color: var(--tm-orange); }
.tm-compare-checkbox-overlay input:checked ~ .tm-checkbox-custom::after { content: ""; width: 6px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-bottom: 2px; }
.tm-compare-checkbox-overlay input:focus-visible ~ .tm-checkbox-custom { outline: 2px solid #000; outline-offset: 2px; }
.tm-card-link-overlay { position: absolute; inset: 0; z-index: 1; border-radius: 16px; }
.tm-card-link-overlay:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

/* Saved & Compare Styles */
.tm-saved-header { margin: 0 16px 16px; background: transparent; position: relative; z-index: 10; }
.tm-segmented-control { display: flex; background: #e9ecf2; border-radius: 12px; padding: 4px; }
.tm-seg-btn { flex: 1; border: none; background: transparent; padding: 8px; border-radius: 8px; font-weight: 700; color: #777; cursor: pointer; transition: 0.2s; font-size: 15px; }
.tm-seg-btn.active { background: #fff; color: #111; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

.tm-data-card { position: relative; background: #fff; border-radius: 16px; padding: 16px; margin: 0 16px 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.02); display: flex; flex-direction: column; }
.tm-card-row { display: flex; gap: 16px; align-items: stretch; }
.tm-list-img-wrap { width: 100px; height: 75px; background: #e9ecf2; border-radius: 8px; flex-shrink: 0; overflow: hidden; }
.tm-list-img { width: 100%; height: 100%; object-fit: cover; }
.tm-list-img-placeholder { width: 100%; height: 100%; background: #e9ecf2; }
.tm-card-content { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.tm-price-main { display: block; font-size: 18px; color: #111; font-weight: 800; margin-bottom: 2px; }
.tm-card-content h3 { font-size: 14px; font-weight: 500; color: #111; margin: 0 0 2px 0; }
.tm-card-content p { margin: 0; color: #777; font-size: 13px; }
.tm-landed-cost { color: #111 !important; font-weight: 500; margin-top: 4px !important; }
.tm-unsave { position: absolute; top: 12px; inset-inline-end: 12px; background: none; border: none; color: var(--tm-orange); padding: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; }
.tm-saved-footer { position: sticky; bottom: 0; padding: 16px; background: #f8f8f7; border-top: 1px solid #e5e5e5; z-index: 10; margin-top: auto; }
.tm-saved-footer .tm-btn-block { margin: 0; }

.tm-compare-scroll { overflow-x: auto; padding: 16px; flex: 1; }
.tm-reference-compare { margin: 0 16px 16px; background: #fff; border-radius: 16px; overflow-x: auto; box-shadow: 0 2px 8px rgba(0,0,0,0.02); }
.tm-compare-grid { width: 100%; border-collapse: collapse; min-width: max-content; }
.tm-compare-grid th, .tm-compare-grid td { padding: 16px; text-align: center; border-bottom: 1px solid #f0f0f0; border-inline-end: 1px solid #f0f0f0; vertical-align: middle; }
.tm-compare-grid th:first-child, .tm-compare-grid td:first-child { text-align:start; position: sticky; inset-inline-start: 0; background: #fff; border-inline-end: 1px solid #f0f0f0; color: #777; font-weight: 500; font-size: 13px; z-index: 2; }
.tm-compare-grid thead td { border-bottom: 1px solid #f0f0f0; vertical-align: bottom; }
.tm-compare-grid thead tr td { padding-top: 24px; position: relative; }
.tm-compare-remove { position: absolute; top: -8px; inset-inline-end: -8px; width: 24px; height: 24px; border-radius: 12px; border: none; background: rgba(0,0,0,0.5); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; z-index: 3; }
.tm-compare-grid img { width: 100%; height: 90px; object-fit: contain; margin-bottom: 12px; }
.tm-compare-img-placeholder { width: 100%; height: 90px; background: #e9ecf2; margin-bottom: 12px; border-radius: 8px; }
.tm-country-pill { display: inline-flex; align-items: center; gap: 5px; background: #e9ecf2; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; margin-bottom: 8px; color: #111; }
.tm-country-pill .tm-flag-name { margin-inline-start: 0; }
.tm-compare-grid h4 { font-size: 14px; font-weight: 600; margin: 0; color: #111; }
.tm-highlight { background: #8cff22; color: #111; padding: 4px 10px; border-radius: 99px; font-weight: 800; display: inline-block; }

.tm-search-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tm-search-name-input { font-size: 16px; font-weight: 700; border: none; border-bottom: 1px dashed transparent; padding: 4px 0; background: transparent; width: 100%; margin-inline-end: 16px; transition: 0.2s; }
.tm-search-name-input:focus { border-bottom-color: #ccc; outline: none; }
.tm-search-criteria { color: #555; font-size: 13px; margin: 0 0 12px 0; }

/* Alerts */
.tm-alert-empty { padding: 40px 20px; text-align: center; }
.tm-alert-icon-bell { margin: 0 auto 24px; width: 64px; height: 64px; position: relative; }
.tm-alert-icon-bell svg { width: 100%; height: 100%; color: #aaa; }
.tm-alert-empty h2 { font-size: 28px; font-weight: 800; margin-bottom: 12px; letter-spacing:-1px; }
.tm-alert-empty p { color: #666; font-size: 15px; margin-bottom: 32px; }
.tm-alert-examples { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.tm-alert-example { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 16px; font-size: 15px; font-weight: 700; color: #111; box-shadow: 0 2px 8px rgba(0,0,0,0.02); }
.tm-alert-footer-note { font-size: 13px; color: #888; margin-top: 16px; }
.tm-alert-header-full { display: flex; justify-content: space-between; margin-bottom: 16px; padding: 0 8px; }
.tm-btn-orange-banner { display: flex; align-items: center; justify-content: space-between; background: var(--tm-orange); color: white; border: none; border-radius: 12px; padding: 12px 16px; width: 100%; font-weight: 800; font-size: 16px; cursor: pointer; }
.tm-alert-card { background: #fff; border-radius: 16px; padding: 16px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.02); }
.tm-alert-card-info h3 { font-size: 16px; font-weight: 800; margin: 0 0 4px 0; color: #111; }
.tm-alert-card-sub { font-size: 13px; color: #777; margin: 0 0 12px 0; text-transform: uppercase; font-weight: 500; }
.tm-alert-count-pill { display: inline-block; background: #dcfce7; color: #166534; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 12px; }
.tm-alert-card-action { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tm-alert-label { font-size: 11px; color: #777; font-weight: 600; }
.tm-alert-bottom-note { font-size: 13px; color: #777; text-align: center; margin-top: 24px; }

/* Recents: styled in searches-mobile.css (.tm-recent-*) */
.tm-recent-clear { border: none; background: transparent; color: #777; font-size: 14px; font-weight: 600; padding: 8px; cursor: pointer; }

/* Orders */
.tm-order-empty { padding: 20px 20px; text-align: center; }
.tm-order-sticker-preview { background: var(--tm-orange); color: white; border-radius: 12px; padding: 24px; display: flex; align-items: center; justify-content: space-between; margin: 0 auto 32px; max-width: 320px; box-shadow: 0 10px 25px rgba(255,84,0,0.2); transform: rotate(-3deg); }
.tm-order-sticker-logo { width: 32px; height: 32px; flex-shrink: 0; }
.tm-order-sticker-text { flex: 1; display: flex; flex-direction: column; text-align:start; margin: 0 16px; }
.tm-order-sticker-brand { font-size: 12px; font-weight: 700; opacity: 0.9; }
.tm-order-sticker-title { font-size: 20px; font-weight: 800; line-height: 1; }
.tm-order-sticker-qr { width: 48px; height: 48px; flex-shrink: 0; }
.tm-order-empty-title { font-size: 28px; font-weight: 800; margin-bottom: 12px; letter-spacing: -1px; }
.tm-order-empty-desc { color: #666; font-size: 15px; margin-bottom: 24px; }
.tm-order-pricing { background: #fff; border-radius: 16px; margin-bottom: 32px; overflow: hidden; }
.tm-order-price-row { display: flex; justify-content: space-between; padding: 16px; border-bottom: 1px solid #eee; font-size: 15px; }
.tm-order-price-row strong { font-weight: 800; }
.tm-order-list { display: flex; flex-direction: column; gap: 12px; }
.tm-order-card { background: #fff; border-radius: 16px; padding: 16px; display: flex; align-items: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.02); }
.tm-order-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-inline-end: 16px; flex-shrink: 0; }
.tm-order-icon svg { width: 24px; height: 24px; }
.tm-order-content { flex: 1; min-width: 0; }
.tm-order-content h4 { font-size: 16px; font-weight: 800; margin: 0 0 4px 0; }
.tm-order-content p { font-size: 13px; color: #777; margin: 0; }
.tm-order-status { display: flex; align-items: center; gap: 8px; margin-inline-start: 12px; }
.tm-status-badge { padding: 6px 12px; border-radius: 99px; font-size: 12px; font-weight: 700; color: #111; }
.tm-status-green { background: #22c55e; color: white; }
.tm-status-black { background: #111; color: white; }
.tm-status-gray { background: #e5e5e5; color: #111; }
.tm-order-detail-page { padding: 0; }
.tm-order-timeline-card { background: #fff; border-radius: 16px; padding: 24px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.02); }
.tm-order-timeline { position: relative; }
.tm-timeline-step { display: flex; gap: 16px; position: relative; padding-bottom: 32px; }
.tm-timeline-step.last { padding-bottom: 0; }
.tm-timeline-step:not(.last)::after { content: ""; position: absolute; inset-inline-start: 11px; top: 24px; bottom: 0; width: 2px; background: #e5e5e5; }
.tm-timeline-step.completed:not(.last)::after { background: var(--tm-orange); }
.tm-timeline-icon { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #e5e5e5; background: #fff; position: relative; z-index: 2; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.tm-timeline-step.completed .tm-timeline-icon { background: var(--tm-orange); border-color: var(--tm-orange); }
.tm-timeline-content h5 { font-size: 15px; font-weight: 800; margin: 0 0 4px 0; }
.tm-timeline-content p { font-size: 13px; color: #777; margin: 0; }
.tm-order-tracking-card { background: #fff; border-radius: 16px; padding: 16px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.02); }
.tm-order-tracking-info h4 { font-size: 16px; font-weight: 800; margin: 0 0 4px 0; }
.tm-order-tracking-info p { font-size: 13px; color: #777; margin: 0; }
.tm-btn-outline { border: 1px solid #ccc; background: transparent; font-weight: 700; padding: 8px 16px; border-radius: 12px; cursor: pointer; }
.tm-order-support { font-size: 13px; text-align: center; margin-top: 16px; }

/* Notifications */
.tm-notif-section { font-size: 13px; color: #777; font-weight: 600; text-transform: uppercase; margin: 24px 8px 12px; }
.tm-notif-list { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.02); }
.tm-notif-card { display: flex; align-items: center; padding: 16px; border-bottom: 1px solid #eee; cursor: pointer; }
.tm-notif-card:last-child { border-bottom: none; }
.tm-notif-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-inline-end: 16px; flex-shrink: 0; }
.tm-notif-icon svg { width: 24px; height: 24px; color: white; }
.tm-bg-orange { background: var(--tm-orange); }
.tm-bg-black { background: #111; }
.tm-bg-green { background: #22c55e; }
.tm-bg-yellow { background: #eab308; }
.tm-bg-gray { background: #e5e5e5; color: #111; }
.tm-notif-content { flex: 1; min-width: 0; }
.tm-notif-content h4 { font-size: 15px; font-weight: 800; margin: 0 0 2px 0; }
.tm-notif-content p { font-size: 13px; color: #777; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-notif-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-inline-start: 12px; flex-shrink: 0; }
.tm-notif-time { font-size: 12px; color: #999; }
.tm-notif-dot { width: 8px; height: 8px; background: var(--tm-orange); border-radius: 50%; }

/* Customs */
.tm-customs-page { padding: 0; }
.tm-customs-subtitle { color: #777; font-size: 13px; text-align: center; margin-bottom: 24px; line-height: 1.4; padding: 0 12px; }
.tm-regime-toggle { display: flex; gap: 8px; margin-bottom: 16px; background: #f3f3f3; padding: 4px; border-radius: 12px; }
.tm-regime-btn { flex: 1; text-align: center; padding: 12px; border-radius: 10px; cursor: pointer; transition: background 0.2s, box-shadow 0.2s; color: #555; user-select: none; position: relative; }
.tm-regime-btn:has(input:focus-visible) { outline: 2px solid #ff5400; outline-offset: 2px; }
.tm-regime-btn.active { background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.05); color: #000; }
.tm-regime-title { display: block; font-weight: 800; font-size: 15px; }
.tm-regime-sub { display: block; font-size: 12px; opacity: 0.8; margin-top: 2px; }
.tm-customs-card { background: #fff; border-radius: 16px; padding: 24px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.02); }
.tm-customs-card h3 { font-size: 20px; font-weight: 800; margin: 0 0 20px 0; color: #000; }
.tm-customs-overview { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.tm-customs-row { display: flex; align-items: center; gap: 16px; font-size: 15px; color: #111; }
.tm-customs-row svg { width: 24px; height: 24px; flex-shrink: 0; color: #ff5400; }
.tm-customs-row strong { font-weight: 800; }
.tm-customs-details { background: #f9f9f9; border-radius: 12px; overflow: hidden; }
.tm-customs-details summary { font-weight: 700; font-size: 14px; padding: 16px; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; color: #555; }
.tm-customs-details summary::-webkit-details-marker { display: none; }
.tm-customs-details summary::after { content: ""; display: block; width: 20px; height: 20px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ff5400" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>') no-repeat center; transition: transform 0.2s; }
.tm-customs-details[open] summary::after { transform: rotate(180deg); }
.tm-customs-details-content { padding: 0 16px 16px 16px; font-size: 14px; color: #444; line-height: 1.5; }
.tm-customs-details-content ul { list-style: disc; margin: 0; padding-inline-start: 20px; }
.tm-customs-details-content li { margin-bottom: 8px; }
.tm-customs-details-content li:last-child { margin-bottom: 0; }
.tm-customs-warning { background: #fef2f2; color: #991b1b; padding: 16px; border-radius: 12px; display: flex; align-items: center; gap: 12px; margin-bottom: 24px; font-weight: 700; font-size: 15px; }
.tm-customs-warning-icon { width: 24px; height: 24px; background: #dc2626; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; }
.tm-customs-disclaimer { display: flex; gap: 12px; color: #777; font-size: 13px; align-items: flex-start; padding: 0 12px; margin-bottom: 20px; }
.tm-customs-disclaimer svg { width: 20px; height: 20px; flex-shrink: 0; color: #ff5400; }

/* Cost assumptions (Douane view) */
.tm-cost-card .tm-cost-intro { margin: -8px 0 18px; font-size: 14px; line-height: 1.5; color: #5c6266; }
.tm-cost-rows { display: flex; flex-direction: column; }
.tm-cost-row { padding: 16px 0; border-top: 1px solid #f0efeb; }
.tm-cost-row:first-child { border-top: 0; padding-top: 0; }
.tm-cost-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.tm-cost-label { font-size: 15px; font-weight: 800; color: #111; }
.tm-cost-kind { font-size: 11px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: #f2f1ee; color: #5c6266; white-space: nowrap; }
.tm-cost-kind-legal { background: #111; color: #fff; }
.tm-cost-kind-estimate { background: #fff1ea; color: #ff5400; }
.tm-cost-input { display: flex; align-items: center; gap: 10px; border: 1px solid #e3e1dc; border-radius: 12px; background: #faf9f7; padding: 0 14px; }
.tm-cost-input input { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; padding: 13px 0; font: 700 17px inherit; color: #111; -moz-appearance: textfield; }
.tm-cost-input input::-webkit-outer-spin-button, .tm-cost-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tm-cost-unit { font-size: 13px; font-weight: 700; color: #5c6266; white-space: nowrap; }
.tm-cost-row[data-overridden="1"][data-kind="legal"] .tm-cost-input { border-color: #e0a100; background: #fff9e6; }
.tm-cost-note { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: #5c6266; }
.tm-cost-warning { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #fff9e6; color: #6b4e00; font-size: 13px; line-height: 1.4; }
.tm-cost-warning[hidden] { display: none; }
.tm-cost-warning svg { flex-shrink: 0; margin-top: 1px; }
.tm-cost-row[data-kind="estimate"] .tm-cost-warning, .tm-cost-row[data-kind="reference"] .tm-cost-warning { background: #f2f1ee; color: #5c6266; }
.tm-cost-warning span { flex: 1; }
.tm-cost-reset { border: 0; background: transparent; padding: 0; font: 800 13px inherit; color: #ff5400; cursor: pointer; white-space: nowrap; }

/* Phones: the title bar (back + title) stays pinned while the view scrolls and clears the status
   bar in the installed app (viewport-fit=cover; the platform header is hidden on account views).
   Per-view paddings differ, so the bar paints its own backdrop wider than itself — clipped by
   .account-page — instead of relying on negative margins. Selector weight beats the per-view
   padding shorthands in account-reference-shell.css / orders-mobile.css / security.css. */
@media (max-width: 899px) {
  .account-page { overflow-x: clip; }
  .account-page-content { background: inherit; }
  body .account-page .account-page-content > .account-page-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: inherit;
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
    box-shadow: none;
  }
  body .account-page .account-page-content > .account-page-header::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    inset-inline: -48px;
    background: inherit;
    z-index: -1;
  }
  body .account-page .account-page-content > .account-page-header.is-stuck::before { box-shadow: 0 1px 0 rgba(11, 15, 20, .08); }
}

/* Destination country (import-destinations.js): flag + French name, grouped by region. */
.tm-destination-group{margin-bottom:12px}
.tm-destination-field{display:flex;align-items:center;gap:10px}
.tm-destination-field select{flex:1;min-width:0}
.tm-destination-flag{display:inline-flex;flex-shrink:0;width:22px;height:22px;border-radius:50%;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.tm-destination-flag svg{width:100%;height:100%;display:block}
.tm-customs-summary{color:#333;font-size:14px;line-height:1.5;margin:-12px 12px 20px;text-align:center}
.tm-customs-banned{color:#111}.tm-customs-banned svg{color:#c62828}
.tm-regime-toggle[hidden]{display:none}
.tm-regime-toggle .tm-regime-btn{min-width:0}.tm-regime-toggle .tm-regime-title,.tm-regime-toggle .tm-regime-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
/* Three or more regimes (Burundi, Rwanda, Togo…): two per row so that labels stay readable. */
.tm-regime-toggle[data-count="3"],.tm-regime-toggle[data-count="4"],.tm-regime-toggle[data-count="5"],.tm-regime-toggle[data-count="6"]{flex-wrap:wrap}
.tm-regime-toggle[data-count="3"] .tm-regime-btn,.tm-regime-toggle[data-count="4"] .tm-regime-btn,.tm-regime-toggle[data-count="5"] .tm-regime-btn,.tm-regime-toggle[data-count="6"] .tm-regime-btn{flex:1 1 calc(50% - 4px)}
.tm-source-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:13px;line-height:1.45}
.tm-source-list a{color:#111;text-decoration:underline;text-underline-offset:2px}
.tm-source-meta{color:#777}
.tm-customs-sources .tm-customs-details{margin-top:12px}
.tm-cost-partial{display:flex;gap:8px;align-items:flex-start;color:#111}.tm-cost-partial ph-icon{flex:0 0 auto;color:#ff5400;margin-top:1px}