/* Classic pages while the TripArro web app is the guest website: the web app's header, tab bar and font. */
@font-face { font-family: 'Poppins'; font-weight: 400; font-display: swap; src: url('fonts/poppins-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-display: swap; src: url('fonts/poppins-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-display: swap; src: url('fonts/poppins-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-display: swap; src: url('fonts/poppins-latin-700-normal.woff2') format('woff2'); }

body.ta-site { font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif; background: #f7f5f2; }
body.ta-site h1, body.ta-site h2, body.ta-site h3 { font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif; letter-spacing: -.015em; }

.ta-nav { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(227, 234, 245, .6); box-shadow: 0 1px 0 rgb(110 10 20 / .06), 0 6px 18px rgb(110 10 20 / .05); font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif; }
.ta-nav-in { max-width: 82.5rem; margin: 0 auto; padding: 0 1.5rem; height: 4.5rem; display: flex; align-items: center; gap: 1.5rem; }
.ta-logo { flex: none; display: flex; align-items: center; }
.ta-logo img { height: 56px; width: auto; max-width: 200px; object-fit: contain; display: block; }
.ta-menu { flex: 1; min-width: 0; }
.ta-menu ul { list-style: none; margin: 0; display: flex; width: fit-content; gap: 4px; padding: 6px; border-radius: 999px; background: rgba(255, 240, 239, .9); }
.ta-menu a { display: flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; font-size: .875rem; font-weight: 500; color: #2e3a46; white-space: nowrap; text-decoration: none; transition: background .15s; }
.ta-menu a:hover { background: #fff; }
.ta-right { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; }
.ta-link { font-size: .875rem; font-weight: 500; color: #2e3a46; text-decoration: none; white-space: nowrap; }
.ta-link:hover { color: #d7192a; }
.ta-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #fff0ef; color: #2e3a46; font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.ta-chip i { width: 1px; height: 12px; background: #f3c3bd; }
.ta-signin { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: #d7192a; color: #fff; font-size: .875rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ta-signin:hover { background: #a70f1e; color: #fff; }
.ta-acct { position: relative; }
.ta-acct summary { list-style: none; cursor: pointer; }
.ta-acct summary::-webkit-details-marker { display: none; }
.ta-av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #d7192a; color: #fff; font-weight: 600; font-size: .875rem; }
.ta-acct-panel { position: absolute; right: 0; top: calc(100% + 10px); width: 250px; background: #fff; border-radius: 20px; padding: 8px; box-shadow: 0 2px 4px rgb(110 10 20 / .05), 0 20px 48px rgb(110 10 20 / .12); display: flex; flex-direction: column; }
.ta-acct-panel a { padding: 10px 12px; border-radius: 12px; color: #101820; text-decoration: none; font-size: .9rem; font-weight: 500; }
.ta-acct-panel a:hover { background: #fff0ef; }
.ta-acct-panel hr { border: 0; border-top: 1px solid #ebe5df; margin: 6px 0; }
.ta-acct-head { padding: 10px 12px 8px; display: flex; flex-direction: column; }
.ta-acct-head span { color: #5b6774; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; }

.ta-tabs { display: none; }
@media (max-width: 1399px) { .ta-wide { display: none; } }
@media (max-width: 1023px) {
    .ta-menu { display: none; }
    .ta-nav-in { padding: 0 1rem; gap: 1rem; }
    .ta-logo img { height: 48px; }
    .ta-tabs { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: rgba(255, 255, 255, .95); backdrop-filter: blur(10px); border-top: 1px solid #ebe5df; padding-bottom: env(safe-area-inset-bottom); font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif; }
    .ta-tabs ul { list-style: none; margin: 0 auto; padding: 0; max-width: 32rem; display: grid; grid-template-columns: repeat(5, 1fr); }
    .ta-tabs a { min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: .6875rem; font-weight: 500; color: #5b6774; text-decoration: none; }
    .ta-tabs a span { display: grid; place-items: center; width: 48px; height: 28px; border-radius: 999px; }
    .ta-tabs a[aria-current] { color: #d7192a; }
    .ta-tabs a[aria-current] span { background: #fff0ef; }
    body.ta-site { padding-bottom: 64px; }
    body.ta-site .wa-float, body.ta-site .chat-fab { bottom: 76px; }
}
@media (max-width: 767px) { .ta-chip { display: none; } }

/* text follows the screen on every website page (15px phones → 16px desktops) */
html { font-size: clamp(15px, 14.4px + 0.16vw, 16px); }

/* Matte finish on the classic pages' menus: solid with a fine grain, no glass blur or glow */
:root { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ta-nav, .ta-tabs { background: #fff var(--grain) !important; background-size: 160px !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; border-color: #ebe5df !important; }
.ta-menu ul { background: #f6f1ed var(--grain); background-size: 160px; }
.ta-signin { background: #b81d2b var(--grain); background-size: 160px; }
.ta-signin:hover { background-color: #8f1520; }
.ta-acct-panel { box-shadow: 0 12px 28px -16px rgb(29 27 26 / .3); }
.ta-tabs a[aria-current] span { background: #f8ece9 var(--grain); background-size: 160px; }
.ta-signin { background: linear-gradient(115deg, #d4142b, #ec2a34 45%, #ff6a3d) !important; box-shadow: 0 8px 20px -10px rgb(224 24 45 / .65); transition: all .25s ease; }
body.ta-site { background: #fdf8f4; }