body{font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;margin:0;color:#0f172a}.container{max-width:1100px;margin:0 auto;padding:0 20px}.header,.footer{border-bottom:1px solid #e5e7eb;padding:14px 0}.footer{border-top:1px solid #e5e7eb;border-bottom:0;margin-top:40px}.card{border:1px solid #e5e7eb;border-radius:14px;padding:16px;box-shadow:0 10px 30px rgba(2,6,23,.06)}


/* ============ Viator-like Header ============ */
:root{
  --ink:#0f172a; --muted:#64748b; --line:#e5e7eb; --bg:#ffffff; --brand:#0e63ff;
  --card:#ffffff; --shadow:0 12px 28px rgba(2,6,23,.12), 0 2px 8px rgba(2,6,23,.06);
}
.vt-header{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid var(--line)}
.vt-row{display:flex;align-items:center;gap:18px;height:70px}

.vt-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.vt-logo{width:34px;height:34px;display:block}
.vt-brandstack{display:flex;flex-direction:column;line-height:1}
.vt-brandtext{font-weight:800;font-size:20px;letter-spacing:.2px}
.vt-subtext{font-size:11px;color:var(--muted)}

.vt-primary{display:flex;align-items:center;gap:10px;margin-left:20px}
.vt-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;padding:10px 12px;border-radius:10px;border:1px solid transparent;background:transparent;color:#111}
.vt-link:hover{background:#f7f7f8}

.vt-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.vt-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;border:1px solid var(--line);color:#111;background:#fff}
.vt-iconbtn:hover{background:#f7f7f8}
.vt-account{position:relative}
.vt-avatar{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 10px;border-radius:18px;border:1px solid var(--line);background:#fff;cursor:pointer}
.vt-avatar:hover{background:#f7f7f8}
.vt-caret{opacity:.8}

.vt-menu{position:absolute;top:52px;left:0;min-width:260px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:10px;display:none}
.vt-menu-right{left:auto;right:0}
.vt-menu.open{display:block}
.vt-menuitem{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;color:#111;text-decoration:none;white-space:nowrap}
.vt-menuitem:hover{background:#f7f7f8}
.vt-formlink{gap:10px}
.vt-formlink button{background:none;border:0;color:#111;font:inherit;cursor:pointer;padding:0}

/* Mobile tweaks */
.vt-hamburger{display:none;background:none;border:0;margin-left:8px}
.vt-hamburger span{display:block;width:22px;height:2px;background:#111;margin:5px 0;border-radius:2px}
@media (max-width: 1024px){
  .vt-primary{display:none} /* keep only Discover on desktop; mobile can open a panel later */
}


/* ===== Dark Footer ===== */
.ft{background:#0b0e12;color:#e5e7eb;margin-top:48px}
.ft .container{padding:28px 20px 30px}

.ft-top{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:26px}
.ft-social{display:flex;gap:16px}
.ft-ic{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid #1e293b;border-radius:12px;color:#cbd5e1;background:#0f131a}
.ft-ic:hover{background:#141a22}

.ft-rating{display:flex;align-items:center;gap:10px;color:#cbd5e1}
.ft-stars{display:inline-flex;gap:4px}
.ft-stars i{width:18px;height:18px;background:#16a34a;border-radius:3px;display:inline-block}
.ft-stars i.half{background:linear-gradient(90deg,#16a34a 50%,#0b0e12 50%);border:1px solid #16a34a}

.ft-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:6px 0 18px}
.ft-col h3{font-size:14px;color:#93a3b8;margin:8px 0 10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.ft-col a{display:block;color:#e5e7eb;text-decoration:none;padding:8px 0;border-radius:8px}
.ft-col a:hover{color:#fff;background:#121720}

.ft-rule{border:0;border-top:1px solid #1e293b;margin:18px 0}

.ft-apps{display:flex;gap:14px;flex-wrap:wrap;margin:12px 0 8px}
.ft-badge{display:flex;align-items:center;gap:10px;border:1px solid #1e293b;background:#0f131a;color:#e5e7eb;border-radius:12px;padding:10px 14px;text-decoration:none}
.ft-badge:hover{background:#121720}
.ft-badge span{font-size:13px;line-height:1.1}

.ft-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;font-size:13px;color:#93a3b8}
.ft-legal{display:flex;gap:16px;flex-wrap:wrap}
.ft-legal a{color:#cbd5e1;text-decoration:none}
.ft-legal a:hover{text-decoration:underline}

/* Responsive */
@media (max-width:1000px){
  .ft-cols{grid-template-columns:repeat(2,1fr)}
  .ft-top{flex-direction:column;align-items:flex-start;gap:12px}
}
@media (max-width:560px){
  .ft-cols{grid-template-columns:1fr}
  .ft-bottom{flex-direction:column;align-items:flex-start;gap:10px}
}



/* ===== Supplier/Partner Portal ===== */
body.portal{background:#f5f7fb;color:#0f172a}
.pp-nav{
  position:fixed; top:0; left:0; bottom:0; width:230px; background:#0b0e12; color:#e5e7eb;
  border-right:1px solid #1e293b; padding:18px 14px; z-index:900;
}
.pp-brand{display:flex;align-items:center;gap:10px;color:#e5e7eb;text-decoration:none;margin-bottom:16px}
.pp-brand img{width:28px;height:28px}
.pp-brand span{font-weight:800}
.pp-nav .pp-link{display:block;color:#cbd5e1;text-decoration:none;padding:10px 10px;border-radius:10px;margin:2px 0}
.pp-nav .pp-link:hover{background:#121720}
.pp-logout{margin-top:auto}
.pp-logout button{width:100%;padding:10px;border-radius:10px;border:1px solid #1e293b;background:#0f131a;color:#cbd5e1;cursor:pointer}
.pp-logout button:hover{background:#141a22}

.pp-top{position:sticky; top:0; margin-left:230px; background:#fff; border-bottom:1px solid #e5e7eb; z-index:800}
.pp-top-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.pp-title{font-size:18px;font-weight:800}
.pp-user{color:#475569}

.pp-main{margin-left:230px; padding:20px 20px 40px}

/* cards */
.pp-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:16px 0}
.pp-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:16px}
.pp-knum{font-size:22px;font-weight:800}
.pp-klabel{color:#64748b}

/* toolbar */
.pp-toolbar{display:flex;justify-content:flex-end;margin:8px 0 12px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:10px;border:1px solid #e5e7eb;background:#fff;color:#111;text-decoration:none;cursor:pointer}
.btn:hover{background:#f7f7f8}
.btn-primary{background:#0e63ff;color:#fff;border-color:#0e63ff}
.link{background:none;border:0;color:#0e63ff;cursor:pointer;text-decoration:none}
.link:hover{text-decoration:underline}

/* forms */
.pp-form{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:16px;margin:12px 0}
.pp-form label{font-weight:700;font-size:13px;display:block;margin:8px 0 6px}
.pp-form input[type=text], .pp-form input[type=number], .pp-form input[type=date], .pp-form textarea, .pp-form select{
  width:100%;padding:10px 12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff
}
.pp-actions{display:flex;gap:10px;margin-top:10px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media (max-width:900px){ .grid-2,.grid-3{grid-template-columns:1fr} .pp-cards{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .pp-cards{grid-template-columns:1fr} .pp-main,.pp-top{margin-left:0} .pp-nav{position:static;width:auto;height:auto} }

.pp-hr{border:0;border-top:1px solid #e5e7eb;margin:16px 0}
.pp-upload{display:flex;gap:10px;align-items:center}

.pp-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.pp-gallery figure{border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#fff}
.pp-gallery img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}
.pp-gallery figcaption{padding:8px;display:flex;justify-content:flex-end}

.pp-table{width:100%;border-collapse:separate;border-spacing:0 8px}
.pp-table th{text-align:left;color:#64748b;font-weight:700;font-size:13px;padding:0 10px}
.pp-table td{background:#fff;border:1px solid #e5e7eb;border-left-width:1px;padding:10px}
.pp-table tr td:first-child{border-radius:12px 0 0 12px}
.pp-table tr td:last-child{border-radius:0 12px 12px 0}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#eef2ff;color:#1e3a8a;font-weight:700;font-size:12px}
.empty{color:#94a3b8;text-align:center}

.pp-badges{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.badge-form{display:flex;align-items:center;gap:6px}
.alert-ok{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;padding:10px 12px;border-radius:10px;margin-bottom:12px}
.muted{color:#94a3b8}