:root {
--mustard: #ffb800;
--dark-olive: #2b3022;
--charcoal: #172033;
--light-gray: #f9f5f0;
--border-color: #edf2f7;
--muted: #667085;
--soft-muted: #9aa8b8;
} .tp-itinerary-page {
background: var(--light-gray);
min-height: 100vh;
padding-bottom: 72px;
}
.tp-itinerary-page .tp-section-container {
max-width: 1180px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
} .tp-iti-hero {
background: #24301f;
color: #fff;
padding: 74px 0 58px;
margin-bottom: 34px;
position: relative;
overflow: hidden;
text-align: left;
}
.tp-iti-hero .tp-section-container {
text-align: left;
}
.tp-iti-hero h1 {
margin: 0 0 12px;
font-size: 3rem;
line-height: 1.08;
font-weight: 800;
color: #fff;
letter-spacing: -0.035em;
text-align: left;
}
.tp-iti-hero p {
max-width: 760px;
margin: 0;
color: #d8dfcf;
font-size: 1.05rem;
line-height: 1.65;
text-align: left;
} .tp-advanced-filters {
display: grid;
grid-template-columns: minmax(280px, 1.4fr) minmax(210px, 0.8fr) minmax(190px, 0.7fr) 150px;
gap: 14px;
align-items: center;
background: #fff;
border: 1px solid var(--border-color);
border-radius: 18px;
padding: 18px;
margin-bottom: 34px;
box-shadow: 0 12px 34px rgba(15, 23, 42, 0.055);
}
.filter-group {
position: relative;
width: 100%;
}
.filter-group.search-group i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #a0aec0;
z-index: 2;
}
.filter-group input,
.filter-group select {
width: 100%;
height: 48px;
border: 1px solid #e7edf3;
border-radius: 12px;
background: #f8f9fa;
color: var(--charcoal);
font-size: 0.92rem;
font-weight: 500;
padding: 0 14px;
outline: none;
box-sizing: border-box;
}
.filter-group.search-group input {
padding-left: 42px;
}
.filter-group input::placeholder {
color: #8a98aa;
}
.filter-group input:focus,
.filter-group select:focus {
border-color: var(--mustard);
background: #fff;
}
.tp-advanced-filters .tp-btn-small {
height: 48px;
border-radius: 12px;
background: var(--mustard);
color: #fff !important;
font-weight: 800;
font-size: 0.92rem;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none !important;
padding: 0 18px;
transition: 0.22s ease;
}
.tp-advanced-filters .tp-btn-small:hover {
transform: translateY(-1px);
filter: brightness(0.98);
} .tp-iti-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px;
align-items: stretch;
} .tp-iti-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid #e7edf3;
border-radius: 18px;
overflow: hidden;
text-decoration: none !important;
color: inherit !important;
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
transition: 0.25s ease;
min-height: 100%;
}
.tp-iti-card:hover {
transform: translateY(-4px);
border-color: rgba(255, 184, 0, 0.55);
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.10);
}
.tp-iti-img {
position: relative;
height: 210px;
overflow: hidden;
background: #edf2f7;
}
.tp-iti-img-link {
display: block;
width: 100%;
height: 100%;
text-decoration: none !important;
}
.tp-iti-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: 0.35s ease;
}
.tp-iti-card:hover .tp-iti-img img {
transform: scale(1.04);
} .tp-iti-badge {
position: absolute;
top: 14px;
left: 14px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 12px;
border-radius: 8px;
font-size: 0.76rem;
line-height: 1;
font-weight: 800;
color: #fff;
box-shadow: 0 8px 18px rgba(0,0,0,0.18);
} .tp-iti-badge {
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.22);
box-shadow: 0 7px 18px rgba(17, 24, 39, 0.20);
} .badge-4x4 {
background: #7a4b2a !important;
color: #ffffff !important;
} .badge-van {
background: #315f72 !important;
color: #ffffff !important;
} .badge-bike {
background: #b96e00 !important;
color: #ffffff !important;
} .badge-hike {
background: #486b3c !important;
color: #ffffff !important;
} .badge-camp {
background: #8a6535 !important;
color: #ffffff !important;
} .badge-route {
background: #2f3831 !important;
color: #ffffff !important;
} .tp-card-save-form {
position: absolute;
right: 14px;
top: 14px;
z-index: 4;
margin: 0 !important;
padding: 0 !important;
}
.tp-heart-btn {
position: absolute;
right: 14px;
top: 14px;
z-index: 4;
width: 42px;
height: 42px;
border: none;
border-radius: 50%;
background: rgba(255,255,255,0.94);
color: #9aa8b8;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 8px 18px rgba(0,0,0,0.16);
transition: 0.2s ease;
text-decoration: none !important;
padding: 0;
margin: 0;
appearance: none;
-webkit-appearance: none;
}
.tp-card-save-form .tp-heart-btn {
position: static;
}
.tp-heart-btn i {
line-height: 1;
font-size: 1rem;
}
.tp-heart-btn:hover {
color: #e74c3c;
transform: scale(1.05);
}
.tp-heart-btn.is-saved {
background: #fff1f1;
color: #e74c3c;
}
.tp-heart-btn.is-saved:hover {
background: #e74c3c;
color: #fff;
} .tp-iti-body {
padding: 24px 24px 22px;
flex: 1;
display: flex;
flex-direction: column;
}
.tp-iti-body h3 {
margin: 0 0 12px;
color: #172033;
font-size: 1.22rem;
line-height: 1.26;
font-weight: 800;
letter-spacing: -0.02em;
}
.tp-iti-body h3 a {
color: inherit;
text-decoration: none !important;
}
.tp-iti-body h3 a:hover {
color: var(--mustard);
}
.tp-iti-body p {
margin: 0 0 22px;
color: #667085;
font-size: 0.92rem;
line-height: 1.58;
} .tp-iti-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
background: #f8fafc;
border: 1px solid #e7edf3;
border-radius: 12px;
overflow: hidden;
margin-top: auto;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 82px;
min-width: 0;
padding: 12px 6px;
background: transparent;
border-right: 1px solid #e7edf3;
text-align: center;
}
.stat-item:last-child {
border-right: none;
}
.stat-item i {
width: auto;
height: auto;
min-width: 0;
border-radius: 0;
background: transparent;
color: #9aa8b8;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.02rem;
line-height: 1;
}
.st-info {
min-width: 0;
width: 100%;
}
.st-info strong {
display: block;
color: #172033;
font-size: 0.94rem;
line-height: 1.12;
font-weight: 800;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.st-info span {
display: block;
color: #718096;
font-size: 0.65rem;
line-height: 1.2;
margin-top: 5px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
} .tp-iti-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 17px 24px;
border-top: 1px solid #edf2f7;
background: #fbfcfe;
}
.tp-iti-author {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.tp-iti-author img {
width: 34px;
height: 34px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.tp-iti-author span {
color: #667085;
font-size: 0.82rem;
line-height: 1.2;
min-width: 0;
}
.tp-iti-author strong {
color: #172033;
font-weight: 800;
}
.tp-iti-footer .tp-btn-small {
display: inline-flex;
align-items: center;
gap: 7px;
border-radius: 0;
background: transparent;
color: var(--mustard) !important;
padding: 0;
font-size: 0.82rem;
font-weight: 800;
white-space: nowrap;
box-shadow: none;
text-decoration: none !important;
flex-shrink: 0;
}
.tp-iti-footer .tp-btn-small:hover {
color: #d99a00 !important;
} .tp-iti-detail-page {
background: var(--light-gray);
min-height: 100vh;
padding-bottom: 72px;
} .tp-iti-detail-hero {
min-height: 430px;
background-size: cover;
background-position: center;
display: flex;
align-items: flex-end;
justify-content: flex-start !important;
color: #fff;
padding: 80px 0 54px;
position: relative;
overflow: hidden;
text-align: left !important;
}
.tp-iti-detail-hero::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 5px;
background: var(--mustard);
}
.tp-iti-detail-hero .tp-section-container {
position: relative;
z-index: 2;
width: 100% !important;
max-width: 1180px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 20px;
padding-right: 20px;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-end !important;
text-align: left !important;
}
.tp-iti-detail-hero .tp-section-container > * {
text-align: left !important;
}
.tp-iti-detail-hero .tp-iti-badge {
position: static;
align-self: flex-start !important;
margin-bottom: 18px;
margin-left: 0 !important;
margin-right: auto !important;
}
.tp-iti-detail-hero h1 {
width: auto !important;
max-width: 900px;
margin: 0 0 18px !important;
color: #fff;
font-size: 3.35rem;
line-height: 1.05;
font-weight: 800;
letter-spacing: -0.045em;
text-shadow: 0 8px 28px rgba(0,0,0,0.28);
text-align: left !important;
align-self: flex-start !important;
}
.tp-iti-hero-meta {
display: flex;
align-items: center;
justify-content: flex-start !important;
flex-wrap: wrap;
gap: 18px;
color: rgba(255,255,255,0.88);
font-size: 0.92rem;
font-weight: 600;
text-align: left !important;
align-self: flex-start !important;
margin-left: 0 !important;
margin-right: auto !important;
}
.tp-iti-hero-meta span,
.tp-iti-hero-meta .author {
display: inline-flex;
align-items: center;
gap: 8px;
}
.tp-iti-hero-meta img {
width: 34px;
height: 34px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.75);
}
.tp-iti-hero-meta strong {
color: #fff;
} .tp-back-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 26px 0 22px;
color: var(--mustard);
font-size: 0.92rem;
font-weight: 800;
text-decoration: none !important;
}
.tp-back-link:hover {
color: #d99a00;
} .tp-iti-top-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(340px, 0.85fr);
gap: 26px;
margin-bottom: 28px;
}
.tp-content-box {
background: #fff;
border: 1px solid #e7edf3;
border-radius: 18px;
padding: 28px;
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.055);
}
.tp-content-box h2 {
margin: 0 0 14px;
color: var(--dark-olive);
font-size: 1.45rem;
line-height: 1.2;
font-weight: 800;
letter-spacing: -0.025em;
}
.tp-content-box p {
margin: 0 0 14px;
color: var(--muted);
font-size: 0.96rem;
line-height: 1.7;
}
.tp-content-box p:last-child {
margin-bottom: 0;
}
.tp-route-note {
margin-top: 18px !important;
padding: 14px 16px;
border-radius: 12px;
background: #fffaf0;
color: #4a5568 !important;
border: 1px solid #fde68a;
}
.tp-route-note strong {
color: var(--dark-olive);
} .tp-map-placeholder {
min-height: 230px;
border-radius: 16px;
background: linear-gradient(135deg, #f8fafc, #edf2f7);
border: 1px dashed #cbd5e0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #718096;
text-align: center;
padding: 24px;
}
.tp-map-placeholder i {
font-size: 2.6rem;
color: #a0aec0;
margin-bottom: 14px;
}
.tp-map-placeholder p {
margin: 0 0 6px;
color: var(--charcoal);
font-weight: 800;
}
.tp-map-placeholder span {
color: #8a98aa;
font-size: 0.86rem;
line-height: 1.45;
} .tp-iti-detail-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: 28px;
align-items: start;
}
.tp-iti-main-content {
min-width: 0;
}
.tp-iti-sidebar {
min-width: 0;
}
.tp-sidebar-inner {
position: sticky;
top: 96px;
display: flex;
flex-direction: column;
gap: 20px;
} .tp-timeline {
position: relative;
display: flex;
flex-direction: column;
gap: 18px;
}
.tp-timeline::before {
content: "";
position: absolute;
left: 20px;
top: 14px;
bottom: 14px;
width: 2px;
background: #edf2f7;
}
.tp-timeline-item {
position: relative;
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
gap: 16px;
align-items: start;
}
.tp-timeline-dot {
width: 42px;
height: 42px;
border-radius: 50%;
background: #fffaf0;
color: var(--mustard);
display: inline-flex;
align-items: center;
justify-content: center;
border: 3px solid #fff;
box-shadow: 0 4px 14px rgba(15,23,42,0.08);
position: relative;
z-index: 2;
}
.tp-timeline-dot.is-spot {
background: #e6fffa;
color: #319795;
}
.tp-timeline-content {
background: #fafbfc;
border: 1px solid #e7edf3;
border-radius: 16px;
padding: 18px 20px;
}
.tp-timeline-content h3 {
margin: 0 0 8px;
color: var(--charcoal);
font-size: 1.05rem;
line-height: 1.3;
font-weight: 800;
}
.tp-timeline-content p {
margin: 0 0 12px;
color: var(--muted);
font-size: 0.92rem;
line-height: 1.55;
}
.tp-timeline-content p:last-child {
margin-bottom: 0;
}
.tp-stop-location {
color: #718096 !important;
font-weight: 600;
}
.spot-label {
display: inline-flex;
align-items: center;
margin-bottom: 8px;
padding: 5px 9px;
border-radius: 999px;
background: #e6fffa;
color: #319795;
font-size: 0.72rem;
line-height: 1;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.tp-btn-outline-small {
display: inline-flex;
align-items: center;
gap: 7px;
border: 1px solid var(--mustard);
color: var(--mustard);
background: #fff;
border-radius: 10px;
padding: 9px 12px;
font-size: 0.82rem;
font-weight: 800;
text-decoration: none !important;
transition: 0.2s ease;
}
.tp-btn-outline-small:hover {
background: var(--mustard);
color: #fff;
} .tp-iti-stats-card,
.tp-equipment-card {
background: #fff;
border: 1px solid #e7edf3;
border-radius: 18px;
padding: 22px;
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.055);
}
.stat-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.stat-box {
display: flex;
align-items: center;
gap: 10px;
padding: 14px;
border-radius: 14px;
background: #f8fafc;
border: 1px solid #edf2f7;
}
.stat-box i {
width: 34px;
height: 34px;
min-width: 34px;
border-radius: 10px;
background: #fffaf0;
color: var(--mustard);
display: inline-flex;
align-items: center;
justify-content: center;
}
.st-txt {
min-width: 0;
}
.st-txt span {
display: block;
color: #8a98aa;
font-size: 0.68rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 4px;
}
.st-txt strong {
display: block;
color: var(--charcoal);
font-size: 0.93rem;
line-height: 1.15;
font-weight: 800;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} .gpx-download-wrap {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #edf2f7;
}
.tp-btn-large {
min-height: 48px;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 9px;
}
.gpx-note {
margin: 10px 0 0;
color: #8a98aa;
font-size: 0.82rem;
line-height: 1.45;
text-align: center;
}
.tp-public-save-form {
width: 100%;
} .tp-iti-detail-page .gpx-download-wrap .tp-btn-light,
.tp-iti-detail-page .gpx-download-wrap .tp-save-itinerary-btn {
background: #fffaf0 !important;
color: var(--dark-olive) !important;
border: 1px solid #fde68a !important;
border-radius: 12px !important;
min-height: 48px;
font-size: 0.92rem;
font-weight: 800;
box-shadow: none !important;
text-decoration: none !important;
cursor: pointer;
transition: 0.2s ease;
}
.tp-iti-detail-page .gpx-download-wrap .tp-btn-light i,
.tp-iti-detail-page .gpx-download-wrap .tp-save-itinerary-btn i {
color: var(--mustard);
}
.tp-iti-detail-page .gpx-download-wrap .tp-btn-light:hover,
.tp-iti-detail-page .gpx-download-wrap .tp-save-itinerary-btn:hover {
background: var(--mustard) !important;
color: #fff !important;
border-color: var(--mustard) !important;
transform: translateY(-1px);
}
.tp-iti-detail-page .gpx-download-wrap .tp-btn-light:hover i,
.tp-iti-detail-page .gpx-download-wrap .tp-save-itinerary-btn:hover i {
color: #fff;
}
.tp-iti-detail-page .gpx-download-wrap .tp-save-itinerary-btn.is-saved {
background: #fff1f1 !important;
color: #e74c3c !important;
border-color: #ffd6d6 !important;
}
.tp-iti-detail-page .gpx-download-wrap .tp-save-itinerary-btn.is-saved i {
color: #e74c3c;
}
.tp-iti-detail-page .gpx-download-wrap .tp-save-itinerary-btn.is-saved:hover {
background: #e74c3c !important;
color: #fff !important;
border-color: #e74c3c !important;
}
.tp-iti-detail-page .gpx-download-wrap .tp-save-itinerary-btn.is-saved:hover i {
color: #fff;
} .tp-equipment-card h3 {
margin: 0 0 16px;
color: var(--dark-olive);
font-size: 1.05rem;
font-weight: 800;
display: flex;
align-items: center;
gap: 9px;
}
.tp-equipment-card h3 i {
color: var(--mustard);
}
.tp-checklist {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.tp-checklist li {
display: flex;
align-items: flex-start;
gap: 10px;
color: #4a5568;
font-size: 0.9rem;
line-height: 1.45;
font-weight: 600;
}
.tp-checklist li i {
color: #38a169;
margin-top: 3px;
}
.tp-checklist li.missing i {
color: #e74c3c;
} .tp-itinerary-page .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 38px;
padding: 0 12px;
border-radius: 10px;
background: #fff;
border: 1px solid var(--border-color);
color: var(--charcoal);
text-decoration: none;
font-weight: 700;
margin-right: 6px;
}
.tp-itinerary-page .page-numbers.current {
background: var(--mustard);
border-color: var(--mustard);
color: #fff;
} @media (max-width: 1100px) {
.tp-iti-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tp-advanced-filters {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 980px) {
.tp-iti-detail-hero {
min-height: 360px;
padding: 64px 0 44px;
}
.tp-iti-detail-hero h1 {
font-size: 2.45rem;
}
.tp-iti-top-row,
.tp-iti-detail-layout {
grid-template-columns: 1fr;
}
.tp-sidebar-inner {
position: static;
}
}
@media (max-width: 860px) {
.tp-itinerary-page .tp-section-container {
padding-left: 16px;
padding-right: 16px;
}
.tp-iti-detail-hero .tp-section-container {
padding-left: 16px;
padding-right: 16px;
}
.tp-iti-hero {
padding: 54px 0 44px;
}
.tp-iti-hero h1 {
font-size: 2.2rem;
}
.tp-iti-hero p {
font-size: 0.96rem;
}
.tp-advanced-filters {
grid-template-columns: 1fr;
padding: 14px;
border-radius: 16px;
}
.tp-iti-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.tp-iti-img {
height: 220px;
}
}
@media (max-width: 620px) {
.tp-iti-detail-hero {
min-height: 320px;
padding: 54px 0 36px;
}
.tp-iti-detail-hero h1 {
font-size: 2rem;
}
.tp-iti-hero-meta {
gap: 10px;
font-size: 0.84rem;
justify-content: flex-start !important;
}
.tp-content-box,
.tp-iti-stats-card,
.tp-equipment-card {
padding: 20px;
border-radius: 16px;
}
.tp-timeline-item {
grid-template-columns: 36px minmax(0, 1fr);
gap: 12px;
}
.tp-timeline::before {
left: 17px;
}
.tp-timeline-dot {
width: 36px;
height: 36px;
font-size: 0.85rem;
}
.tp-timeline-content {
padding: 16px;
}
.stat-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.tp-iti-hero {
padding: 46px 0 38px;
margin-bottom: 24px;
}
.tp-iti-hero h1 {
font-size: 1.95rem;
}
.tp-iti-card {
border-radius: 16px;
}
.tp-iti-img {
height: 200px;
}
.tp-iti-body {
padding: 20px;
}
.tp-iti-body h3 {
font-size: 1.15rem;
}
.tp-iti-body p {
font-size: 0.9rem;
}
.tp-iti-stats {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.stat-item {
min-height: 74px;
padding: 10px 4px;
}
.stat-item i {
font-size: 0.95rem;
}
.st-info strong {
font-size: 0.82rem;
}
.st-info span {
font-size: 0.58rem;
letter-spacing: 0.04em;
}
.tp-iti-footer {
flex-direction: column;
align-items: flex-start;
padding: 16px 20px;
}
.tp-iti-footer .tp-btn-small {
width: 100%;
justify-content: flex-start;
}
} .tp-iti-eyebrow {
display: inline-flex;
align-items: center;
margin-bottom: 13px;
color: var(--mustard);
font-size: 0.78rem;
line-height: 1;
font-weight: 900;
letter-spacing: 0.085em;
text-transform: uppercase;
}
.tp-iti-hero {
background:
radial-gradient(circle at 78% 22%, rgba(255, 184, 0, 0.18), transparent 32%),
linear-gradient(135deg, #202819 0%, #2f3a24 100%);
border-bottom: 1px solid rgba(255, 184, 0, 0.18);
}
.tp-iti-hero-kpis {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}
.tp-iti-hero-kpis div {
min-width: 150px;
padding: 14px 16px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
backdrop-filter: blur(8px);
}
.tp-iti-hero-kpis strong {
display: block;
color: #ffffff;
font-size: 1.15rem;
line-height: 1.1;
font-weight: 900;
}
.tp-iti-hero-kpis span {
display: block;
margin-top: 4px;
color: #d8dfcf;
font-size: 0.78rem;
line-height: 1.35;
font-weight: 700;
}
.tp-iti-card {
background: rgba(255, 255, 255, 0.86);
border-color: rgba(37, 41, 31, 0.09);
border-radius: 22px;
box-shadow: 0 14px 38px rgba(33, 39, 25, 0.075);
}
.tp-iti-img::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg, rgba(0,0,0,0.16), transparent 38%, rgba(0,0,0,0.14));
z-index: 1;
}
.tp-iti-badge,
.tp-heart-btn,
.tp-card-save-form {
z-index: 5;
}
.tp-iti-card-verified {
display: none !important;
}
.tp-iti-body h3 {
font-size: 1.28rem;
}
.tp-iti-stats {
background: #fafaf7;
border-color: rgba(37, 41, 31, 0.08);
}
.tp-iti-footer {
background: rgba(250, 250, 247, 0.82);
}
.tp-iti-author span {
display: flex;
flex-direction: column;
gap: 3px;
}
.tp-iti-rank-badge {
display: inline-flex;
align-items: center;
width: fit-content;
min-height: 22px;
padding: 0 8px;
border-radius: 999px;
background: #eef3e8;
color: #2f3a24;
font-size: 0.68rem;
line-height: 1;
font-weight: 900;
letter-spacing: 0.02em;
white-space: nowrap;
}
.tp-iti-rank-badge--objevitel {
background: #fff6df;
color: #9a6700;
}
.tp-iti-rank-badge--nomad {
background: #e6fffa;
color: #047857;
}
.tp-iti-rank-badge--explorer {
background: #eaf2ff;
color: #1d4ed8;
}
.tp-iti-rank-badge--ranger {
background: #f0fdf4;
color: #166534;
}
.tp-iti-rank-badge--legenda {
background: #2b3022;
color: #ffcb59;
}
.tp-iti-verified {
color: #bbf7d0 !important;
}
.tp-iti-detail-summary {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 22px;
}
.tp-iti-detail-summary span {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 36px;
padding: 0 13px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.11);
border: 1px solid rgba(255, 255, 255, 0.14);
color: #ffffff;
font-size: 0.84rem;
font-weight: 800;
backdrop-filter: blur(8px);
}
.tp-iti-detail-summary i {
color: var(--mustard);
}
.tp-content-box,
.tp-iti-stats-card,
.tp-equipment-card,
.tp-advanced-filters,
.tp-iti-empty-state {
background: rgba(255, 255, 255, 0.9);
border-color: rgba(37, 41, 31, 0.09);
box-shadow: 0 14px 36px rgba(33, 39, 25, 0.065);
}
.tp-iti-empty-state {
text-align: center;
padding: 70px 20px;
border-radius: 22px;
border: 1px solid rgba(37, 41, 31, 0.09);
}
.tp-iti-empty-icon {
width: 64px;
height: 64px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.90);
color: #d98900;
border: 1px solid #fea500;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 auto 18px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.76),
0 10px 22px rgba(254, 165, 0, 0.12);
}
.tp-iti-empty-icon svg {
display: block;
width: 34px;
height: 34px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.tp-iti-empty-state h2 {
margin: 0 0 10px;
color: var(--dark-olive);
font-size: 1.45rem;
line-height: 1.25;
font-weight: 900;
}
.tp-iti-empty-state p {
margin: 0 auto;
color: var(--muted);
max-width: 520px;
line-height: 1.6;
}
.tp-dashboard-notice.warning {
background: #fffaf0;
color: #9a6700;
border: 1px solid #fde68a;
border-radius: 14px;
padding: 14px 16px;
font-weight: 800;
}
@media (max-width: 860px) {
.tp-iti-hero-kpis {
gap: 10px;
}
.tp-iti-hero-kpis div {
min-width: calc(50% - 5px);
flex: 1 1 calc(50% - 5px);
}
.tp-iti-detail-summary {
gap: 8px;
}
}
@media (max-width: 560px) {
.tp-iti-hero-kpis div {
min-width: 100%;
flex-basis: 100%;
}
.tp-iti-rank-badge {
font-size: 0.64rem;
}
.tp-iti-detail-summary span {
width: 100%;
justify-content: flex-start;
}
} .tp-iti-card .tp-iti-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
padding: 0;
background: #fbfaf6;
border: 1px solid rgba(37, 41, 31, 0.10);
border-radius: 16px;
overflow: hidden;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
.tp-iti-card .tp-iti-stats .stat-item {
min-height: 78px;
padding: 13px 8px;
border-right: 0 !important;
border-left: 0 !important;
border-top: 0 !important;
border-bottom: 0 !important;
background: transparent;
}
.tp-iti-card .tp-iti-stats .stat-item + .stat-item {
box-shadow: none;
}
.tp-iti-card .tp-iti-stats .stat-item i {
color: #a7b2c2;
}
.tp-iti-card .tp-iti-author {
align-items: center;
gap: 10px;
}
.tp-iti-card .tp-iti-author-meta {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.tp-iti-card .tp-iti-author-label {
display: block;
color: #667085;
font-size: 0.78rem;
line-height: 1.1;
font-weight: 600;
}
.tp-iti-card .tp-iti-author-line {
display: flex;
align-items: center;
gap: 7px;
min-width: 0;
max-width: 100%;
}
.tp-iti-card .tp-iti-author-line strong {
min-width: 0;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #172033;
font-size: 0.84rem;
line-height: 1.15;
font-weight: 900;
}
.tp-iti-card .tp-iti-author-line .tp-iti-rank-badge {
flex: 0 0 auto;
margin: 0;
}
.tp-iti-card .tp-iti-footer {
gap: 12px;
}
@media (max-width: 560px) {
.tp-iti-card .tp-iti-stats {
border-radius: 14px;
}
.tp-iti-card .tp-iti-stats .stat-item {
min-height: 72px;
padding: 11px 6px;
}
.tp-iti-card .tp-iti-author-line strong {
max-width: 170px;
}
} .tp-itinerary-lock-box {
width: 100%;
padding: 28px;
border-radius: 22px;
background: linear-gradient(135deg, #fffaf0 0%, #ffffff 58%, #f6f8fb 100%);
border: 1px solid rgba(183, 121, 31, 0.18);
box-shadow: 0 16px 42px rgba(37, 41, 31, 0.08);
text-align: center;
box-sizing: border-box;
}
.tp-itinerary-lock-box.compact {
min-height: 260px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.tp-itinerary-lock-icon {
width: 58px;
height: 58px;
margin: 0 auto 14px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: #ffcb59;
color: #25291f;
box-shadow: 0 14px 30px rgba(255, 203, 89, 0.26);
}
.tp-itinerary-lock-icon i {
font-size: 1.18rem;
}
.tp-itinerary-lock-box h3 {
margin: 0 0 9px;
color: #25291f;
font-size: 1.14rem;
line-height: 1.25;
font-weight: 900;
}
.tp-itinerary-lock-box p {
max-width: 620px;
margin: 0 auto 18px;
color: #69705f;
font-size: 0.94rem;
line-height: 1.62;
}
.tp-itinerary-lock-box .tp-btn-yellow {
width: auto;
min-width: 220px;
}
.tp-itinerary-lock-teaser-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin: 18px 0 20px;
}
.tp-itinerary-lock-teaser-grid span {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 12px;
border-radius: 999px;
background: #ffffff;
border: 1px solid rgba(37, 41, 31, 0.09);
color: #25291f;
font-size: 0.84rem;
font-weight: 800;
box-shadow: 0 8px 20px rgba(37, 41, 31, 0.05);
}
.tp-itinerary-lock-teaser-grid i {
color: #b7791f;
}
.tp-heart-btn.is-locked {
background: rgba(37, 41, 31, 0.78);
color: #ffcb59;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.tp-heart-btn.is-locked:hover {
background: #25291f;
color: #ffcb59;
}
@media (max-width: 768px) {
.tp-itinerary-lock-box {
padding: 22px 18px;
border-radius: 18px;
}
.tp-itinerary-lock-box.compact {
min-height: 220px;
}
.tp-itinerary-lock-box .tp-btn-yellow {
width: 100%;
min-width: 0;
}
.tp-itinerary-lock-teaser-grid {
flex-direction: column;
align-items: stretch;
}
.tp-itinerary-lock-teaser-grid span {
justify-content: center;
}
} .tp-iti-top-row .tp-content-box,
.tp-iti-main-content > .tp-content-box,
.tp-iti-sidebar .tp-iti-stats-card,
.tp-iti-sidebar .tp-equipment-card {
border-radius: 22px;
} .tp-route-map {
width: 100%;
min-height: 330px;
height: 330px;
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(37, 41, 31, 0.10);
background: #eef3e8;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}
.tp-route-map .leaflet-control-container,
.tp-route-map .leaflet-pane {
font-family: "Poppins", Arial, sans-serif;
}
.tp-route-map .leaflet-popup-content-wrapper {
border-radius: 13px;
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
}
.tp-route-map .leaflet-popup-content {
color: #172033;
font-size: 0.84rem;
line-height: 1.4;
}
.tp-route-map-note {
margin: 11px 0 0 !important;
color: #8a98aa !important;
font-size: 0.8rem !important;
line-height: 1.45 !important;
font-weight: 700;
} .tp-itinerary-lock-box,
.tp-iti-lock-box,
.tp-itinerary-paywall,
.tp-iti-paywall {
position: relative;
overflow: hidden;
border-radius: 18px;
border: 1px solid rgba(37, 41, 31, 0.09);
background: #ffffff;
box-shadow: 0 14px 36px rgba(33, 39, 25, 0.065);
padding: 28px;
text-align: left;
}
.tp-itinerary-lock-box.compact,
.tp-map-lock-clean {
min-height: 268px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
background:
radial-gradient(circle at 92% 5%, rgba(255, 184, 0, 0.16), transparent 30%),
linear-gradient(135deg, #ffffff, #fffaf0);
border-color: #fde68a;
}
.tp-itinerary-lock-box::after,
.tp-iti-lock-box::after,
.tp-itinerary-paywall::after,
.tp-iti-paywall::after {
display: none !important;
}
.tp-itinerary-lock-icon,
.tp-iti-lock-icon {
width: 42px;
height: 42px;
margin-bottom: 14px;
border-radius: 13px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #fffaf0;
color: var(--mustard, #ffb800);
border: 1px solid #fde68a;
}
.tp-itinerary-lock-box h3,
.tp-iti-lock-box h3,
.tp-itinerary-paywall h3,
.tp-iti-paywall h3 {
margin: 0 0 10px;
color: var(--dark-olive, #2b3022);
font-size: 1.42rem;
line-height: 1.2;
font-weight: 900;
letter-spacing: -0.025em;
}
.tp-itinerary-lock-box p,
.tp-iti-lock-box p,
.tp-itinerary-paywall p,
.tp-iti-paywall p {
max-width: none;
margin: 0;
color: #667085;
font-size: 0.94rem;
line-height: 1.62;
font-weight: 650;
}
.tp-iti-main-content .tp-itinerary-lock-box .tp-btn-yellow,
.tp-iti-top-row .tp-itinerary-lock-box .tp-btn-yellow,
.tp-iti-main-content .tp-iti-lock-box .tp-btn-yellow,
.tp-iti-top-row .tp-iti-lock-box .tp-btn-yellow {
display: none !important;
}
.tp-itinerary-lock-teaser-grid {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 8px;
margin: 18px 0 0;
}
.tp-itinerary-lock-teaser-grid span {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 31px;
padding: 0 11px;
border-radius: 999px;
background: #fffaf0;
border: 1px solid #fde68a;
color: #344054;
font-size: 0.78rem;
line-height: 1;
font-weight: 900;
box-shadow: none;
}
.tp-itinerary-lock-teaser-grid i {
color: var(--mustard, #ffb800);
} .tp-iti-sidebar .gpx-download-wrap {
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid #edf2f7;
}
.tp-iti-sidebar .gpx-download-wrap .tp-btn-yellow,
.tp-iti-sidebar .gpx-download-wrap .tp-btn-large {
width: 100%;
min-height: 54px;
border-radius: 15px !important;
background: var(--mustard, #ffb800) !important;
color: #172033 !important;
font-size: 0.93rem;
line-height: 1.18;
font-weight: 900;
border: 1px solid rgba(255, 184, 0, 0.95) !important;
box-shadow: 0 14px 28px rgba(255, 184, 0, 0.20);
}
.tp-iti-sidebar .gpx-download-wrap .tp-btn-yellow:hover,
.tp-iti-sidebar .gpx-download-wrap .tp-btn-large:hover {
transform: translateY(-1px);
filter: brightness(0.98);
}
.tp-iti-sidebar .gpx-note {
max-width: 260px;
margin: 12px auto 0;
color: #8a98aa;
font-size: 0.78rem;
line-height: 1.5;
font-weight: 650;
text-align: center;
}
.tp-iti-login-inline {
margin: 12px 0 0 !important;
color: #8a98aa !important;
font-size: 0.82rem !important;
line-height: 1.45 !important;
text-align: center;
font-weight: 700;
}
.tp-iti-login-inline a {
color: var(--dark-olive, #2b3022) !important;
font-weight: 900;
text-decoration: underline !important;
text-decoration-thickness: 2px !important;
text-underline-offset: 3px !important;
} .tp-equipment-card.tp-weather-equipment-card {
padding: 0;
overflow: hidden;
background: #ffffff;
border: 1px solid rgba(37, 41, 31, 0.09);
border-radius: 22px;
box-shadow: 0 14px 36px rgba(33, 39, 25, 0.065);
}
.tp-weather-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 18px 20px;
border-bottom: 1px solid rgba(237, 242, 247, 0.95);
background:
radial-gradient(circle at 92% 0%, rgba(255, 184, 0, 0.14), transparent 34%),
linear-gradient(135deg, #ffffff, #fffaf0);
}
.tp-weather-card-head h3 {
margin: 0;
color: var(--dark-olive, #2b3022);
font-size: 1.04rem;
line-height: 1.25;
font-weight: 900;
display: flex;
align-items: center;
gap: 9px;
}
.tp-weather-card-head h3 i {
color: var(--mustard, #ffb800);
}
.tp-weather-card-head small {
display: block;
margin-top: 4px;
color: #8a98aa;
font-size: 0.74rem;
line-height: 1.35;
font-weight: 700;
}
.tp-weather-status-pill {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 30px;
padding: 0 10px;
border-radius: 999px;
background: #ecfdf3;
color: #047857;
font-size: 0.72rem;
line-height: 1;
font-weight: 900;
white-space: nowrap;
}
.tp-weather-status-pill.is-warning {
background: #fffaf0;
color: #9a6700;
}
.tp-weather-summary-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
padding: 18px 20px 10px;
}
.tp-weather-summary-item {
min-width: 0;
padding: 13px;
border-radius: 14px;
background: #f8fafc;
border: 1px solid #edf2f7;
}
.tp-weather-summary-item span {
display: block;
margin-bottom: 5px;
color: #8a98aa;
font-size: 0.66rem;
line-height: 1.15;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.tp-weather-summary-item strong {
display: flex;
align-items: center;
gap: 7px;
color: var(--charcoal, #172033);
font-size: 0.9rem;
line-height: 1.25;
font-weight: 900;
}
.tp-weather-summary-item i {
color: var(--mustard, #ffb800);
}
.tp-weather-pack-list {
list-style: none;
margin: 0;
padding: 10px 20px 18px;
display: grid;
gap: 9px;
}
.tp-weather-pack-list li {
display: grid;
grid-template-columns: 26px minmax(0, 1fr);
gap: 10px;
align-items: start;
padding: 10px 11px;
border-radius: 13px;
background: rgba(248, 250, 252, 0.78);
color: #4a5568;
font-size: 0.84rem;
line-height: 1.42;
font-weight: 750;
}
.tp-weather-pack-list li i {
width: 26px;
height: 26px;
border-radius: 9px;
background: #fffaf0;
color: var(--mustard, #ffb800);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.78rem;
margin-top: -2px;
}
.tp-weather-pack-list li.is-important {
background: #fffaf0;
border: 1px solid #fde68a;
color: #6b4e16;
}
.tp-weather-pack-list li.is-important i {
background: #ffffff;
color: #d99a00;
}
.tp-weather-footer {
padding: 12px 20px 18px;
border-top: 1px solid rgba(237, 242, 247, 0.95);
color: #8a98aa;
font-size: 0.74rem;
line-height: 1.45;
font-weight: 700;
}
@media (max-width: 980px) {
.tp-route-map {
min-height: 300px;
height: 300px;
}
.tp-iti-sidebar .gpx-note {
max-width: 100%;
}
}
@media (max-width: 620px) {
.tp-route-map {
min-height: 260px;
height: 260px;
border-radius: 15px;
}
.tp-itinerary-lock-box,
.tp-iti-lock-box,
.tp-itinerary-paywall,
.tp-iti-paywall {
padding: 22px;
}
.tp-weather-card-head {
flex-direction: column;
}
.tp-weather-status-pill {
align-self: flex-start;
}
.tp-weather-summary-grid {
grid-template-columns: 1fr;
}
}  .tp-route-map-note {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 12px 0 0 !important;
padding: 11px 12px;
border-radius: 13px;
background: #f8fafc;
border: 1px solid #edf2f7;
color: #667085 !important;
font-size: 0.8rem !important;
line-height: 1.45 !important;
font-weight: 750;
}
.tp-route-map-note i {
color: #2563eb;
margin-top: 2px;
flex: 0 0 auto;
}
.tp-route-map-note.is-warning {
background: #fffaf0;
border-color: #fde68a;
color: #7a5b16 !important;
}
.tp-route-map-note.is-warning i {
color: #d99a00;
} .tp-login-secondary-btn {
width: 100%;
min-height: 48px;
margin-top: 13px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 14px;
background: #fffaf0 !important;
border: 1px solid #fde68a !important;
color: var(--dark-olive, #2b3022) !important;
font-size: 0.9rem;
line-height: 1;
font-weight: 900;
text-decoration: none !important;
box-shadow: none !important;
transition: 0.2s ease;
}
.tp-login-secondary-btn i {
color: var(--mustard, #ffb800);
}
.tp-login-secondary-btn:hover {
background: var(--mustard, #ffb800) !important;
border-color: var(--mustard, #ffb800) !important;
color: #172033 !important;
transform: translateY(-1px);
}
.tp-login-secondary-btn:hover i {
color: #172033;
} .tp-iti-login-inline {
display: none !important;
} body:not(.logged-in) .tp-weather-equipment-card {
display: none;
} .tp-iti-sidebar .tp-iti-stats-card {
overflow: hidden;
} .tp-map-lock-clean {
min-height: 252px;
} .tp-route-map {
min-height: 360px;
height: 360px;
border-radius: 20px;
border: 1px solid rgba(37, 41, 31, 0.12);
box-shadow: 0 16px 38px rgba(33, 39, 25, 0.08);
}
.tp-route-map .leaflet-control-zoom a {
color: #172033 !important;
font-weight: 900;
}
@media (max-width: 860px) {
.tp-route-map {
min-height: 320px;
height: 320px;
}
}
@media (max-width: 560px) {
.tp-route-map {
min-height: 280px;
height: 280px;
border-radius: 16px;
}
.tp-login-secondary-btn {
min-height: 46px;
}
} .tp-iti-detail-hero .tp-section-container {
gap: 0;
}
.tp-iti-detail-hero h1 {
margin-bottom: 18px !important;
} .tp-iti-detail-summary {
order: 2;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 10px;
margin: 0 0 16px;
align-self: flex-start;
}
.tp-iti-detail-summary span {
min-height: 38px;
padding: 0 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.13);
border: 1px solid rgba(255, 255, 255, 0.18);
color: #ffffff;
font-size: 0.84rem;
line-height: 1;
font-weight: 900;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.tp-iti-detail-summary i {
color: var(--mustard);
} .tp-iti-hero-meta {
order: 3;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start !important;
gap: 12px 18px;
margin: 0;
color: rgba(255, 255, 255, 0.86);
font-size: 0.9rem;
line-height: 1.35;
font-weight: 700;
align-self: flex-start !important;
}
.tp-iti-hero-meta span,
.tp-iti-hero-meta .author {
display: inline-flex;
align-items: center;
gap: 8px;
}
.tp-iti-hero-meta img {
width: 32px;
height: 32px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.72);
object-fit: cover;
}
.tp-iti-hero-meta strong {
color: #ffffff;
font-weight: 900;
}
.tp-iti-hero-meta i {
color: var(--mustard);
} .tp-iti-detail-hero > .tp-iti-badge,
.tp-iti-detail-hero .tp-section-container > .tp-iti-badge {
order: 1;
position: static;
margin: 0 0 14px !important;
} @media (max-width: 620px) {
.tp-iti-detail-summary {
gap: 8px;
margin-bottom: 14px;
}
.tp-iti-detail-summary span {
min-height: 34px;
padding: 0 11px;
font-size: 0.78rem;
}
.tp-iti-hero-meta {
gap: 9px 12px;
font-size: 0.82rem;
}
.tp-iti-hero-meta span,
.tp-iti-hero-meta .author {
max-width: 100%;
}
}
@media (max-width: 560px) {
.tp-iti-empty-icon {
width: 58px;
height: 58px;
border-radius: 16px;
}
.tp-iti-empty-icon svg {
width: 31px;
height: 31px;
}
}