) is the positioning context. The card is taken OUT of normal document flow with position:absolute and anchored straight to that wrapper's own bottom edge, then nudged down by exactly half its own height with transform:translateY(50%) — so it always straddles the hero/next-section boundary evenly no matter its rendered height, with zero dependency on sibling margins or any ancestor's background color. This replaces an earlier negative-margin approach that turned out to be unreliable. */ .tp-hero-overlap-wrap{position:relative} .tp-flight-finder{ position:absolute;left:0;right:0;bottom:0; transform:translateY(50%); z-index:6; pointer-events:none; /* let clicks pass through to the hero everywhere except the visible card */ } .tp-flight-finder .tp-container{pointer-events:none} .tp-flight-finder .tp-flight-finder__card{pointer-events:auto} /* The site-wide `.tp-container{overflow-x:hidden}` rule (elsewhere in this file) forces this container's overflow-y to compute as `auto` instead of `visible` — that's how the CSS overflow property works: you can't set just one axis to non-visible without the other axis also leaving `visible`. Since this container is sized exactly to the card with no spare room, that auto-computed vertical overflow was clipping the card's box-shadow almost immediately below its edge — this is the actual cause of the shadow looking cut off, confirmed via computed styles. Restoring overflow:visible here (safe: this container has no horizontal-bleed decoration that the site-wide rule was protecting against) lets the shadow render in full. */ .tp-flight-finder .tp-container{overflow:visible} /* Outer layer: ONLY the shadow + rounded shape. Deliberately has no overflow:hidden — overflow:hidden on the same element as a box-shadow clips the shadow itself in every browser, which is what made the shadow look like it was "going inside the div" in the previous version. */ .tp-flight-finder__card{ position:relative; max-width:960px; margin:0 auto; border-radius:26px; /* Two dark shadow layers give the "lifted" look against the light surface below the hero. The third layer is a genuine soft white GLOW (blurred, not a hairline ring) — every hero slide in this site consistently keeps its left side darker (for text contrast) and its right side brighter (the photo/graphic), so a thin 1px ring was too fragile and anti-aliased away against the dark side. A wide, blurred glow survives that far better and reads as "elevated" regardless of which half of the card sits over the darker or lighter part of the hero. */ box-shadow: 0 30px 60px -10px rgba(0,0,0,.4), 0 10px 24px rgba(0,0,0,.22), 0 0 32px rgba(255,255,255,.55); } /* Inner layer: the actual rounded/clipped surface — overflow:hidden lives here so the decorative glow gets clipped to the rounded corners without touching (and cutting off) the outer shadow above. */ .tp-flight-finder__card-inner{ position:relative; overflow:hidden; isolation:isolate; display:flex;align-items:center;justify-content:space-between;gap:1.75rem; flex-wrap:wrap; background:var(--tp-white); border-radius:26px; padding:1.85rem 2.25rem; } /* Gradient accent bar across the top edge of the card */ .tp-flight-finder__card-inner::before{ content:'';position:absolute;top:0;left:0;right:0;height:5px; background:linear-gradient(90deg,var(--tp-primary),var(--tp-accent)); z-index:1; } /* Soft decorative glow behind the icon (top-left) for a bit of polish — kept on the LEFT side and small/blurred so it never overlaps the button sitting on the right, and stays inside the card's own rounded corners. */ .tp-flight-finder__card-inner::after{ content:'';position:absolute;width:130px;height:130px;border-radius:50%; background:var(--tp-primary-light);opacity:.45;top:-60px;left:-40px; filter:blur(4px); z-index:0;pointer-events:none; } .tp-flight-finder__left{position:relative;z-index:1;display:flex;align-items:center;gap:1.25rem;min-width:0} .tp-flight-finder__icon{ width:58px;height:58px;flex-shrink:0; border-radius:17px; background:linear-gradient(135deg,var(--tp-primary),var(--tp-primary-dark)); color:#fff; display:flex;align-items:center;justify-content:center; box-shadow:0 10px 22px -6px rgba(13,27,15,.45); } .tp-flight-finder__title{ font-family:var(--tp-font); font-size:clamp(1.15rem,2vw,1.4rem); font-weight:800; color:var(--tp-dark); letter-spacing:-.02em; line-height:1.2; } .tp-flight-finder__sub{ font-size:.88rem; color:var(--tp-gray-500); margin-top:.25rem; line-height:1.5; } .tp-flight-finder__btn{ position:relative;z-index:1;flex-shrink:0;border:none; background:linear-gradient(90deg,var(--tp-primary),var(--tp-primary-dark)); box-shadow:0 14px 28px -10px rgba(13,27,15,.5); transition:transform var(--tp-t-lg),box-shadow var(--tp-t-lg); } .tp-flight-finder__btn:hover{ transform:translateY(-3px); box-shadow:0 18px 34px -8px rgba(13,27,15,.55); color:#fff; } @media(max-width:700px){ .tp-flight-finder__card,.tp-flight-finder__card-inner{border-radius:20px} .tp-flight-finder__card-inner{flex-direction:column;align-items:stretch;text-align:center;padding:1.65rem 1.35rem;gap:1.15rem} .tp-flight-finder__left{flex-direction:column;text-align:center} .tp-flight-finder__card-inner::after{width:110px;height:110px;top:-45px;left:-30px} .tp-flight-finder__btn{width:100%;justify-content:center} } /* ══ TRUST STRIP ══ */ .tp-trust-strip{background:var(--tp-primary-dark);padding:1.25rem 0} .tp-trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;align-items:center} @media(max-width:900px){.tp-trust-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:500px){.tp-trust-grid{grid-template-columns:1fr}} .tp-trust-item{display:flex;align-items:center;gap:.75rem;padding:.25rem 0} .tp-trust-icon{font-size:1.375rem;flex-shrink:0} .tp-trust-title{font-size:.85rem;font-weight:700;color:#fff;line-height:1.2} .tp-trust-sub{font-size:.75rem;color:rgba(255,255,255,.6);margin-top:.1rem} /* ══ SERVICES GRID ══ */ .tp-services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem} @media(max-width:1024px){.tp-services-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.tp-services-grid{grid-template-columns:1fr}} .tp-services-grid{perspective:1600px} .tp-scard{ position:relative; background:var(--tp-white); border-radius:22px; border:1px solid var(--tp-gray-200); display:flex; flex-direction:column; isolation:isolate; box-shadow:0 1px 2px rgba(13,27,15,.04); transition:transform .55s cubic-bezier(.16,1,.3,1),box-shadow .55s cubic-bezier(.16,1,.3,1),border-color var(--tp-t-lg); transform-style:preserve-3d; will-change:transform; } /* Soft glow ring that fades in behind the card on hover */ .tp-scard::before{ content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background:linear-gradient(135deg,var(--tp-primary-mid),var(--tp-accent)); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity var(--tp-t-lg); z-index:3; pointer-events:none; } /* Glass sheen sweep — a soft diagonal highlight that glides across on hover */ .tp-scard__body::before{ content:''; position:absolute; top:0;left:-60%; width:45%;height:220%; background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.55) 45%,transparent 90%); transform:rotate(8deg) translateX(0); opacity:0; transition:transform .85s cubic-bezier(.16,1,.3,1),opacity .3s ease; pointer-events:none; z-index:0; } .tp-scard:hover .tp-scard__body::before{opacity:1;transform:rotate(8deg) translateX(340%)} .tp-scard:hover{ transform:perspective(1600px) rotateX(3deg) rotateY(-3deg) translateY(-10px) scale(1.015); box-shadow:0 30px 54px -14px rgba(13,27,15,.24),0 10px 22px -8px rgba(13,27,15,.13); border-color:transparent; } .tp-scard:hover::before{opacity:1} .tp-scard__img{position:relative;overflow:hidden;border-radius:22px 22px 0 0;aspect-ratio:16/9;background:var(--tp-gray-100);flex-shrink:0} .tp-scard--featured .tp-scard__img{aspect-ratio:21/9} .tp-scard__img::after{ content:''; position:absolute;inset:0; background:linear-gradient(180deg,rgba(13,27,15,0) 45%,rgba(13,27,15,.55) 100%); opacity:0; transition:opacity var(--tp-t-lg); z-index:1; } .tp-scard:hover .tp-scard__img::after{opacity:1} .tp-scard__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)} .tp-scard:hover .tp-scard__img img{transform:scale(1.1) rotate(.2deg)} .tp-scard__placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:3rem;background:var(--tp-primary-light);transition:transform var(--tp-t-lg)} .tp-scard:hover .tp-scard__placeholder{transform:scale(1.08)} /* Floating quick-view button — glass, fades/scales in over the image on hover */ .tp-scard__quickview{ position:absolute; bottom:.9rem;right:.9rem;z-index:2; width:2.5rem;height:2.5rem; border-radius:50%; display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.22); -webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%); border:1px solid rgba(255,255,255,.4); color:#fff; opacity:0; transform:translateY(10px) scale(.85); transition:opacity .4s ease,transform .4s cubic-bezier(.16,1,.3,1),background .3s ease; pointer-events:none; } .tp-scard__quickview .tp-svg-icon{width:16px;height:16px} .tp-scard:hover .tp-scard__quickview{opacity:1;transform:translateY(0) scale(1);background:var(--tp-accent)} .tp-scard__type{ position:absolute;top:.75rem;left:.75rem;z-index:2; background:var(--tp-primary); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase; padding:.28rem .7rem;border-radius:var(--tp-r-full); box-shadow:0 2px 8px rgba(0,0,0,.15); transition:transform var(--tp-t-lg); } .tp-scard:hover .tp-scard__type{transform:translateY(-2px)} .tp-scard__type--tour{background:var(--tp-accent)} .tp-scard__apply-btn{ width:100%;display:flex;align-items:center;justify-content:center;gap:.4rem; padding:.75rem 1rem;border-radius:var(--tp-r-full); background:var(--tp-primary);color:#fff;font-weight:700;font-size:.9rem; border:none;text-decoration:none;margin-top:auto; transition:background var(--tp-t-lg),transform var(--tp-t-lg),filter var(--tp-t); } .tp-scard__apply-btn:hover{background:var(--tp-primary-dark);filter:brightness(.96);transform:translateY(-1px);color:#fff} .tp-scard__featured{position:absolute;top:.75rem;right:.75rem;z-index:2;background:#5C2E00;color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:.28rem .7rem;border-radius:var(--tp-r-full);box-shadow:0 2px 8px rgba(0,0,0,.15)} .tp-scard__body{padding:1.375rem 1.625rem 1.625rem;display:flex;flex-direction:column;flex:1;position:relative;z-index:1;overflow:hidden;border-radius:0 0 22px 22px} .tp-scard__title{font-size:1.05rem;font-weight:700;color:var(--tp-dark);margin-bottom:.5rem;line-height:1.3;transition:color var(--tp-t);position:relative;z-index:1} .tp-scard__title a{color:inherit} .tp-scard:hover .tp-scard__title{color:var(--tp-primary)} .tp-scard--featured .tp-scard__title{font-size:1.2rem} .tp-scard__meta{display:flex;align-items:center;gap:1rem;font-size:.8rem;color:var(--tp-gray-500);margin-bottom:.875rem;flex-wrap:wrap;position:relative;z-index:1} .tp-scard__rating{color:var(--tp-accent-dark);font-weight:600} .tp-scard__desc{font-size:.875rem;color:var(--tp-gray-500);line-height:1.65;margin-bottom:1.25rem;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;position:relative;z-index:1} .tp-scard__foot{display:flex;align-items:center;justify-content:space-between;padding-top:1rem;border-top:1px solid var(--tp-gray-100);margin-top:auto;transition:border-color var(--tp-t-lg);position:relative;z-index:1} .tp-scard:hover .tp-scard__foot{border-top-color:var(--tp-primary-light)} .tp-scard__price{font-size:1.3rem;font-weight:800;color:var(--tp-primary);letter-spacing:-.02em} .tp-scard__price-note{font-size:.72rem;color:var(--tp-gray-500);margin-top:.1rem} .tp-scard__foot .tp-btn{transition:transform var(--tp-t-lg),box-shadow var(--tp-t-lg)} .tp-scard:hover .tp-scard__foot .tp-btn{transform:translateX(2px);box-shadow:0 6px 16px -4px rgba(45,106,79,.4)} .tp-scard__foot .tp-btn .tp-svg-icon{transition:transform var(--tp-t-lg)} .tp-scard:hover .tp-scard__foot .tp-btn .tp-svg-icon{transform:translateX(3px)} @media(hover:none){ .tp-scard:hover{transform:none;box-shadow:0 1px 2px rgba(13,27,15,.04)} .tp-scard__quickview{display:none} } @media(prefers-reduced-motion:reduce){ .tp-scard,.tp-scard::before,.tp-scard__img img,.tp-scard__img::after,.tp-scard__type,.tp-scard__title,.tp-scard__foot .tp-btn,.tp-scard__foot .tp-btn .tp-svg-icon,.tp-scard__quickview,.tp-scard__body::before{transition:none} .tp-scard:hover{transform:none} .tp-scard:hover .tp-scard__img img{transform:none} } /* ══ WHY CHOOSE US ══ */ .tp-why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.75rem} @media(max-width:1024px){.tp-why-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:500px){.tp-why-grid{grid-template-columns:1fr}} /* Why cards — bold redesign */ .tp-why-card{background:#fff;border-radius:20px;padding:2.25rem 1.875rem 2rem;border:0;box-shadow:0 2px 16px rgba(0,0,0,.07);transition:transform var(--tp-t-lg),box-shadow var(--tp-t-lg);position:relative;display:flex;flex-direction:column;gap:.875rem} /* The bar is drawn as a full-size copy of the card's own rounded box (same border-radius, same dimensions via inset:0) so its corner curvature is identical to the card's — then a mask reveals only the top 4px strip. A thin box with its own "20px 20px 0 0" radius gets its vertical radius silently clamped to half its own height (2px), producing a flatter curve than the card's real 20px corner and making the bar look like it "floats" above the card with visible gaps at the corners. Masking avoids that mismatch entirely because the bar's box is never actually thin. */ .tp-why-card::before{content:'';position:absolute;inset:0;border-radius:20px;background:linear-gradient(90deg,var(--tp-primary),var(--tp-accent));-webkit-mask-image:linear-gradient(#000,#000);-webkit-mask-size:100% 4px;-webkit-mask-repeat:no-repeat;-webkit-mask-position:top;mask-image:linear-gradient(#000,#000);mask-size:100% 4px;mask-repeat:no-repeat;mask-position:top} .tp-why-card:nth-child(2)::before{background:linear-gradient(90deg,#f59e0b,#ef4444)} .tp-why-card:nth-child(3)::before{background:linear-gradient(90deg,#3b82f6,#8b5cf6)} .tp-why-card:nth-child(4)::before{background:linear-gradient(90deg,#10b981,#06b6d4)} .tp-why-card:hover{transform:translateY(-8px);box-shadow:0 20px 48px rgba(0,0,0,.13)} .tp-why-card__num{position:absolute;top:1rem;right:1.25rem;font-size:3.5rem;font-weight:900;color:var(--tp-gray-100);line-height:1;letter-spacing:-.06em;user-select:none;pointer-events:none} .tp-why-card__icon-wrap{width:60px;height:60px;border-radius:16px;background:linear-gradient(135deg,var(--tp-primary-light) 0%,rgba(45,106,79,.12) 100%);display:flex;align-items:center;justify-content:center;color:var(--tp-primary);transition:transform var(--tp-t-lg),background var(--tp-t-lg);flex-shrink:0} .tp-why-card:nth-child(2) .tp-why-card__icon-wrap{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#d97706} .tp-why-card:nth-child(3) .tp-why-card__icon-wrap{background:linear-gradient(135deg,#eff6ff,#dbeafe);color:#2563eb} .tp-why-card:nth-child(4) .tp-why-card__icon-wrap{background:linear-gradient(135deg,#ecfdf5,#d1fae5);color:#059669} .tp-why-card__icon-wrap .tp-svg-icon svg{width:1.6rem;height:1.6rem} .tp-why-card:hover .tp-why-card__icon-wrap{transform:scale(1.1) rotate(-6deg)} .tp-why-card__title{font-size:1.1rem;font-weight:700;color:var(--tp-dark);line-height:1.3;margin:0} .tp-why-card__text{font-size:.875rem;color:var(--tp-gray-500);line-height:1.75;margin:0} /* ══ CTA BANNER ══ */ .tp-cta-banner{background:linear-gradient(135deg,var(--tp-primary-dark) 0%,var(--tp-primary) 60%,var(--tp-primary-mid) 100%);border-radius:var(--tp-r-xl);padding:4.5rem 3rem;text-align:center;position:relative;overflow:hidden} .tp-cta-banner__deco{position:absolute;right:-1rem;top:-2rem;font-size:180px;opacity:.05;transform:rotate(-20deg);pointer-events:none;user-select:none} .tp-cta-banner__h2{font-size:clamp(1.75rem,3vw,2.5rem);color:#fff;font-weight:800;letter-spacing:-.025em;margin:.625rem 0 1rem} .tp-cta-banner__p{color:rgba(255,255,255,.78);font-size:1.05rem;line-height:1.7;max-width:540px;margin:0 auto 2.25rem} .tp-cta-banner__btns{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center} @media(max-width:640px){.tp-cta-banner{padding:3rem 1.5rem}} /* ══ FOOTER ══ */ .tp-footer{background:#ffffff;color:#474747} /* Pre-footer CTA strip */ .tp-footer__cta{background:linear-gradient(115deg,var(--tp-primary-dark) 0%,var(--tp-primary) 55%,var(--tp-primary-mid) 100%);position:relative;overflow:hidden} .tp-footer__cta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 200% at 85% 20%,rgba(212,160,23,.16) 0%,transparent 70%);pointer-events:none} .tp-footer__cta-inner{display:flex;align-items:center;justify-content:space-between;gap:2.5rem;flex-wrap:wrap;padding:3rem 0;position:relative} .tp-footer__cta-copy{min-width:0} .tp-footer__cta-eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tp-accent);margin-bottom:.625rem} .tp-footer__cta-title{font-size:clamp(1.2rem,2.2vw,1.6rem);font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.4;margin:0;max-width:520px} .tp-footer__cta-actions{display:flex;gap:.875rem;flex-wrap:wrap;flex-shrink:0} .tp-footer__cta-actions .tp-btn-cta-ghost svg{width:16px;height:16px;margin-right:.375rem;flex-shrink:0} @media(max-width:768px){ .tp-footer__cta-inner{padding:2.25rem 0;flex-direction:column;align-items:flex-start;gap:1.5rem} .tp-footer__cta-title{font-size:1.2rem;max-width:100%} .tp-footer__cta-actions{width:100%} .tp-footer__cta-actions .tp-btn{flex:1;justify-content:center;white-space:nowrap} } @media(max-width:400px){ .tp-footer__cta-actions{flex-direction:column} } .tp-footer__main{padding:4.5rem 0 2.5rem;position:relative;box-shadow:0 1px 0 rgba(13,27,15,.05) inset} .tp-footer-grid{display:grid;gap:2.5rem;grid-template-columns:2.2fr 1fr 1fr 1fr} @media(max-width:1024px){.tp-footer-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.tp-footer-grid{grid-template-columns:1fr}} .tp-footer__brand p{font-size:.875rem;line-height:1.8;margin-top:.875rem;max-width:280px;color:#474747;opacity:.85} .tp-footer__col h4{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tp-dark);margin-bottom:1.25rem} .tp-footer__col ul{display:flex;flex-direction:column;gap:.625rem} .tp-footer__col ul li a{font-size:.875rem;color:#474747;transition:color var(--tp-t)} .tp-footer__col ul li a:hover{color:var(--tp-primary)} .tp-footer__col ul li{font-size:.875rem;color:#474747} .tp-footer-contact-pill{display:inline-flex;align-items:center;gap:.4rem;font-size:.875rem;color:#474747;transition:color var(--tp-t)} .tp-footer-contact-pill:hover{color:var(--tp-primary)} /* Footer social icons */ .tp-footer-social{display:flex;flex-wrap:wrap;gap:.625rem;margin-top:1.25rem} .tp-footer-social__icon{width:36px;height:36px;border-radius:10px;background:var(--tp-gray-100);display:flex;align-items:center;justify-content:center;color:#474747;transition:background var(--tp-t),color var(--tp-t),transform var(--tp-t);flex-shrink:0;border:1px solid var(--tp-gray-200)} .tp-footer-social__icon:hover{background:var(--tp-accent);color:#fff;border-color:transparent;transform:translateY(-2px)} .tp-footer-social__icon--instagram:hover{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)} .tp-footer-social__icon--facebook:hover{background:#1877f2} .tp-footer-social__icon--youtube:hover{background:#ff0000} .tp-footer-social__icon--whatsapp:hover{background:#25d366} .tp-footer-social__icon--twitter:hover{background:#000} .tp-footer-social__icon--linkedin:hover{background:#0077b5} .tp-footer-social__icon--tiktok:hover{background:#010101} .tp-footer__bottom{border-top:1px solid var(--tp-gray-200);padding:1.5rem 0;font-size:.8rem;color:#474747} .tp-footer__bottom-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem} .tp-footer__bottom-links{display:flex;align-items:center;gap:.625rem;flex-wrap:wrap} .tp-footer__bottom-links a{color:#474747;transition:color var(--tp-t)} .tp-footer__bottom-links a:hover{color:var(--tp-primary)} .tp-footer__bottom-links span{opacity:.4} @media(max-width:640px){.tp-footer__bottom-inner{flex-direction:column;align-items:flex-start;gap:.5rem}} /* ══ INNER PAGE COMPONENTS ══ */ /* Service cards (listing pages) */ .tp-card{background:var(--tp-white);border-radius:var(--tp-r-lg);border:1px solid var(--tp-gray-200);transition:all var(--tp-t-lg)} .tp-card:hover{box-shadow:var(--tp-sh-lg);transform:translateY(-4px);border-color:transparent} .tp-card__image{position:relative;overflow:hidden;border-radius:var(--tp-r-lg) var(--tp-r-lg) 0 0;aspect-ratio:16/9;background:var(--tp-gray-100)} .tp-card__image img{width:100%;height:100%;object-fit:cover;transition:transform var(--tp-t-lg)} .tp-card:hover .tp-card__image img{transform:scale(1.06)} .tp-card__badge{position:absolute;top:.75rem;left:.75rem;background:var(--tp-primary);color:#fff;font-size:.68rem;font-weight:700;text-transform:uppercase;padding:.28rem .7rem;border-radius:var(--tp-r-full)} .tp-card__badge.accent{background:var(--tp-accent)} .tp-card__body{padding:1.25rem 1.5rem 1.5rem} .tp-card__title{font-size:1.05rem;font-weight:700;color:var(--tp-dark);margin-bottom:.5rem;line-height:1.3} .tp-card__meta{display:flex;align-items:center;gap:1rem;font-size:.78rem;color:var(--tp-gray-500);margin-bottom:.875rem;flex-wrap:wrap} .tp-card__desc{font-size:.875rem;color:var(--tp-gray-500);line-height:1.65;margin-bottom:1.125rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .tp-card__footer{display:flex;align-items:center;justify-content:space-between;padding-top:1rem;border-top:1px solid var(--tp-gray-100)} .tp-card__price{font-size:1.2rem;font-weight:800;color:var(--tp-primary)} .tp-card__price-label{font-size:.72rem;color:var(--tp-gray-500)} .tp-card__rating{font-size:.8rem;font-weight:600;color:var(--tp-accent-dark)} /* Service detail */ .tp-service-hero{position:relative;height:55vh;min-height:380px;overflow:hidden;background:var(--tp-dark)} .tp-service-hero__img{width:100%;height:100%;object-fit:cover;opacity:.65} .tp-service-hero__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(13,27,15,.92) 0%,rgba(13,27,15,.3) 60%,transparent 100%)} .tp-service-hero__content{position:absolute;bottom:0;left:0;right:0;padding:2.5rem 0 2rem;color:#fff} .tp-service-hero h1{color:#fff;margin-bottom:.75rem} .tp-service-layout{display:grid;gap:2rem} @media(min-width:1024px){.tp-service-layout{grid-template-columns:1fr 340px}} .tp-service-tabs{display:flex;border-bottom:2px solid var(--tp-gray-200);margin-bottom:2rem;overflow-x:auto} .tp-service-tab{padding:.75rem 1.25rem;font-size:.9rem;font-weight:600;color:var(--tp-gray-500);border:none;background:none;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:all var(--tp-t);white-space:nowrap} .tp-service-tab.active,.tp-service-tab:hover{color:var(--tp-primary);border-bottom-color:var(--tp-primary)} .tp-tab-panel{display:none}.tp-tab-panel.active{display:block} .tp-booking-card{background:var(--tp-white);border-radius:var(--tp-r-xl);box-shadow:var(--tp-sh-lg);border:1px solid var(--tp-gray-200);position:sticky;top:90px} .tp-booking-card__header{background:var(--tp-primary-dark);padding:1.375rem 1.625rem;color:#fff;border-radius:var(--tp-r-xl) var(--tp-r-xl) 0 0} .tp-booking-card__price{font-size:2.125rem;font-weight:800;letter-spacing:-.03em} .tp-booking-card__body,.tp-booking-card__footer{padding:1.5rem} .tp-highlights{list-style:none;display:grid;gap:.625rem} .tp-highlights li{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem 1rem;background:var(--tp-primary-light);border-radius:var(--tp-r);font-size:.9rem} .tp-highlights li::before{content:'✓';color:var(--tp-primary);font-weight:800;flex-shrink:0} .tp-faq{border:1px solid var(--tp-gray-200);border-radius:var(--tp-r);overflow:hidden;margin-bottom:.5rem} .tp-faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;background:var(--tp-surface);border:none;cursor:pointer;font-family:var(--tp-font);font-size:.95rem;font-weight:600;color:var(--tp-dark);text-align:left} .tp-faq__icon{flex-shrink:0;transition:transform var(--tp-t)} .tp-faq.open .tp-faq__icon{transform:rotate(180deg)} .tp-faq__a{padding:0 1.25rem;max-height:0;overflow:hidden;transition:all var(--tp-t-lg);font-size:.9rem;color:var(--tp-gray-500);line-height:1.7} .tp-faq.open .tp-faq__a{padding:1rem 1.25rem;max-height:400px} /* Visa checker */ .tp-visa-checker{background:rgba(255,255,255,.1);border-radius:var(--tp-r-xl);padding:2rem} .tp-visa-checker__form{display:grid;gap:1rem;margin-top:1.25rem} @media(min-width:640px){.tp-visa-checker__form{grid-template-columns:1fr 1fr auto;align-items:end}} .tp-visa-checker__label{display:block;font-size:.75rem;font-weight:700;color:rgba(255,255,255,.7);margin-bottom:.35rem;letter-spacing:.06em;text-transform:uppercase} .tp-visa-checker select{width:100%;padding:.75rem 1rem;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:var(--tp-r);color:#fff;font-family:var(--tp-font);font-size:.9rem;outline:none;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem} .tp-visa-checker select option{background:var(--tp-primary-dark)} .tp-visa-result{margin-top:1.25rem;background:#fff;border-radius:var(--tp-r-lg);padding:1.375rem;color:var(--tp-dark);display:none} .tp-visa-result.show{display:block;animation:tp-fade-up .3s ease} .tp-visa-result__status{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem 1rem;border-radius:var(--tp-r-full);font-size:.82rem;font-weight:700;margin-bottom:.875rem} .tp-visa-result__status.visa_free{background:var(--tp-primary-light);color:var(--tp-primary-dark)} .tp-visa-result__status.visa_required{background:#fde8e8;color:#900} .tp-visa-result__status.visa_on_arrival{background:var(--tp-accent-light);color:var(--tp-accent-dark)} .tp-visa-result__status.e_visa{background:#dbeafe;color:#1e3a8a} .tp-visa-result__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin-top:.875rem} .tp-visa-result__item{background:var(--tp-surface);border-radius:var(--tp-r);padding:.875rem} .tp-visa-result__item-label{font-size:.72rem;color:var(--tp-gray-500);font-weight:700;text-transform:uppercase;letter-spacing:.06em} .tp-visa-result__item-value{font-size:1rem;font-weight:700;color:var(--tp-dark);margin-top:.25rem} /* Forms */ .tp-form-section{margin-bottom:2.5rem} .tp-form-section-title{font-size:1rem;font-weight:700;color:var(--tp-dark);padding-bottom:.75rem;border-bottom:2px solid var(--tp-primary);margin-bottom:1.25rem} .tp-field{margin-bottom:1.25rem} .tp-label{display:block;font-size:.875rem;font-weight:600;color:var(--tp-gray-700);margin-bottom:.4rem} .tp-label .required{color:var(--tp-danger);margin-left:.2rem} .tp-input,.tp-select,.tp-textarea{width:100%;padding:.7rem .9rem;background:var(--tp-white);border:1.5px solid var(--tp-gray-300);border-radius:var(--tp-r);font-family:var(--tp-font);font-size:.9rem;color:var(--tp-dark);transition:border-color var(--tp-t),box-shadow var(--tp-t);outline:none} .tp-input:focus,.tp-select:focus,.tp-textarea:focus{border-color:var(--tp-primary);box-shadow:0 0 0 3px rgba(45,106,79,.12)} .tp-textarea{min-height:110px;resize:vertical} .tp-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .875rem center;padding-right:2.5rem} .tp-hint{font-size:.78rem;color:var(--tp-gray-500);margin-top:.3rem} /* Auth */ .tp-auth-page{min-height:calc(100vh - 70px);display:flex;background:var(--tp-surface)} .tp-auth-left{display:none;width:50%;background:linear-gradient(135deg,var(--tp-primary-dark) 0%,var(--tp-primary) 100%);padding:3rem;flex-direction:column;justify-content:space-between;color:#fff;position:relative;overflow:hidden} @media(min-width:900px){.tp-auth-left{display:flex}} .tp-auth-right{flex:1;display:flex;align-items:center;justify-content:center;padding:2.5rem 1.5rem} .tp-auth-box{width:100%;max-width:440px;background:var(--tp-white);border-radius:var(--tp-r-xl);box-shadow:var(--tp-sh-lg);padding:2.5rem} .tp-auth-box h2{font-size:1.625rem;font-weight:800;margin-bottom:.375rem} .tp-auth-box__sub{font-size:.9rem;color:var(--tp-gray-500);margin-bottom:2rem} .tp-divider{display:flex;align-items:center;gap:1rem;margin:1.5rem 0;color:var(--tp-gray-300);font-size:.8rem} .tp-divider::before,.tp-divider::after{content:'';flex:1;height:1px;background:var(--tp-gray-100)} /* Dashboard */ .tp-dashboard{display:grid;gap:1.5rem} @media(min-width:900px){.tp-dashboard{grid-template-columns:260px 1fr}} .tp-sidebar{background:var(--tp-white);border-radius:var(--tp-r-xl);box-shadow:0 2px 8px rgba(0,0,0,.07);border:1px solid var(--tp-gray-200);padding:1.5rem 0;height:fit-content;position:sticky;top:90px} .tp-sidebar__user{padding:0 1.25rem 1.25rem;border-bottom:1px solid var(--tp-gray-100);display:flex;align-items:center;gap:1rem} .tp-sidebar__name{font-weight:700;font-size:.95rem;color:var(--tp-dark)} .tp-sidebar__email{font-size:.775rem;color:var(--tp-gray-500)} .tp-sidebar-nav a{display:flex;align-items:center;gap:.75rem;padding:.7rem 1.25rem;font-size:.875rem;font-weight:500;color:var(--tp-gray-700);transition:all var(--tp-t);border-left:3px solid transparent} .tp-sidebar-nav a:hover,.tp-sidebar-nav a.active{color:var(--tp-primary);background:var(--tp-primary-light);border-left-color:var(--tp-primary)} .tp-dash-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin-bottom:1.5rem} .tp-stat-card{background:var(--tp-white);border:1px solid var(--tp-gray-200);border-radius:var(--tp-r-lg);padding:1.25rem} .tp-stat-card__label{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--tp-gray-500)} .tp-stat-card__value{font-size:1.875rem;font-weight:800;color:var(--tp-dark);line-height:1;margin-top:.5rem;letter-spacing:-.025em} /* Status */ .tp-status{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .75rem;border-radius:var(--tp-r-full);font-size:.775rem;font-weight:600} .tp-status::before{content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0} .tp-status-submitted{background:#e0f2fe;color:#0369a1}.tp-status-submitted::before{background:#0369a1} .tp-status-processing{background:var(--tp-primary-light);color:var(--tp-primary-dark)}.tp-status-processing::before{background:var(--tp-primary)} .tp-status-approved{background:#dcfce7;color:#15803d}.tp-status-approved::before{background:#15803d} .tp-status-completed{background:#f0fdf4;color:#15803d}.tp-status-completed::before{background:#10b981} .tp-status-rejected{background:#fef2f2;color:#b91c1c}.tp-status-rejected::before{background:#ef4444} .tp-status-docs_needed{background:#fff7ed;color:#c2410c}.tp-status-docs_needed::before{background:#f97316} .tp-status-payment_pending{background:var(--tp-accent-light);color:var(--tp-accent-dark)}.tp-status-payment_pending::before{background:var(--tp-accent)} .tp-status-payment_received{background:#dcfce7;color:#15803d}.tp-status-payment_received::before{background:#15803d} /* Alerts */ .tp-alert{display:flex;gap:.75rem;padding:.875rem 1.125rem;border-radius:var(--tp-r);margin-bottom:1.25rem;font-size:.9rem;line-height:1.55} .tp-alert-success{background:var(--tp-primary-light);border:1px solid var(--tp-primary-mid);color:var(--tp-primary-dark)} .tp-alert-error{background:#fef2f2;border:1px solid #fca5a5;color:#b91c1c} .tp-alert-info{background:#eff6ff;border:1px solid #93c5fd;color:#1d4ed8} .tp-alert-warning{background:var(--tp-accent-light);border:1px solid var(--tp-accent);color:var(--tp-accent-dark)} /* Timeline */ .tp-timeline{position:relative;padding:.5rem 0} .tp-timeline::before{content:'';position:absolute;left:15px;top:0;bottom:0;width:2px;background:var(--tp-gray-200)} .tp-timeline__item{position:relative;padding:0 0 1.5rem 3rem} .tp-timeline__dot{position:absolute;left:8px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--tp-gray-300);border:2px solid var(--tp-white)} .tp-timeline__dot.done{background:var(--tp-primary)} .tp-timeline__dot.active{background:var(--tp-accent);box-shadow:0 0 0 4px var(--tp-accent-light)} .tp-timeline__title{font-size:.9rem;font-weight:600;color:var(--tp-dark)} .tp-timeline__date{font-size:.78rem;color:var(--tp-gray-500);margin-top:.125rem} /* Pagination */ .tp-pagination{display:flex;align-items:center;gap:.375rem;flex-wrap:wrap;justify-content:center;margin-top:2.5rem} .tp-pagination a,.tp-pagination span{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--tp-r);font-size:.875rem;font-weight:600;border:1.5px solid var(--tp-gray-200);color:var(--tp-gray-700);transition:all var(--tp-t)} .tp-pagination a:hover{border-color:var(--tp-primary);color:var(--tp-primary)} .tp-pagination .current{background:var(--tp-primary);border-color:var(--tp-primary);color:#fff} /* File upload */ .tp-file-upload{border:2px dashed var(--tp-gray-300);border-radius:var(--tp-r);padding:1.25rem 1rem;text-align:center;cursor:pointer;transition:all var(--tp-t);background:var(--tp-white);display:flex;flex-direction:column;align-items:center;gap:.375rem} .tp-file-upload:hover,.tp-file-upload.dragover{border-color:var(--tp-primary);background:var(--tp-primary-light)} .tp-file-upload.selected{border-color:var(--tp-primary);border-style:solid;background:var(--tp-primary-light)} .tp-file-upload__icon{font-size:1.75rem;line-height:1} .tp-file-upload__text{font-size:.875rem;font-weight:600;color:var(--tp-dark)} .tp-file-upload__sub{font-size:.75rem;color:var(--tp-gray-500)} .tp-file-preview{display:flex;align-items:center;gap:.625rem;padding:.5rem .75rem;background:var(--tp-primary-light);border:1px solid var(--tp-primary-light);border-radius:var(--tp-r);margin-top:.375rem;font-size:.825rem} .tp-file-preview__name{font-weight:600;color:var(--tp-dark);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Profile photo */ .tp-photo-upload{position:relative;width:88px;height:88px;flex-shrink:0} .tp-photo-upload__preview{width:88px;height:88px;border-radius:50%;object-fit:cover;border:3px solid var(--tp-primary-light)} .tp-photo-upload__btn{position:absolute;bottom:0;right:0;width:28px;height:28px;background:var(--tp-primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.875rem;cursor:pointer;border:2px solid #fff} /* Spinner */ .tp-spinner{width:24px;height:24px;border:2.5px solid var(--tp-gray-200);border-top-color:var(--tp-primary);border-radius:50%;animation:tp-spin .7s linear infinite} /* Animations */ @keyframes tp-spin{to{transform:rotate(360deg)}} @keyframes tp-fade-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} .tp-animate{opacity:0;transform:translateY(24px);transition:opacity .55s ease,transform .55s ease} .tp-animate.visible{opacity:1;transform:translateY(0)} .tp-hidden{display:none!important} .tp-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)} @media(max-width:640px){.tp-booking-card{position:static}.tp-auth-box{padding:1.75rem 1.25rem}} @media print{.tp-header,.tp-footer,.tp-sidebar,.tp-hero{display:none}} /* ══ SERVICE DETAIL ══ */ .tp-sd-hero{position:relative;height:60vh;min-height:420px;overflow:hidden;background:var(--tp-dark)} .tp-sd-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55} .tp-sd-hero__img--default{position:absolute;inset:0;background:linear-gradient(160deg,var(--tp-primary-dark),var(--tp-dark))} .tp-sd-hero__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(13,27,15,.95) 0%,rgba(13,27,15,.4) 50%,transparent 100%)} .tp-sd-hero__body{position:absolute;bottom:0;left:0;right:0;padding:2.5rem 0 2rem;color:#fff} .tp-sd-hero .tp-container{position:relative;z-index:2} .tp-breadcrumb{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:rgba(255,255,255,.6);margin-bottom:.875rem;flex-wrap:wrap} .tp-breadcrumb a{color:rgba(255,255,255,.6);transition:color var(--tp-t)}.tp-breadcrumb a:hover{color:#fff} .tp-sd-hero__title{font-size:clamp(1.75rem,4vw,3rem);font-weight:800;color:#fff;letter-spacing:-.03em;margin-bottom:.875rem;text-shadow:0 2px 24px rgba(0,0,0,.3)} .tp-sd-hero__tags{display:flex;flex-wrap:wrap;gap:.5rem} .tp-sd-tag{display:inline-flex;align-items:center;gap:.375rem;background:rgba(255,255,255,.15);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:.78rem;font-weight:600;padding:.3rem .75rem;border-radius:var(--tp-r-full)} .tp-sd-wrap{padding:3rem 0 5rem} .tp-sd-layout{display:grid;gap:2.5rem;align-items:start} @media(min-width:1024px){.tp-sd-layout{grid-template-columns:1fr 340px}} /* Tabs */ .tp-sd-tabs{display:flex;border-bottom:2px solid var(--tp-gray-200);margin-bottom:2rem;overflow-x:auto;gap:0} .tp-sd-tab{padding:.75rem 1.375rem;font-size:.9rem;font-weight:600;color:var(--tp-gray-500);border:none;background:none;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:all var(--tp-t);white-space:nowrap;font-family:var(--tp-font)} .tp-sd-tab.active,.tp-sd-tab:hover{color:var(--tp-primary);border-bottom-color:var(--tp-primary)} .tp-sd-panel{display:none}.tp-sd-panel.active{display:block;animation:tp-fade-up .25s ease} .tp-sd-block{margin-bottom:2.5rem} .tp-sd-block__title{font-size:1.1rem;font-weight:700;color:var(--tp-dark);margin-bottom:1rem;padding-bottom:.625rem;border-bottom:2px solid var(--tp-primary-light)} .tp-sd-block__title--green{border-color:var(--tp-primary-light);color:var(--tp-primary-dark)} .tp-sd-block__title--red{border-color:#fca5a5;color:var(--tp-danger)} .tp-sd-highlights{list-style:none;display:grid;gap:.5rem} .tp-sd-highlights li{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem 1rem;background:var(--tp-primary-light);border-radius:var(--tp-r);font-size:.9rem;color:var(--tp-dark);line-height:1.5} .tp-sd-highlights li::before{content:'✓';color:var(--tp-primary);font-weight:800;flex-shrink:0;margin-top:.05rem} .tp-sd-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem} .tp-sd-gallery__item{display:block;border-radius:var(--tp-r);overflow:hidden;aspect-ratio:4/3;background:var(--tp-gray-100)} .tp-sd-gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform var(--tp-t-lg)} .tp-sd-gallery__item:hover img{transform:scale(1.06)} .tp-sd-prose{font-size:.95rem;line-height:1.8;color:var(--tp-gray-700)} .tp-sd-prose p{margin-bottom:1rem} .tp-sd-prose h2,.tp-sd-prose h3{color:var(--tp-dark);font-weight:700;margin:1.5rem 0 .75rem} .tp-sd-prose ul,.tp-sd-prose ol{margin:0 0 1rem 1.5rem} .tp-sd-prose li{margin-bottom:.375rem} .tp-sd-incl-grid{display:grid;gap:2rem} @media(min-width:640px){.tp-sd-incl-grid{grid-template-columns:1fr 1fr}} .tp-sd-list{list-style:none;display:grid;gap:.5rem} .tp-sd-list li{display:flex;align-items:flex-start;gap:.625rem;font-size:.9rem;line-height:1.5;padding:.5rem 0;border-bottom:1px solid var(--tp-gray-100)} .tp-sd-list--incl li::before{content:'✓';color:var(--tp-primary);font-weight:800;flex-shrink:0} .tp-sd-list--excl li::before{content:'✗';color:var(--tp-danger);font-weight:800;flex-shrink:0} .tp-sd-faqs{display:grid;gap:.5rem} .tp-sd-faq{border:1px solid var(--tp-gray-200);border-radius:var(--tp-r);overflow:hidden} .tp-sd-faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;background:var(--tp-surface);border:none;cursor:pointer;font-family:var(--tp-font);font-size:.95rem;font-weight:600;color:var(--tp-dark);text-align:left} .tp-sd-faq__icon{flex-shrink:0;transition:transform var(--tp-t);font-style:normal} .tp-sd-faq.open .tp-sd-faq__icon{transform:rotate(180deg)} .tp-sd-faq__a{padding:0 1.25rem;max-height:0;overflow:hidden;transition:all var(--tp-t-lg);font-size:.9rem;color:var(--tp-gray-500);line-height:1.75} .tp-sd-faq.open .tp-sd-faq__a{padding:1rem 1.25rem;max-height:600px} .tp-sd-reviews{display:grid;gap:1rem} .tp-sd-review{background:var(--tp-surface);border-radius:var(--tp-r-lg);padding:1.25rem 1.5rem} .tp-sd-review__head{display:flex;align-items:center;gap:.875rem;margin-bottom:.875rem} .tp-sd-review__avatar{width:40px;height:40px;border-radius:50%;background:var(--tp-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;flex-shrink:0} .tp-sd-review__name{font-weight:700;font-size:.9rem;color:var(--tp-dark)} .tp-sd-review__stars{color:var(--tp-accent-dark);font-size:.875rem;margin-top:.2rem} .tp-sd-review__text{font-size:.875rem;color:var(--tp-gray-500);line-height:1.7} /* Booking card */ .tp-sd-booking{background:var(--tp-white);border-radius:var(--tp-r-xl);box-shadow:var(--tp-sh-lg);border:1px solid var(--tp-gray-200);position:sticky;top:90px} .tp-sd-booking__top{background:linear-gradient(135deg,var(--tp-primary-dark) 0%,var(--tp-primary) 100%);padding:1.5rem 1.75rem;color:#fff;border-radius:var(--tp-r-xl) var(--tp-r-xl) 0 0} .tp-sd-booking__price-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.65);margin-bottom:.25rem} .tp-sd-booking__price{font-size:2.25rem;font-weight:800;letter-spacing:-.03em;color:#fff;line-height:1} .tp-sd-booking__price-note{font-size:.78rem;color:rgba(255,255,255,.65);margin-top:.25rem} .tp-sd-booking__body{padding:1.5rem} .tp-sd-booking__features{list-style:none;display:grid;gap:.625rem} .tp-sd-booking__features li{display:flex;align-items:center;gap:.75rem;font-size:.875rem;color:var(--tp-gray-700)} .tp-sd-booking__features li span:first-child{font-size:1.1rem;flex-shrink:0} .tp-sd-contact-card{display:flex;align-items:center;gap:.875rem;background:var(--tp-primary-light);border-radius:var(--tp-r-lg);padding:1rem 1.25rem;margin-top:1rem} .tp-sd-contact-card__icon{font-size:1.5rem;flex-shrink:0} .tp-sd-contact-card>div{flex:1} /* ══ VISA CHECKER PAGE ══ */ .tp-vc-page-hero{background:linear-gradient(135deg,var(--tp-primary-dark) 0%,var(--tp-primary) 60%,var(--tp-primary-mid) 100%);padding:5rem 0 4rem;color:#fff} .tp-vc-page-hero__inner{max-width:800px;margin:0 auto;text-align:center} .tp-vc-page-hero__h1{font-size:clamp(2rem,4vw,3rem);font-weight:800;color:#fff;margin:.625rem 0 1rem;letter-spacing:-.03em} .tp-vc-page-hero__sub{font-size:1.05rem;color:rgba(255,255,255,.78);margin-bottom:2.5rem;line-height:1.75} .tp-vc-widget{background:rgba(255,255,255,.08);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.15);border-radius:var(--tp-r-xl);padding:2rem} .tp-vc-widget__row{display:grid;grid-template-columns:1fr auto 1fr auto;gap:1rem;align-items:end} @media(max-width:768px){.tp-vc-widget__row{grid-template-columns:1fr;}.tp-vc-widget__arrow{display:none}} .tp-vc-widget__field{display:flex;flex-direction:column} .tp-vc-widget__label{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:.4rem} .tp-vc-widget__select{width:100%;padding:.75rem 1rem;background:rgba(255,255,255,.15);border:1.5px solid rgba(255,255,255,.25);border-radius:var(--tp-r);color:#fff;font-family:var(--tp-font);font-size:.95rem;outline:none;cursor:pointer;appearance:none;transition:border-color var(--tp-t)} .tp-vc-widget__select:focus{border-color:rgba(255,255,255,.7)} .tp-vc-widget__select option{background:var(--tp-primary-dark);color:#fff} .tp-vc-widget__arrow{font-size:1.25rem;color:rgba(255,255,255,.5);padding-bottom:.5rem;text-align:center} .tp-vc-result{background:var(--tp-white);border-radius:var(--tp-r-lg);padding:1.375rem;margin-top:1.25rem;display:none;color:var(--tp-dark);text-align:left} .tp-vc-result.show{display:block;animation:tp-fade-up .3s ease} .tp-vc-page-hero__note{font-size:.78rem;color:rgba(255,255,255,.55);margin-top:1.25rem;line-height:1.6} .tp-vc-page-hero__note a{color:rgba(255,255,255,.75);text-decoration:underline} .tp-vc-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem} @media(max-width:640px){.tp-vc-steps{grid-template-columns:1fr}} .tp-vc-step{text-align:center} .tp-vc-step__num{width:64px;height:64px;background:var(--tp-primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:800;margin:0 auto 1rem;box-shadow:0 0 0 8px var(--tp-primary-light)} .tp-vc-step h3{font-size:1rem;font-weight:700;color:var(--tp-dark);margin-bottom:.5rem} .tp-vc-step p{font-size:.875rem;color:var(--tp-gray-500);line-height:1.7} /* ══ SERVICES LISTING ══ */ .tp-page-hero{padding:4rem 0 3rem;color:#fff} .tp-page-hero--primary{background:linear-gradient(135deg,var(--tp-primary-dark) 0%,var(--tp-primary) 100%)} .tp-page-hero__h1{font-size:clamp(2rem,4vw,3rem);font-weight:800;color:#fff;margin:.625rem 0 .875rem;letter-spacing:-.03em} .tp-page-hero__sub{font-size:1.05rem;color:rgba(255,255,255,.78);margin-bottom:2rem} .tp-page-hero__search{display:flex;gap:.625rem;max-width:520px} .tp-page-hero__search-input{flex:1;padding:.75rem 1.125rem;border-radius:var(--tp-r-full);border:1.5px solid rgba(255,255,255,.3);background:rgba(255,255,255,.15);color:#fff;font-family:var(--tp-font);font-size:.9rem;outline:none} .tp-page-hero__search-input::placeholder{color:rgba(255,255,255,.55)} .tp-page-hero__search-input:focus{border-color:rgba(255,255,255,.7)} .tp-type-tabs{background:var(--tp-white);border-bottom:1px solid var(--tp-gray-200);position:sticky;top:70px;z-index:100} .tp-type-tabs__inner{display:flex;overflow-x:auto;gap:0;-webkit-overflow-scrolling:touch} .tp-type-tab{display:inline-flex;align-items:center;padding:.875rem 1.375rem;font-size:.875rem;font-weight:600;color:var(--tp-gray-500);border-bottom:3px solid transparent;white-space:nowrap;transition:all var(--tp-t);text-decoration:none;flex-shrink:0} .tp-type-tab:hover,.tp-type-tab.active{color:var(--tp-primary);border-bottom-color:var(--tp-primary)} .tp-services-listing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem} @media(max-width:1024px){.tp-services-listing-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.tp-services-listing-grid{grid-template-columns:1fr}} .tp-scard__img-link{display:block;text-decoration:none} /* No featured spanning anywhere */ .tp-scard--featured{grid-column:span 1 !important} /* ================================================================ Performance, Mobile & Cross-Browser Additions — v3.1 ================================================================ */ /* ── Generic grid utilities ── */ .tp-grid{display:grid;gap:2rem} .tp-grid-2{grid-template-columns:repeat(2,1fr)} .tp-grid-3{grid-template-columns:repeat(3,1fr)} .tp-grid-4{grid-template-columns:repeat(4,1fr)} @media(max-width:1024px){.tp-grid-3{grid-template-columns:repeat(2,1fr)}.tp-grid-4{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.tp-grid-2,.tp-grid-3,.tp-grid-4{grid-template-columns:1fr}} /* ── Lazy-load fade-in ── */ img[loading="lazy"]{opacity:0;transition:opacity .4s ease} img[loading="lazy"].loaded{opacity:1} /* ── Stats bar mobile ── */ @media(max-width:640px){ [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr)!important} } /* ── About page hero mobile ── */ @media(max-width:640px){ .tp-grid-2[style*="gap:4rem"]{gap:2rem!important} } /* ── Safari flexbox fix ── */ .tp-header__inner{-webkit-box-align:center} .tp-btn{-webkit-appearance:none} /* ── iOS button / input resets ── */ input,textarea,select,button{-webkit-appearance:none;-moz-appearance:none;appearance:none} /* ── Touch-friendly tap targets (min 44px) ── */ @media(max-width:768px){ .tp-btn{min-height:44px;padding:.75rem 1.5rem} .tp-nav__menu>li>a{min-height:44px} .tp-mobile-menu li a{min-height:44px;display:flex;align-items:center} } /* ── Prevent horizontal overflow on mobile ── `body{overflow-x:hidden}` alone (already declared in the reset rules near the top of this file too) fully covers this. The extra `.tp-container{overflow-x:hidden}` that used to be here was redundant for that purpose AND had a real side effect: per the CSS spec, setting only overflow-x to a non-visible value forces the browser to compute overflow-y as `auto` instead of `visible` on that same element. Since many `.tp-container` elements wrap content sized flush to their own box (like the Flight Finder card and the flight-enquiry card), that auto-computed vertical overflow was silently clipping box-shadows the moment they extended past the container's own edge — which is what was actually causing the "shadow gets cut off / looks like it's stuck inside the parent" issue across the site. Removed. */ body{overflow-x:hidden} /* ── Hero image performance ── */ .tp-hero img,.tp-slide img{ content-visibility:auto; contain-intrinsic-size:auto 500px; } /* ── Focus-visible for keyboard navigation (a11y + cross-browser) ── */ :focus-visible{outline:3px solid var(--tp-accent);outline-offset:3px} :focus:not(:focus-visible){outline:none} /* ── Print styles ── */ @media print{ .tp-header,.tp-footer,.tp-mobile-nav,.tp-btn{display:none!important} body{font-size:12pt;color:#000} a{color:#000;text-decoration:underline} } /* ── Smooth scroll on Safari ── */ @supports (scroll-behavior:smooth){html{scroll-behavior:smooth}} /* ── Reduce motion for accessibility ── */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} } /* ══ GUTENBERG / BLOCK EDITOR WRAPPERS ══ Ensure travelpro sections always render full-width, even when WordPress wraps shortcode output in block-editor containers. ══ */ .wp-block-shortcode, .wp-block-group, .entry-content, .page-content, .post-content{ max-width:none!important; padding:0!important; margin:0!important; } /* Strip paragraph tags that wpautop may inject around the shortcode */ .wp-block-shortcode>p:empty, .entry-content>p:empty{ display:none; } /* Make sure sections inside Gutenberg wrappers are still full-viewport */ .wp-block-shortcode .tp-hero, .entry-content .tp-hero, .wp-block-shortcode .tp-trust-strip, .entry-content .tp-trust-strip, .wp-block-shortcode .tp-cta-banner, .entry-content .tp-cta-banner{ width:100%; margin-left:0; margin-right:0; } /* ══ CORPORATE PROFILE — compact strip, light Google-card style ══ */ .tp-corp-strip{padding:2.5rem 0} .tp-corp-strip__card{ display:flex;align-items:center;gap:1.75rem; background:var(--tp-white); border:1px solid var(--tp-gray-200); border-radius:24px; padding:1.75rem 2.25rem; box-shadow:0 18px 46px -18px rgba(13,27,15,.16),0 2px 8px rgba(13,27,15,.04); position:relative;overflow:hidden; transition:box-shadow var(--tp-t-lg),transform var(--tp-t-lg); } .tp-corp-strip__card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#4285F4 0%,#EA4335 25%,#FBBC05 50%,#34A853 75%,var(--tp-primary) 100%)} .tp-corp-strip__card:hover{box-shadow:0 26px 60px -18px rgba(13,27,15,.2),0 4px 12px rgba(13,27,15,.06);transform:translateY(-3px)} .tp-corp-strip__icon{ flex-shrink:0;width:64px;height:64px;border-radius:18px; display:flex;align-items:center;justify-content:center; background:var(--tp-primary-light);color:var(--tp-primary); } .tp-corp-strip__body{flex:1;min-width:0} .tp-corp-strip__eyebrow{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tp-accent-dark,var(--tp-accent));margin-bottom:.35rem} .tp-corp-strip__title{font-size:1.3rem;font-weight:800;color:var(--tp-dark);letter-spacing:-.02em;line-height:1.25;margin:0 0 .5rem} .tp-corp-strip__text{font-size:.9rem;color:var(--tp-gray-500);line-height:1.65;margin:0;max-width:560px} .tp-corp-strip__divider{width:1px;align-self:stretch;background:var(--tp-gray-200);flex-shrink:0} .tp-corp-strip__btn{flex-shrink:0;white-space:nowrap} @media(max-width:820px){ .tp-corp-strip__card{flex-direction:column;align-items:flex-start;text-align:left;padding:1.75rem} .tp-corp-strip__divider{display:none} .tp-corp-strip__btn{width:100%;justify-content:center} } /* ══ MODAL ══ */ .tp-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9999;display:flex;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(4px);opacity:0;transition:opacity .3s ease} .tp-modal-overlay.tp-modal-visible{opacity:1} .tp-modal-box{background:#fff;border-radius:20px;padding:2.5rem 2rem 2rem;width:100%;max-width:440px;position:relative;box-shadow:0 32px 80px rgba(0,0,0,.25);transform:translateY(20px);transition:transform .3s ease} .tp-modal-overlay.tp-modal-visible .tp-modal-box{transform:translateY(0)} .tp-modal-close{position:absolute;top:1rem;right:1rem;width:32px;height:32px;border-radius:8px;border:0;background:#f3f4f6;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.25rem;color:#6b7280;line-height:1;transition:background .2s} .tp-modal-close:hover{background:#e5e7eb;color:#111} .tp-modal-icon{width:60px;height:60px;border-radius:16px;background:linear-gradient(135deg,var(--tp-primary-light),rgba(45,106,79,.15));display:flex;align-items:center;justify-content:center;color:var(--tp-primary);margin:0 auto 1.25rem} .tp-modal-title{font-size:1.375rem;font-weight:800;color:var(--tp-dark);text-align:center;margin:0 0 .5rem;letter-spacing:-.02em} .tp-modal-sub{color:var(--tp-gray-500);text-align:center;font-size:.9rem;margin:0 0 1.5rem;line-height:1.6} /* ================================================================ TRAVELPRO V7 — Extended Styles (Profile, Auth, Home Redesign) ================================================================ */ /* ── SVG Icons ── display:inline-flex + line-height:0 keeps the icon's own box perfectly centered against adjacent text regardless of the SVG's internal baseline/descender, which is what caused icon+label rows (e.g. the clock icon next to "X days" on service/tour cards) to look misaligned. */ .tp-svg-icon{width:1em;height:1em;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;line-height:0;vertical-align:middle} .tp-svg-icon svg{display:block;width:100%;height:100%} .tp-svg-icon-sm{width:.8em;height:.8em} .tp-svg-icon-lg{width:1.4em;height:1.4em} /* ── Section eyebrow ── */ .tp-section-eyebrow{display:flex;align-items:center;gap:.5rem;justify-content:center;margin-bottom:.5rem} .tp-section-eyebrow .tp-svg-icon{color:var(--tp-accent);width:1rem;height:1rem} .tp-section-eyebrow .tp-section-label{margin-bottom:0} /* ── Viewport reveal animations ─ only active when JS has confirmed it's ready ── */ .js-anim-ready .tp-reveal{opacity:0;transform:translateY(32px);transition:opacity .65s ease,transform .65s ease} .js-anim-ready .tp-reveal.is-visible{opacity:1;transform:translateY(0)} .js-anim-ready .tp-reveal-child{opacity:0;transform:translateY(24px);transition:opacity .55s ease,transform .55s ease;transition-delay:var(--delay,0ms)} .js-anim-ready .tp-reveal.is-visible .tp-reveal-child{opacity:1;transform:translateY(0)} @media(prefers-reduced-motion:reduce){.js-anim-ready .tp-reveal,.js-anim-ready .tp-reveal-child{opacity:1;transform:none;transition:none}} /* ══ HERO — animated text ══ */ .js-anim-ready .tp-hero-animate-title,.js-anim-ready .tp-hero-animate-sub,.js-anim-ready .tp-hero-animate-btns{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease} .tp-hero-animate-title.tp-slide-in{opacity:1;transform:translateY(0)} .tp-hero-animate-sub.tp-slide-in{opacity:1;transform:translateY(0);transition-delay:.12s} .tp-hero-animate-btns.tp-slide-in{opacity:1;transform:translateY(0);transition-delay:.24s} /* Initialise first slide on load */ .swiper-slide-active .tp-hero-animate-title,.swiper-slide-active .tp-hero-animate-sub,.swiper-slide-active .tp-hero-animate-btns{opacity:1;transform:translateY(0)} /* ══ TRUST STRIP ══ */ .tp-trust-icon-wrap{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--tp-primary-light);color:var(--tp-primary);flex-shrink:0} .tp-trust-icon-wrap .tp-svg-icon{width:1.3rem;height:1.3rem} .tp-trust-item{display:flex;align-items:center;gap:1rem} /* ══ SERVICE CARDS — improved ══ */ .tp-scard__meta-item{display:inline-flex;align-items:center;gap:.3rem;font-size:.8rem;color:var(--tp-gray-500)} .tp-scard__meta-item .tp-svg-icon{width:.85rem;height:.85rem;color:var(--tp-primary)} .tp-scard__rating{display:inline-flex;align-items:center;gap:.3rem;font-size:.8rem;font-weight:700;color:var(--tp-accent)} .tp-scard__rating .tp-svg-icon{width:.85rem;height:.85rem} .tp-scard__placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--tp-primary-light);color:var(--tp-primary)} .tp-scard__placeholder .tp-svg-icon{width:2.5rem;height:2.5rem} .tp-scard__foot .tp-btn .tp-svg-icon{width:.9rem;height:.9rem;margin-left:.25rem} /* ══ ABOUT SECTION ══ */ .tp-about-section{background:var(--tp-white)} .tp-about-inner{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center} @media(max-width:900px){.tp-about-inner{grid-template-columns:1fr;gap:3rem}} .tp-about-image-wrap{position:relative} .tp-about-img{width:100%;border-radius:var(--tp-r-xl);object-fit:cover;aspect-ratio:4/3;box-shadow:var(--tp-sh-lg)} .tp-about-img-placeholder{width:100%;aspect-ratio:4/3;border-radius:var(--tp-r-xl);background:var(--tp-primary-light);display:flex;align-items:center;justify-content:center} .tp-about-img-placeholder__inner{display:flex;flex-direction:column;align-items:center;gap:.75rem;color:var(--tp-primary);opacity:.5} .tp-about-img-placeholder__inner .tp-svg-icon{width:4rem;height:4rem} .tp-about-img-placeholder__inner span{font-size:.875rem;font-weight:600} .tp-about-image-wrap{overflow:visible}.tp-about-badge{position:absolute;bottom:1rem;right:1rem;display:flex;align-items:center;gap:.625rem;background:var(--tp-white);border-radius:var(--tp-r-full);padding:.625rem 1.25rem;box-shadow:var(--tp-sh-lg);font-size:.825rem;font-weight:700;color:var(--tp-primary)} /* ══ GOOGLE REVIEWS SECTION ══ */ .tp-reviews-section{background:var(--tp-white)} .tp-reviews-summary{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem 2.25rem;justify-content:center;background:var(--tp-surface);border:1px solid var(--tp-gray-200);border-radius:var(--tp-r-xl);padding:1.75rem 2.25rem;margin-bottom:2.5rem} .tp-reviews-summary__google{display:flex;align-items:center;gap:.625rem} .tp-reviews-summary__brand{font-size:1.05rem;font-weight:700;color:var(--tp-gray-700);letter-spacing:-.01em} .tp-reviews-summary__score{display:flex;align-items:center;gap:.625rem;padding-left:1.75rem;border-left:1px solid var(--tp-gray-200)} @media(max-width:700px){.tp-reviews-summary__score{border-left:none;padding-left:0}} .tp-reviews-summary__num{font-size:1.75rem;font-weight:800;color:var(--tp-dark);line-height:1} .tp-reviews-summary__stars{display:flex;gap:.15rem;color:#FBBC05} .tp-reviews-summary__stars .tp-svg-icon{width:18px;height:18px} .tp-reviews-summary__count{font-size:.875rem;color:var(--tp-gray-500);font-weight:500} .tp-reviews-summary__actions{display:flex;gap:.875rem;margin-left:auto;flex-wrap:wrap} @media(max-width:700px){.tp-reviews-summary__actions{margin-left:0;width:100%}.tp-reviews-summary__actions .tp-btn{flex:1}} .tp-reviews-summary__actions .tp-btn .tp-svg-icon{width:1rem;height:1rem} .tp-reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem} @media(max-width:960px){.tp-reviews-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.tp-reviews-grid{grid-template-columns:1fr}} .tp-review-card{background:var(--tp-white);border:1px solid var(--tp-gray-200);border-radius:var(--tp-r-lg);padding:1.5rem;transition:all var(--tp-t-lg)} .tp-review-card:hover{box-shadow:var(--tp-sh-lg);transform:translateY(-3px);border-color:transparent} .tp-review-card__head{display:flex;align-items:center;gap:.75rem;margin-bottom:.875rem} .tp-review-card__avatar{width:2.5rem;height:2.5rem;border-radius:50%;background:var(--tp-primary);color:var(--tp-white);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;flex-shrink:0} .tp-review-card__who{flex:1;min-width:0} .tp-review-card__name{font-size:.9rem;font-weight:700;color:var(--tp-gray-700);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tp-review-card__meta{font-size:.75rem;color:var(--tp-gray-500)} .tp-review-card__stars{display:flex;align-items:center;gap:.1rem;color:#FBBC05;margin-bottom:.75rem} .tp-review-card__stars .tp-svg-icon{width:15px;height:15px} .tp-review-card__time{margin-left:.5rem;font-size:.78rem;color:var(--tp-gray-500);font-weight:500} .tp-review-card__text{font-size:.875rem;line-height:1.7;color:var(--tp-gray-700);margin:0} .tp-reviews-footer{text-align:center;margin-top:2.5rem} .tp-reviews-footer__link{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:600;color:var(--tp-primary);text-decoration:none} .tp-reviews-footer__link:hover{text-decoration:underline} .tp-reviews-footer__link .tp-svg-icon{width:1rem;height:1rem} .tp-google-logo--sm{margin-left:auto;flex-shrink:0} .tp-review-card__brandicon{margin-left:auto;flex-shrink:0;border-radius:50%;object-fit:contain} .tp-about-badge .tp-svg-icon{color:var(--tp-accent);width:1.1rem;height:1.1rem} @media(max-width:900px){.tp-about-badge{display:none}} .tp-about-text{font-size:1.05rem;line-height:1.8;color:var(--tp-gray-700);margin:1.25rem 0 1.75rem} .tp-about-stats{display:flex;gap:2rem;margin-bottom:2rem;flex-wrap:wrap} .tp-about-stat{display:flex;flex-direction:column;gap:.25rem} .tp-about-stat__num{font-size:2rem;font-weight:800;color:var(--tp-primary);line-height:1;letter-spacing:-.03em} .tp-about-stat__label{font-size:.8rem;font-weight:600;color:var(--tp-gray-500);text-transform:uppercase;letter-spacing:.06em} .tp-about-btn{gap:.625rem} .tp-about-btn .tp-svg-icon{width:.9rem;height:.9rem} .tp-about-content .tp-section-eyebrow{justify-content:flex-start} .tp-about-content .tp-section-header{text-align:left;margin:0 0 .5rem} .tp-about-content .tp-h2{margin:.25rem 0 0} /* ══ WHY CARDS — improved ══ */ /* tp-why-card__icon-wrap fully handled in grid block above */ /* ══ STEPS — improved bubbles ══ */ .tp-step__bubble{position:relative;width:56px;height:56px;background:var(--tp-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1rem;font-weight:800;margin:0 auto 1.25rem;flex-shrink:0;z-index:1} .tp-step__bubble-ring{position:absolute;inset:-6px;border-radius:50%;border:2px dashed var(--tp-primary);opacity:.3;animation:tp-ring-spin 8s linear infinite} @keyframes tp-ring-spin{to{transform:rotate(360deg)}} .tp-step__icon-wrap{width:44px;height:44px;border-radius:12px;background:var(--tp-accent-light);display:flex;align-items:center;justify-content:center;color:var(--tp-accent-dark);margin:0 auto 1rem} .tp-step__icon-wrap .tp-svg-icon{width:1.2rem;height:1.2rem} /* ══ CTA BANNER — improved ══ */ .tp-cta-banner{position:relative;overflow:hidden} .tp-cta-banner__orb{position:absolute;border-radius:50%;opacity:.12;pointer-events:none} .tp-cta-banner__orb--1{width:280px;height:280px;background:#fff;top:-100px;right:-80px} .tp-cta-banner__orb--2{width:180px;height:180px;background:#fff;bottom:-60px;left:60px} .tp-cta-banner__plane{position:absolute;right:10%;top:50%;transform:translateY(-50%);opacity:.07;color:#fff;font-size:0} .tp-cta-banner__plane .tp-svg-icon{width:200px;height:200px} /* ══ PROFILE PAGE ══ */ .tp-profile-page{min-height:60vh} .tp-profile-cover{min-height:220px;background:linear-gradient(135deg,var(--tp-primary-dark) 0%,var(--tp-primary) 50%,var(--tp-primary-mid) 100%);background-size:cover;background-position:center;position:relative;overflow:hidden} .tp-profile-cover::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");pointer-events:none} .tp-profile-cover__overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.15),rgba(0,0,0,.35))} .tp-profile-cover__inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;padding-top:2.5rem;padding-bottom:2.5rem;flex-wrap:wrap;gap:1rem} .tp-profile-cover__greeting{display:flex;align-items:center;gap:1rem} .tp-profile-greeting-icon{font-size:2.5rem;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))} .tp-profile-greeting-time{color:rgba(255,255,255,.8);font-size:.875rem;font-weight:500;margin:0 0 .25rem;letter-spacing:.05em;text-transform:uppercase} .tp-profile-greeting-name{color:#fff;font-size:2rem;font-weight:800;margin:0;letter-spacing:-.03em;text-shadow:0 2px 8px rgba(0,0,0,.2)} .tp-profile-cover__clock{text-align:right;color:#fff} .tp-profile-clock{display:block;font-size:1.75rem;font-weight:700;letter-spacing:.03em;font-variant-numeric:tabular-nums;text-shadow:0 2px 6px rgba(0,0,0,.25)} .tp-profile-date{display:block;font-size:.8rem;opacity:.75;margin-top:.2rem} @media(max-width:600px){.tp-profile-cover__clock{display:none}.tp-profile-greeting-name{font-size:1.5rem}} /* Avatar row */ .tp-profile-avatar-row{display:flex;align-items:flex-end;gap:1.5rem;padding-top:.75rem;flex-wrap:wrap;border-bottom:1px solid var(--tp-gray-100);padding-bottom:1.5rem;margin-bottom:2rem} .tp-profile-avatar-wrap{margin-top:-3.5rem;position:relative;z-index:2} .tp-profile-avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:var(--tp-sh)} .tp-profile-avatar-initials{width:96px;height:96px;border-radius:50%;border:4px solid #fff;box-shadow:var(--tp-sh);display:flex;align-items:center;justify-content:center;font-size:2.5rem;font-weight:800;color:var(--tp-primary);background:var(--tp-primary-light);line-height:1} .tp-photo-upload{position:relative;display:inline-block} .tp-photo-upload__btn{position:absolute;bottom:2px;right:2px;width:28px;height:28px;border-radius:50%;background:var(--tp-primary);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25);transition:background .2s} .tp-photo-upload__btn:hover{background:var(--tp-primary-dark)} .tp-profile-meta{flex:1;min-width:180px} .tp-profile-meta__name{font-size:1.4rem;font-weight:700;margin:0 0 .25rem;color:var(--tp-dark)} .tp-profile-meta__email{color:var(--tp-gray-500);font-size:.875rem;margin:0 0 .75rem} .tp-profile-meta__badges{display:flex;gap:.5rem;flex-wrap:wrap} .tp-profile-badge{display:inline-flex;align-items:center;gap:.375rem;padding:.3rem .75rem;background:var(--tp-primary-light);color:var(--tp-primary);border-radius:var(--tp-r-full);font-size:.75rem;font-weight:700} .tp-profile-badge--secondary{background:var(--tp-surface);color:var(--tp-gray-500)} .tp-profile-meta__actions{margin-left:auto;align-self:center} @media(max-width:700px){.tp-profile-meta__actions{margin-left:0}} /* Profile cards */ .tp-profile-body{padding-bottom:4rem} .tp-profile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:1.5rem;align-items:start} @media(max-width:860px){.tp-profile-grid{grid-template-columns:1fr}} .tp-profile-card{background:var(--tp-white);border:1px solid var(--tp-gray-100);border-radius:var(--tp-r-lg);box-shadow:var(--tp-sh)} .tp-profile-card__head{display:flex;align-items:center;gap:.75rem;padding:1.25rem 1.5rem;border-bottom:1px solid var(--tp-gray-100);background:var(--tp-surface);border-radius:var(--tp-r-lg) var(--tp-r-lg) 0 0} .tp-profile-card__head .tp-svg-icon,.tp-profile-card__head svg{color:var(--tp-primary);flex-shrink:0} .tp-profile-card__head h3{margin:0;font-size:1rem;font-weight:700;color:var(--tp-dark)} .tp-profile-card__body{padding:1.5rem} .tp-profile-card__foot{padding:1.25rem 1.5rem;border-top:1px solid var(--tp-gray-100);background:var(--tp-surface);border-radius:0 0 var(--tp-r-lg) var(--tp-r-lg)} .tp-profile-fields{display:grid;grid-template-columns:1fr 1fr;gap:1rem} @media(max-width:540px){.tp-profile-fields{grid-template-columns:1fr}} /* Password field */ .tp-password-field .tp-input-wrap{position:relative;display:flex} .tp-password-field .tp-input{padding-right:3rem} .tp-pwd-toggle{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--tp-gray-500);padding:0;display:flex;align-items:center} .tp-pwd-toggle:hover{color:var(--tp-primary)} .tp-pwd-strength{display:flex;align-items:center;gap:.75rem;margin-top:.5rem} .tp-pwd-strength__bar{flex:1;height:5px;background:var(--tp-gray-200);border-radius:99px;overflow:hidden} .tp-pwd-strength__fill{height:100%;border-radius:99px;transition:width .3s ease,background .3s ease} .tp-pwd-strength__label{font-size:.75rem;font-weight:700;white-space:nowrap;min-width:3rem} .tp-reg-pwd-strength{display:flex;align-items:center;gap:.75rem;margin-top:.5rem} /* ══ AUTH PAGES V2 ══ */ .tp-auth-page--v2{display:flex;min-height:100vh;align-items:stretch} .tp-auth-left--v2{display:flex;flex-direction:column;width:420px;min-width:320px;flex-shrink:0;position:relative;overflow:hidden} @media(max-width:900px){.tp-auth-left--v2{display:none}} .tp-auth-left__bg{position:absolute;inset:0;background:linear-gradient(160deg,var(--tp-primary-dark) 0%,var(--tp-primary) 55%,var(--tp-primary-mid) 100%);z-index:0} .tp-auth-left--register .tp-auth-left__bg{background:linear-gradient(160deg,#1B2A4A 0%,var(--tp-primary-dark) 40%,var(--tp-primary) 100%)} .tp-auth-left__bg::after{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Crect x='0' y='0' width='40' height='40'/%3E%3Crect x='40' y='40' width='40' height='40'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")} .tp-auth-left__content{position:relative;z-index:1;display:flex;flex-direction:column;padding:2.5rem;height:100%;gap:0} .tp-auth-brand{display:block;margin-bottom:3rem;opacity:.95} .tp-auth-left__body{flex:1;display:flex;flex-direction:column;justify-content:center} .tp-auth-left__title{color:#fff;font-size:2rem;font-weight:800;margin:0 0 .875rem;line-height:1.2;letter-spacing:-.03em} .tp-auth-left__sub{color:rgba(255,255,255,.7);line-height:1.8;margin:0 0 2rem;font-size:.9rem} .tp-auth-left__footer{color:rgba(255,255,255,.4);font-size:.75rem;margin-top:2rem} .tp-auth-features{display:flex;flex-direction:column;gap:1rem} .tp-auth-feature{display:flex;align-items:center;gap:.875rem} .tp-auth-feature__icon{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0} .tp-auth-feature__title{color:#fff;font-weight:700;font-size:.875rem} .tp-auth-feature__sub{color:rgba(255,255,255,.6);font-size:.75rem} .tp-auth-perks{display:flex;flex-direction:column;gap:.75rem} .tp-auth-perk{display:flex;align-items:flex-start;gap:.75rem;color:rgba(255,255,255,.85);font-size:.875rem;line-height:1.5} .tp-auth-perk__check{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;margin-top:.1rem} .tp-auth-right--v2{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem;background:var(--tp-surface)} .tp-auth-box--v2{background:#fff;border-radius:var(--tp-r-xl);box-shadow:0 8px 40px rgba(0,0,0,.1);padding:2.5rem;width:100%;max-width:460px} .tp-auth-box__header{display:flex;align-items:center;gap:1rem;margin-bottom:2rem} .tp-auth-box__icon{width:52px;height:52px;border-radius:14px;background:var(--tp-primary-light);display:flex;align-items:center;justify-content:center;color:var(--tp-primary);flex-shrink:0} .tp-auth-box__title{font-size:1.5rem;font-weight:800;margin:0 0 .25rem;color:var(--tp-dark)} .tp-auth-box__sub{color:var(--tp-gray-500);margin:0;font-size:.875rem} .tp-auth-form{display:flex;flex-direction:column;gap:.875rem} .tp-auth-field{display:flex;flex-direction:column;gap:0} .tp-auth-label{font-size:.8rem;font-weight:700;color:var(--tp-gray-700);margin-bottom:.375rem;text-transform:uppercase;letter-spacing:.05em} .tp-auth-input-wrap{position:relative;display:flex;align-items:center} .tp-auth-input-icon{position:absolute;left:.875rem;color:var(--tp-gray-500);display:flex;pointer-events:none} .tp-auth-input{padding-left:2.75rem!important} .tp-auth-eye{position:absolute;right:.75rem;background:none;border:none;cursor:pointer;color:var(--tp-gray-500);padding:0;display:flex;align-items:center} .tp-auth-eye:hover{color:var(--tp-primary)} .tp-auth-forgot{font-size:.8rem;color:var(--tp-primary);font-weight:600} .tp-auth-forgot:hover{color:var(--tp-primary-dark)} .tp-auth-remember{display:flex;align-items:center;gap:.625rem;font-size:.85rem;cursor:pointer;color:var(--tp-gray-700)} .tp-auth-remember input{width:15px;height:15px;accent-color:var(--tp-primary)} .tp-auth-submit{margin-top:.25rem;position:relative;overflow:hidden} .tp-auth-submit::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transform:translateX(-100%);transition:transform .5s ease} .tp-auth-submit:hover::after{transform:translateX(100%)} .tp-auth-terms{font-size:.75rem;color:var(--tp-gray-500);text-align:center;margin:.25rem 0 0} .tp-auth-terms a{color:var(--tp-primary)} .tp-auth-divider{display:flex;align-items:center;gap:1rem;margin:1.25rem 0;color:var(--tp-gray-500);font-size:.8rem} .tp-auth-divider::before,.tp-auth-divider::after{content:'';flex:1;height:1px;background:var(--tp-gray-200)} @media(max-width:600px){.tp-auth-box--v2{padding:1.75rem;border-radius:var(--tp-r-lg)}} /* ══ INPUT WRAP (password reveal) ══ */ .tp-input-wrap{position:relative;display:flex;align-items:center} .tp-input-wrap .tp-input{flex:1} /* ── Cube/3D slider: ensure slide content stays clickable ───────────────── */ .swiper-cube .swiper-slide, .swiper-cube .tp-slide{-webkit-transform-style:preserve-3d;transform-style:preserve-3d} .swiper-cube .tp-slide__content, .swiper-cube .tp-slide .tp-container{position:relative;z-index:10;pointer-events:auto} .swiper-cube .tp-slide__actions a{position:relative;z-index:11;pointer-events:auto} .swiper-cube-shadow{pointer-events:none!important} /* Coverflow same fix */ .swiper-coverflow .tp-slide__content,.swiper-coverflow .tp-slide .tp-container{position:relative;z-index:5;pointer-events:auto} /* Hero swiper fills the hero section; stats bar sits outside hero */ /* ═══════════════════════════════════════════════════════════════ FLIGHT ENQUIRY WIDGET — modern redesign ═══════════════════════════════════════════════════════════════ */ /* Section — genuinely visible full-width gradient backdrop (mint → warm cream diagonal) with decorative glows. Kept light enough that the dark heading/lead text above and the white form card stay fully readable. */ .tp-flt-section{position:relative;padding:5rem 0 5.5rem;background:linear-gradient(120deg,#e6f3ec 0%,#d9ecdf 30%,#eef4e2 62%,#fbf1d9 100%);overflow:hidden} .tp-flt-section::before{content:'';position:absolute;top:-120px;right:-120px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(45,106,79,.16) 0%,rgba(45,106,79,0) 70%);pointer-events:none} .tp-flt-section::after{content:'';position:absolute;bottom:-140px;left:-140px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(212,160,23,.16) 0%,rgba(212,160,23,0) 70%);pointer-events:none} .tp-flt-section .tp-section-header{margin-bottom:2.25rem;position:relative;z-index:1} /* Card — glass-edged, floating card with gradient top border */ /* Same reasoning as the flight-finder card above: this card sits on a pastel gradient that's noticeably darker/greener on one side than the other, so a dark-only shadow reads as "cut off" on the darker side. Strengthened the dark layers a bit and added a thin near-white ring so the card stays visibly separated no matter which part of the gradient is behind it. */ .tp-flt-card{background:var(--tp-white);border-radius:26px;box-shadow:0 30px 60px -10px rgba(0,0,0,.32),0 8px 20px rgba(0,0,0,.16),0 0 28px rgba(255,255,255,.5);padding:2.25rem 2.25rem 2rem;max-width:920px;margin:0 auto;position:relative;z-index:1} /* Same mask technique as .tp-why-card::before: draw the bar as a full-size copy of the card's own box (inset:0, matching 26px radius) and reveal only the top 4px via mask, instead of rounding a literal 4px-tall box (whose radius gets clamped and no longer matches the card's real corner curve — the cause of the bar appearing to float above the card with visible gaps). */ .tp-flt-card::before{content:'';position:absolute;inset:0;border-radius:26px;background:linear-gradient(90deg,var(--tp-primary) 0%,var(--tp-accent) 50%,var(--tp-primary) 100%);background-size:200% 100%;animation:tp-flt-topbar-flow 6s linear infinite;-webkit-mask-image:linear-gradient(#000,#000);-webkit-mask-size:100% 4px;-webkit-mask-repeat:no-repeat;-webkit-mask-position:top;mask-image:linear-gradient(#000,#000);mask-size:100% 4px;mask-repeat:no-repeat;mask-position:top} @keyframes tp-flt-topbar-flow{0%{background-position:0% 0}100%{background-position:200% 0}} /* Trip tabs — pill switch with sliding indicator */ .tp-flt-tabs{position:relative;display:flex;gap:4px;margin-bottom:1.85rem;padding:4px;background:var(--tp-gray-100);border-radius:var(--tp-r-full);width:fit-content} .tp-flt-tab-indicator{position:absolute;top:4px;left:0;background:var(--tp-primary);border-radius:var(--tp-r-full);box-shadow:0 4px 14px rgba(45,106,79,.32);transition:transform .35s cubic-bezier(.65,0,.35,1),width .35s cubic-bezier(.65,0,.35,1);opacity:0;z-index:0} .tp-flt-tab-indicator.is-ready{opacity:1} .tp-flt-tab{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.45rem;padding:.5rem 1.15rem;border:none;border-radius:var(--tp-r-full);font-size:.8rem;font-weight:600;font-family:var(--tp-font);cursor:pointer;background:transparent;color:var(--tp-gray-500);letter-spacing:.03em;transition:color var(--tp-t)} .tp-flt-tab.active{color:var(--tp-white)} /* Route block (joined From / To) — soft-filled, rounded */ .tp-flt-route-block{display:flex;align-items:stretch;margin-bottom:1.1rem;border:1.5px solid var(--tp-gray-200);border-radius:18px;overflow:visible;position:relative;background:var(--tp-gray-50,#f8faf9);transition:border-color var(--tp-t),box-shadow var(--tp-t)} /* Decorative animated flight path drawn between FROM and TO, behind the swap button. Plain HTML/CSS (not a stretched SVG viewBox) so the plane icon keeps its real proportions. */ .tp-flt-route-path{position:absolute;left:10%;right:10%;top:50%;height:14px;transform:translateY(-50%);z-index:2;pointer-events:none} .tp-flt-route-path__line{position:absolute;left:0;right:0;top:50%;border-top:1.5px dashed var(--tp-gray-300);transform:translateY(-50%)} .tp-flt-route-path__plane{position:absolute;top:50%;left:0;display:flex;align-items:center;justify-content:center;color:var(--tp-accent);transform:translate(-50%,-50%) rotate(90deg);animation:tp-flt-plane-fly 4.5s ease-in-out infinite} @keyframes tp-flt-plane-fly{ 0%{left:0%;opacity:0} 8%{opacity:1} 92%{opacity:1} 100%{left:100%;opacity:0} } @media(max-width:700px){.tp-flt-route-path{display:none}} .tp-flt-route-block:focus-within{border-color:var(--tp-primary);box-shadow:0 0 0 4px var(--tp-primary-light)} .tp-flt-route-half{flex:1;padding:1.05rem 1.35rem .85rem;position:relative;min-width:0} .tp-flt-from-half{border-right:1.5px solid var(--tp-gray-200)} .tp-flt-route-label{display:flex;align-items:center;gap:.4rem;font-size:.66rem;font-weight:700;font-family:var(--tp-font);letter-spacing:.12em;color:var(--tp-gray-500);margin-bottom:.35rem;text-transform:uppercase} .tp-flt-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} .tp-flt-dot--from{background:var(--tp-primary);box-shadow:0 0 0 3px var(--tp-primary-light)} .tp-flt-dot--to{background:var(--tp-accent);box-shadow:0 0 0 3px var(--tp-accent-light)} .tp-flt-route-input{width:100%;border:none;outline:none;font-size:1.05rem;font-weight:700;font-family:var(--tp-font);color:var(--tp-dark);background:transparent;padding:0;caret-color:var(--tp-primary);letter-spacing:-.01em} .tp-flt-route-input::placeholder{color:var(--tp-gray-300);font-weight:400;font-size:.925rem} .tp-flt-route-input.tp-err::placeholder{color:#fca5a5} .tp-flt-route-sub{font-size:.72rem;color:var(--tp-gray-500);margin-top:.3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1em} /* Swap button — floating circular, gradient on hover */ .tp-flt-swap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:10;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--tp-gray-200);background:var(--tp-white);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tp-gray-500);box-shadow:0 4px 14px rgba(15,45,32,.12);transition:all var(--tp-t)} .tp-flt-swap:hover{background:linear-gradient(135deg,var(--tp-primary),var(--tp-primary-mid,var(--tp-primary)));color:var(--tp-white);border-color:var(--tp-primary);box-shadow:0 6px 20px rgba(45,106,79,.35);transform:translate(-50%,-50%) scale(1.08)} .tp-flt-swap--spin{animation:tp-swap-spin .4s ease} @keyframes tp-swap-spin{0%{transform:translate(-50%,-50%) rotate(0)}100%{transform:translate(-50%,-50%) rotate(180deg)}} /* Airport dropdown */ .tp-airport-wrap{position:relative} .tp-airport-dropdown{position:absolute;top:calc(100% + 10px);left:-1.35rem;right:-1.35rem;background:var(--tp-white);border:1px solid var(--tp-gray-200);border-radius:16px;box-shadow:0 20px 48px -8px rgba(15,45,32,.22);z-index:9999;overflow:hidden;max-height:0;opacity:0;pointer-events:none;transition:max-height .2s ease,opacity .15s ease} .tp-airport-dropdown.open{max-height:280px;opacity:1;pointer-events:auto;overflow-y:auto} .tp-ac-item{display:flex;align-items:center;gap:.7rem;padding:.65rem 1.1rem;cursor:pointer;transition:background var(--tp-t)} .tp-ac-item:hover,.tp-ac-item.focused{background:var(--tp-primary-light)} .tp-ac-code{font-size:.72rem;font-weight:800;font-family:var(--tp-font);color:var(--tp-primary);background:var(--tp-primary-light);border-radius:8px;padding:.2rem .5rem;flex-shrink:0;min-width:38px;text-align:center;letter-spacing:.03em} .tp-ac-body{display:flex;flex-direction:column;min-width:0} .tp-ac-city{font-size:.875rem;font-weight:600;font-family:var(--tp-font);color:var(--tp-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tp-ac-name{font-size:.7rem;color:var(--tp-gray-500);font-family:var(--tp-font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Details row */ .tp-flt-details-row{display:flex;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap} .tp-flt-field{flex:1;min-width:130px;display:flex;flex-direction:column;gap:.35rem} .tp-flt-label{display:flex;align-items:center;gap:.35rem;font-size:.66rem;font-weight:700;font-family:var(--tp-font);letter-spacing:.1em;color:var(--tp-gray-500);text-transform:uppercase} .tp-flt-input{padding:.68rem .95rem;border:1.5px solid var(--tp-gray-200);border-radius:12px;font-size:.875rem;font-family:var(--tp-font);color:var(--tp-dark);background:var(--tp-gray-50,#f8faf9);transition:border-color var(--tp-t),box-shadow var(--tp-t),background var(--tp-t);box-sizing:border-box;width:100%} .tp-flt-input:focus{outline:none;border-color:var(--tp-primary);background:var(--tp-white);box-shadow:0 0 0 4px var(--tp-primary-light)} .tp-flt-input.tp-err{border-color:var(--tp-danger)} .tp-flt-select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;background-size:14px;padding-right:2.2rem;cursor:pointer} /* Passengers counter */ .tp-flt-pax{display:flex;align-items:center;gap:.5rem;border:1.5px solid var(--tp-gray-200);border-radius:12px;padding:.5rem .65rem;background:var(--tp-gray-50,#f8faf9);min-height:42px} .tp-flt-pax-btn{width:26px;height:26px;border:none;background:var(--tp-white);border-radius:8px;font-size:1rem;font-weight:700;font-family:var(--tp-font);cursor:pointer;color:var(--tp-gray-700);display:flex;align-items:center;justify-content:center;line-height:1;transition:all var(--tp-t);flex-shrink:0;box-shadow:0 1px 4px rgba(15,45,32,.12)} .tp-flt-pax-btn:hover{background:var(--tp-primary);color:var(--tp-white)} #tp-pax-display{font-size:.9rem;font-weight:700;font-family:var(--tp-font);color:var(--tp-dark);min-width:14px;text-align:center} .tp-flt-pax-unit{font-size:.75rem;color:var(--tp-gray-500);font-family:var(--tp-font);font-weight:500;flex:1} /* Contact row */ .tp-flt-contact-row{display:flex;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap} .tp-flt-contact-row .tp-flt-field{flex:1;min-width:200px} /* Bottom row */ .tp-flt-bottom-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding-top:.5rem;border-top:1px dashed var(--tp-gray-200);margin-top:.25rem} /* Urgent */ .tp-flt-urgent{display:flex;align-items:center;gap:.55rem;cursor:pointer;padding:.6rem .9rem;border:1.5px solid var(--tp-gray-200);border-radius:12px;flex:1;min-width:200px;transition:all var(--tp-t);user-select:none;background:var(--tp-gray-50,#f8faf9)} .tp-flt-urgent input[type=checkbox]{position:absolute;opacity:0;width:0;height:0} .tp-flt-urgent-checkbox{width:18px;height:18px;border:2px solid var(--tp-gray-300);border-radius:5px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all var(--tp-t);background:var(--tp-white)} .tp-flt-urgent-checkbox svg{opacity:0;transition:opacity .15s;color:var(--tp-white)} .tp-flt-urgent input:checked ~ .tp-flt-urgent-checkbox{background:var(--tp-danger);border-color:var(--tp-danger)} .tp-flt-urgent input:checked ~ .tp-flt-urgent-checkbox svg{opacity:1} .tp-flt-urgent.is-urgent{border-color:var(--tp-danger);background:#fff5f5} .tp-flt-urgent-label{font-size:.85rem;font-family:var(--tp-font);color:var(--tp-gray-700)} .tp-flt-urgent.is-urgent .tp-flt-urgent-label{color:var(--tp-danger)} /* Submit — gradient WhatsApp CTA with a sheen sweep on hover */ .tp-flt-submit{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.55rem;background:linear-gradient(135deg,#25D366 0%,#1ebe5d 100%);color:var(--tp-white);border:none;border-radius:var(--tp-r-full);padding:.75rem 1.75rem;font-size:.9rem;font-weight:700;font-family:var(--tp-font);cursor:pointer;white-space:nowrap;transition:box-shadow var(--tp-t),transform var(--tp-t);box-shadow:0 8px 22px rgba(37,211,102,.32)} .tp-flt-submit::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.5) 50%,transparent 100%);transform:skewX(-20deg);transition:transform .7s cubic-bezier(.16,1,.3,1)} .tp-flt-submit:hover::after{transform:translateX(340%) skewX(-20deg)} .tp-flt-submit svg{position:relative;z-index:1;transition:transform var(--tp-t)} .tp-flt-submit span,.tp-flt-submit{z-index:0} .tp-flt-submit:hover svg{transform:rotate(-8deg) scale(1.08)} .tp-flt-submit:hover{box-shadow:0 10px 28px rgba(37,211,102,.42);transform:translateY(-2px)} .tp-flt-submit:active{transform:translateY(0)} .tp-flt-submit:disabled{opacity:.6;cursor:wait;transform:none} .tp-flt-submit:disabled::after{display:none} /* Spinner */ @keyframes tp-spin-r{to{transform:rotate(360deg)}} .tp-spin-ico{display:inline-block;animation:tp-spin-r .7s linear infinite;font-size:1rem;line-height:1} /* Responsive */ @media(max-width:680px){ .tp-flt-card{padding:1.5rem 1.25rem} .tp-flt-route-block{flex-direction:column;border-radius:16px} .tp-flt-from-half{border-right:none;border-bottom:1.5px solid var(--tp-gray-200)} .tp-flt-swap{position:relative;left:auto;top:auto;transform:none;margin:-19px auto;z-index:10;rotate:90deg} .tp-flt-swap--spin{animation:none} .tp-flt-details-row,.tp-flt-contact-row{flex-wrap:wrap} .tp-flt-field{min-width:calc(50% - .35rem)} .tp-flt-contact-row .tp-flt-field{min-width:100%} .tp-flt-bottom-row{flex-direction:column;align-items:stretch} .tp-flt-urgent,.tp-flt-submit{width:100%;justify-content:center} } /* ================================================================ BLOG — Hero, Category Filter, Cards, Pagination, CTA ================================================================ */ /* ── Blog hero banner (full-width with image or gradient) ── */ .tp-blog-hero-banner{position:relative;height:52vh;min-height:320px;max-height:520px;display:flex;align-items:center;overflow:hidden} .tp-blog-hero-banner__bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;transform:scale(1.03);transition:transform 8s ease} .tp-blog-hero-banner--has-img:hover .tp-blog-hero-banner__bg{transform:scale(1)} .tp-blog-hero-banner__bg--gradient{background:linear-gradient(135deg,#1B4332 0%,#2D6A4F 40%,#40916C 70%,#1B4332 100%)} .tp-blog-hero-banner__overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(0,0,0,.72) 0%,rgba(0,0,0,.4) 60%,rgba(0,0,0,.15) 100%)} .tp-blog-hero-banner--default .tp-blog-hero-banner__overlay{background:linear-gradient(to right,rgba(0,0,0,.55) 0%,rgba(0,0,0,.25) 100%)} .tp-blog-hero-banner__container{position:relative;z-index:2;width:100%} .tp-blog-hero-banner__inner{max-width:640px} .tp-blog-hero-banner__eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tp-accent);background:rgba(255,255,255,.1);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15);padding:.3rem .875rem;border-radius:var(--tp-r-full);margin-bottom:1.125rem} .tp-blog-hero-banner__title{font-size:clamp(1.75rem,4.5vw,3rem);font-weight:800;line-height:1.12;color:#fff;letter-spacing:-.03em;margin:0 0 1rem;text-shadow:0 2px 20px rgba(0,0,0,.3)} .tp-blog-hero-banner__sub{font-size:1rem;color:rgba(255,255,255,.8);line-height:1.75;margin:0;max-width:520px;text-shadow:0 1px 8px rgba(0,0,0,.2)} @media(max-width:768px){ .tp-blog-hero-banner{height:44vh;min-height:260px} .tp-blog-hero-banner__title{font-size:clamp(1.4rem,7vw,2.2rem)} .tp-blog-hero-banner__sub{font-size:.9rem} .tp-blog-hero-banner__overlay{background:linear-gradient(to bottom,rgba(0,0,0,.3) 0%,rgba(0,0,0,.7) 100%)} } /* Old simple hero (kept for backward compat) */ .tp-blog-hero{padding:4rem 0 2.5rem;background:var(--tp-white)} .tp-blog-hero__inner{max-width:640px} /* Category filter pills — sits flush under the hero */ .tp-blog-cats{padding:.875rem 0 0;border-bottom:1px solid var(--tp-gray-200);margin-bottom:2rem;background:var(--tp-white);box-shadow:0 2px 8px rgba(0,0,0,.05)} .tp-blog-cats__inner{display:flex;gap:.5rem;flex-wrap:wrap;padding-bottom:.75rem} .tp-blog-cat-btn{display:inline-flex;align-items:center;gap:.375rem;padding:.35rem 1rem;font-size:.78rem;font-weight:600;border-radius:var(--tp-r-full);border:1.5px solid var(--tp-gray-200);color:var(--tp-gray-700);background:var(--tp-white);text-decoration:none;transition:all var(--tp-t);cursor:pointer} .tp-blog-cat-btn:hover,.tp-blog-cat-btn.active{background:var(--tp-primary);border-color:var(--tp-primary);color:#fff!important} .tp-blog-cat-count{background:var(--tp-gray-100);color:var(--tp-gray-500);border-radius:var(--tp-r-full);padding:.1rem .45rem;font-size:.7rem;font-weight:700} .tp-blog-cat-btn.active .tp-blog-cat-count,.tp-blog-cat-btn:hover .tp-blog-cat-count{background:rgba(255,255,255,.25);color:#fff} /* Blog meta row inside card */ .tp-blog-meta-row{display:flex;align-items:center;gap:.625rem;font-size:.78rem;color:var(--tp-gray-500);margin-bottom:.625rem} .tp-blog-meta-row svg{flex-shrink:0;opacity:.7} /* Dummy notice banner */ .tp-blog-dummy-notice{background:var(--tp-accent-light);border:1px solid var(--tp-accent);border-radius:var(--tp-r);padding:.875rem 1.25rem;margin-bottom:2rem;display:flex;align-items:flex-start;gap:.625rem} .tp-blog-dummy-notice p{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--tp-accent-dark);margin:0;font-weight:500} .tp-blog-placeholder-label{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tp-gray-400);padding:.25rem .75rem;border:1.5px dashed var(--tp-gray-300);border-radius:var(--tp-r-full)} /* Dummy card subtle overlay */ .tp-scard--dummy{opacity:.85} .tp-scard--dummy .tp-scard__img-link{cursor:default;pointer-events:none} /* Pagination */ .tp-blog-pagination{display:flex;justify-content:center;gap:.5rem;margin-top:3rem;flex-wrap:wrap} .tp-blog-page-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--tp-r-full);border:1.5px solid var(--tp-gray-200);font-size:.875rem;font-weight:600;color:var(--tp-gray-700);text-decoration:none;transition:all var(--tp-t)} .tp-blog-page-btn:hover,.tp-blog-page-btn.active{background:var(--tp-primary);border-color:var(--tp-primary);color:#fff!important} /* Blog CTA strip */ .tp-blog-cta-strip{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;background:var(--tp-white);border-radius:var(--tp-r-xl);padding:2.5rem 3rem;box-shadow:var(--tp-sh-lg);border:1px solid var(--tp-gray-200)} .tp-blog-cta-strip__left{flex:1;min-width:220px} .tp-blog-cta-strip__right{display:flex;gap:1rem;flex-wrap:wrap;flex-shrink:0} @media(max-width:768px){ .tp-blog-cta-strip{padding:1.75rem;flex-direction:column;align-items:flex-start} .tp-blog-cta-strip__right{width:100%} .tp-blog-cta-strip__right .tp-btn{flex:1;justify-content:center} .tp-blog-cats__inner{gap:.375rem} .tp-blog-cat-btn{font-size:.72rem;padding:.28rem .75rem} } /* ================================================================ HERO — Mobile Optimisation ================================================================ */ @media(max-width:768px){ /* Taller floor than before so text never gets clipped by the fixed-height slide container (Swiper needs an explicit height on its container, so we keep a height + a generous min-height floor rather than "auto"). */ .tp-hero{height:68vh;min-height:460px} /* Slide content: tighter padding, full width */ .tp-slide__content{padding:1.25rem 0;max-width:100%} /* Badge: smaller so it doesn't eat vertical space */ .tp-hero-badge{font-size:.65rem;padding:.3rem .875rem;margin-bottom:1.125rem!important} /* Title: smaller clamp floor for very small screens, capped at 3 lines */ .tp-slide__h1{ font-size:clamp(1.35rem,6vw,2.1rem); margin-bottom:.75rem; text-shadow:0 2px 16px rgba(0,0,0,.5); display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; } /* Sub: smaller, tighter bottom margin, capped at 3 lines so long copy never overflows the hero container */ .tp-slide__sub{ font-size:.88rem; margin-bottom:1.25rem; line-height:1.55; text-shadow:0 1px 8px rgba(0,0,0,.4); display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; } /* Buttons: stack on very small screens */ .tp-slide__actions{gap:.625rem} .tp-slide__actions .tp-btn{flex:1;min-width:0;justify-content:center;font-size:.8rem;padding:.65rem 1rem} /* Ensure overlay always provides enough contrast */ .tp-slide__overlay{min-opacity:.45} /* Navigation arrows: hide on mobile (swipe instead) */ .tp-hero-prev,.tp-hero-next{display:none} /* Pagination dots: smaller and closer to bottom */ .tp-hero-pagination{bottom:.75rem!important} } @media(max-width:480px){ .tp-hero{min-height:420px} .tp-slide__h1{font-size:clamp(1.2rem,7vw,1.8rem)} .tp-slide__sub{font-size:.82rem;-webkit-line-clamp:2} /* Stack buttons vertically on very small phones */ .tp-slide__actions{flex-direction:column} .tp-slide__actions .tp-btn{width:100%} } /* Ensure hero animation elements are always visible (fallback if js-anim-ready is added but tpAnimateSlide doesn't fire) */ .tp-hero-animate-title:not(.js-anim-ready .tp-hero-animate-title), .tp-hero-animate-sub:not(.js-anim-ready .tp-hero-animate-sub), .tp-hero-animate-btns:not(.js-anim-ready .tp-hero-animate-btns){ opacity:1!important; transform:none!important; } /* Also force visible on mobile regardless of animation state */ @media(max-width:768px){ .tp-hero-animate-title, .tp-hero-animate-sub, .tp-hero-animate-btns{ opacity:1!important; transform:none!important; transition:none!important; } } /* ================================================================ SINGLE BLOG POST ================================================================ */ /* ── Hero ── */ .tp-post-hero{position:relative;height:70vh;min-height:480px;display:flex;align-items:flex-end;overflow:hidden} .tp-post-hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;transform:scale(1.03);transition:transform 8s ease} .tp-post-hero__bg--default{background:linear-gradient(145deg,#1B4332 0%,#2D6A4F 50%,#0D2818 100%)} .tp-post-hero__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.45) 50%,rgba(0,0,0,.15) 100%)} .tp-post-hero__container{position:relative;z-index:2;padding-bottom:3.5rem;width:100%} .tp-post-hero__content{max-width:820px} /* Breadcrumb */ .tp-post-hero__breadcrumb{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:rgba(255,255,255,.65);margin-bottom:1rem;flex-wrap:wrap} .tp-post-hero__breadcrumb a{color:rgba(255,255,255,.75);text-decoration:none;transition:color var(--tp-t)} .tp-post-hero__breadcrumb a:hover{color:#fff} /* Category badge */ .tp-post-hero__badge{display:inline-block;background:var(--tp-accent);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.28rem .875rem;border-radius:var(--tp-r-full);margin-bottom:1rem} /* Title */ .tp-post-hero__title{font-size:clamp(1.75rem,4.5vw,3.25rem);font-weight:800;line-height:1.12;color:#fff;letter-spacing:-.03em;margin:0 0 1.25rem;text-shadow:0 2px 24px rgba(0,0,0,.3)} /* Meta row */ .tp-post-hero__meta{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem;font-size:.85rem;color:rgba(255,255,255,.75)} .tp-post-hero__meta svg{flex-shrink:0;vertical-align:middle} .tp-post-hero__meta-sep{opacity:.4} /* Scroll indicator */ .tp-post-hero__scroll{position:absolute;bottom:1.25rem;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.5);animation:tp-bob 2s ease-in-out infinite;z-index:2} @keyframes tp-bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}} /* ── Post body layout ── */ .tp-post-wrap{padding:4rem 0} .tp-post-layout{display:grid;grid-template-columns:1fr 320px;gap:3.5rem;align-items:start} /* ── Article prose ── */ .tp-post-content{min-width:0} .tp-post-content.tp-prose h2{font-size:clamp(1.3rem,3vw,1.75rem);font-weight:700;color:var(--tp-dark);margin:2.5rem 0 1rem;letter-spacing:-.02em} .tp-post-content.tp-prose h3{font-size:clamp(1.1rem,2.5vw,1.4rem);font-weight:700;color:var(--tp-dark);margin:2rem 0 .75rem} .tp-post-content.tp-prose p{margin-bottom:1.5rem;line-height:1.85;color:var(--tp-gray-700);font-size:1.05rem} .tp-post-content.tp-prose ul,.tp-post-content.tp-prose ol{padding-left:1.5rem;margin-bottom:1.5rem} .tp-post-content.tp-prose li{margin-bottom:.5rem;line-height:1.75;color:var(--tp-gray-700)} .tp-post-content.tp-prose a{color:var(--tp-primary);text-decoration:underline;text-underline-offset:3px} .tp-post-content.tp-prose a:hover{color:var(--tp-primary-dark)} .tp-post-content.tp-prose img{max-width:100%;height:auto;border-radius:var(--tp-r-lg);margin:2rem 0} .tp-post-content.tp-prose blockquote{border-left:4px solid var(--tp-primary);margin:2rem 0;padding:.75rem 1.5rem;background:var(--tp-primary-light);border-radius:0 var(--tp-r) var(--tp-r) 0;font-style:italic;color:var(--tp-primary-dark)} .tp-post-content.tp-prose code{background:var(--tp-gray-100);padding:.15rem .4rem;border-radius:4px;font-size:.88em;font-family:monospace} .tp-post-content.tp-prose pre{background:var(--tp-dark);color:#e5e5e5;padding:1.25rem 1.5rem;border-radius:var(--tp-r);overflow-x:auto;margin-bottom:1.5rem} /* ── Tags ── */ .tp-post-tags{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin:2.5rem 0;padding-top:2rem;border-top:1px solid var(--tp-gray-200)} .tp-post-tags svg{flex-shrink:0;color:var(--tp-gray-500)} .tp-post-tag{display:inline-block;background:var(--tp-gray-100);color:var(--tp-gray-700);font-size:.78rem;font-weight:600;padding:.28rem .875rem;border-radius:var(--tp-r-full);text-decoration:none;transition:all var(--tp-t);border:1.5px solid transparent} .tp-post-tag:hover{background:var(--tp-primary-light);color:var(--tp-primary)!important;border-color:var(--tp-primary)} /* ── Share ── */ .tp-post-share{display:flex;align-items:center;flex-wrap:wrap;gap:.625rem;margin:2rem 0} .tp-post-share__label{font-size:.82rem;font-weight:700;color:var(--tp-gray-500);text-transform:uppercase;letter-spacing:.1em} .tp-post-share__btn{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem 1rem;border-radius:var(--tp-r-full);font-size:.8rem;font-weight:600;text-decoration:none;transition:all var(--tp-t);border:1.5px solid transparent} .tp-post-share__btn--fb{background:#1877f2;color:#fff!important} .tp-post-share__btn--fb:hover{background:#0d65d9;color:#fff!important} .tp-post-share__btn--wa{background:#25d366;color:#fff!important} .tp-post-share__btn--wa:hover{background:#1db954;color:#fff!important} .tp-post-share__btn--tw{background:#000;color:#fff!important} .tp-post-share__btn--tw:hover{background:#333;color:#fff!important} /* ── Author card ── */ .tp-post-author-card{display:flex;align-items:center;gap:1.25rem;padding:1.5rem;background:var(--tp-surface);border-radius:var(--tp-r-lg);margin:2.5rem 0;border:1px solid var(--tp-gray-200)} .tp-post-author-card__avatar{flex-shrink:0} .tp-post-author-card__img{width:56px;height:56px;border-radius:50%;object-fit:cover} .tp-post-author-card__name{font-size:.95rem;font-weight:700;color:var(--tp-dark);margin-bottom:.25rem} .tp-post-author-card__bio{font-size:.85rem;color:var(--tp-gray-500);line-height:1.6} /* ── Post navigation ── */ .tp-post-nav{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem;padding-top:2rem;border-top:1px solid var(--tp-gray-200)} .tp-post-nav__item{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;border-radius:var(--tp-r-lg);border:1.5px solid var(--tp-gray-200);text-decoration:none;transition:all var(--tp-t);color:var(--tp-gray-700)} .tp-post-nav__item:hover{border-color:var(--tp-primary);background:var(--tp-primary-light);color:var(--tp-primary)!important} .tp-post-nav__item--next{text-align:right;flex-direction:row-reverse} .tp-post-nav__label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--tp-gray-500);margin-bottom:.25rem} .tp-post-nav__title{font-size:.88rem;font-weight:600;color:var(--tp-dark);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .tp-post-nav__item:hover .tp-post-nav__title{color:var(--tp-primary)} /* ── Sidebar ── */ .tp-post-sidebar{position:sticky;top:100px;display:flex;flex-direction:column;gap:1.5rem} .tp-post-sidebar__back{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:600;color:var(--tp-primary);text-decoration:none;padding:.5rem 0;transition:gap var(--tp-t)} .tp-post-sidebar__back:hover{gap:.75rem;color:var(--tp-primary-dark)!important} /* Sidebar CTA card */ .tp-post-sidebar__cta{background:var(--tp-primary-dark);border-radius:var(--tp-r-lg);padding:1.5rem;color:#fff} .tp-post-sidebar__cta-icon{width:48px;height:48px;background:rgba(255,255,255,.12);border-radius:var(--tp-r);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;color:#fff} .tp-post-sidebar__cta-title{font-size:1.1rem;font-weight:700;color:#fff;margin:0 0 .5rem} .tp-post-sidebar__cta-text{font-size:.85rem;color:rgba(255,255,255,.75);line-height:1.6;margin:0 0 1.25rem} .tp-post-sidebar__cta .tp-btn-primary{background:var(--tp-accent);border-color:var(--tp-accent);color:var(--tp-dark)!important} .tp-post-sidebar__cta .tp-btn-primary:hover{background:var(--tp-accent-dark);border-color:var(--tp-accent-dark)} .tp-post-sidebar__cta .tp-btn-outline{border-color:rgba(255,255,255,.3);color:#fff!important} .tp-post-sidebar__cta .tp-btn-outline:hover{background:rgba(255,255,255,.1);border-color:#fff} /* Sidebar recent posts */ .tp-post-sidebar__recent{background:var(--tp-white);border:1px solid var(--tp-gray-200);border-radius:var(--tp-r-lg);overflow:hidden} .tp-post-sidebar__section-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--tp-accent);padding:1rem 1.25rem .625rem;border-bottom:1px solid var(--tp-gray-100);margin:0} .tp-post-sidebar__recent-item{display:flex;gap:.875rem;padding:.875rem 1.25rem;border-bottom:1px solid var(--tp-gray-100);text-decoration:none;transition:background var(--tp-t);align-items:center} .tp-post-sidebar__recent-item:last-child{border-bottom:none} .tp-post-sidebar__recent-item:hover{background:var(--tp-gray-100)} .tp-post-sidebar__recent-img{width:56px;height:56px;border-radius:var(--tp-r);overflow:hidden;flex-shrink:0} .tp-post-sidebar__recent-img img{width:100%;height:100%;object-fit:cover} .tp-post-sidebar__recent-placeholder{width:100%;height:100%;background:var(--tp-primary-light);display:flex;align-items:center;justify-content:center;color:var(--tp-primary)} .tp-post-sidebar__recent-body{min-width:0} .tp-post-sidebar__recent-cat{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--tp-accent);margin-bottom:.2rem;display:block} .tp-post-sidebar__recent-title{font-size:.82rem;font-weight:600;color:var(--tp-dark);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:.2rem} .tp-post-sidebar__recent-date{font-size:.72rem;color:var(--tp-gray-500)} /* ── Mobile: single post ── */ @media(max-width:900px){ .tp-post-layout{grid-template-columns:1fr} .tp-post-sidebar{position:static} } @media(max-width:768px){ .tp-post-hero{height:55vh;min-height:320px;align-items:flex-end} .tp-post-hero__title{font-size:clamp(1.4rem,6vw,2.2rem)} .tp-post-hero__container{padding-bottom:2rem} .tp-post-hero__meta{font-size:.78rem;gap:.5rem} .tp-post-wrap{padding:2.5rem 0} .tp-post-nav{grid-template-columns:1fr} .tp-post-author-card{flex-direction:column;text-align:center} } /* ══════════════════════════════════════ SPECIAL FARES MARQUEE ══════════════════════════════════════ */ /* This section sits directly below the floating .tp-flight-finder card, which is pulled out of normal document flow (position:absolute, translateY(50%) off the hero) and overlaps down into whatever comes next with zero effect on sibling margins. The base .tp-section top padding alone isn't enough clearance once that overlap is accounted for, which is what made this section read as cramped against the floating card above it — so it gets extra top padding of its own here rather than changing the shared .tp-section rule used everywhere else. */ .tp-fares-section{padding-top:10rem} @media(max-width:768px){.tp-fares-section{padding-top:9rem}} .tp-fares-marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)} .tp-fares-marquee__track{display:flex;gap:1.35rem;width:max-content} .tp-fares-marquee__group{display:flex;gap:1.35rem;flex-shrink:0} .tp-fares-marquee.is-marquee .tp-fares-marquee__track{animation:tp-fares-scroll var(--tp-marquee-duration,30s) linear infinite} .tp-fares-marquee.is-marquee:hover .tp-fares-marquee__track{animation-play-state:paused} .tp-fares-marquee:not(.is-marquee) .tp-fares-marquee__track{justify-content:center;width:100%} .tp-fares-marquee:not(.is-marquee) .tp-fares-marquee__group[aria-hidden="true"]{display:none} @keyframes tp-fares-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion: reduce){.tp-fares-marquee.is-marquee .tp-fares-marquee__track{animation:none}} /* Boarding-pass style fare card: a colour-blocked header stub (airline identity) is visually torn from the fare details below it via a perforation line with punched-out circular notches, mimicking a real ticket stub. Card itself has no padding — .tp-fare-card__head and .tp-fare-card__body each own their own padding so the header can run full-bleed edge-to-edge behind the rounded top corners. */ .tp-fare-card{ position:relative; min-width:270px;max-width:282px; background:var(--tp-white); border:1px solid var(--tp-gray-200); border-radius:20px; box-shadow:0 4px 18px rgba(13,27,15,.08); padding:0; display:flex;flex-direction:column; transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s cubic-bezier(.16,1,.3,1),border-color .4s ease; } .tp-fare-card:hover{ transform:translateY(-7px); box-shadow:0 24px 46px -14px rgba(13,27,15,.24); border-color:var(--tp-primary-light); } /* Header stub: gradient banner + logo badge + airline name */ .tp-fare-card__head{ position:relative;overflow:hidden; display:flex;align-items:center;gap:.65rem; padding:1rem 1.15rem; background:linear-gradient(135deg,var(--tp-primary) 0%,var(--tp-primary-dark) 100%); border-radius:19px 19px 0 0; } /* Soft decorative glow, top-right — echoes the same treatment used on the flight-finder card just above this section, so the two feel like one consistent visual family rather than two unrelated components. */ .tp-fare-card__head::after{ content:'';position:absolute;top:-32px;right:-28px;width:96px;height:96px; border-radius:50%;background:rgba(255,255,255,.14);pointer-events:none; } .tp-fare-card__logo{ position:relative;z-index:1;flex-shrink:0;width:36px;height:36px;border-radius:10px; background:#fff;color:var(--tp-primary); display:flex;align-items:center;justify-content:center;overflow:hidden; padding:4px;box-shadow:0 2px 6px rgba(0,0,0,.18); } /* object-fit:contain (not cover) shows the whole logo, undistorted and uncropped, shrunk to fit inside the small badge — airline logos are usually wide wordmarks, and "cover" was stretching/cropping them to fill a forced circle. A small rounded-square badge with a touch of padding suits an arbitrary-shaped logo far better than a hard circle. */ .tp-fare-card__logo-img{width:100%;height:100%;object-fit:contain;border-radius:4px} .tp-fare-card__airline{position:relative;z-index:1;font-size:.82rem;font-weight:700;letter-spacing:.02em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Perforation: dashed tear-line with two notches punched into the card's own side edges, coloured to match the page surface behind the card (not the card's own white body) so they read as cut-outs. */ .tp-fare-card__perf{position:relative;margin:0 1.15rem;border-top:1.5px dashed var(--tp-gray-200)} .tp-fare-card__perf::before,.tp-fare-card__perf::after{ content:'';position:absolute;top:-9px;width:18px;height:18px;border-radius:50%; background:var(--tp-surface); } .tp-fare-card__perf::before{left:calc(-1.15rem - 9px)} .tp-fare-card__perf::after{right:calc(-1.15rem - 9px)} .tp-fare-card__body{padding:1.05rem 1.15rem 1.15rem;display:flex;flex-direction:column;gap:.9rem} /* Route row: boarding-pass style with dashed line + rotated plane icon */ .tp-fare-card__route{display:flex;align-items:center;gap:.5rem} .tp-fare-card__stop{display:flex;flex-direction:column;gap:.15rem;min-width:0} .tp-fare-card__stop--to{align-items:flex-end;text-align:right} .tp-fare-card__code{font-size:1.35rem;font-weight:800;color:var(--tp-dark);letter-spacing:-.02em;line-height:1} .tp-fare-card__city{font-size:.68rem;font-weight:500;color:var(--tp-gray-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px} .tp-fare-card__line{ flex:1;position:relative;height:14px;min-width:24px; display:flex;align-items:center;justify-content:center; border-top:1.5px dashed var(--tp-gray-200); } .tp-fare-card__line-icon{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); display:inline-flex;align-items:center;justify-content:center; color:var(--tp-primary);background:var(--tp-white); } /* Date row */ .tp-fare-card__date{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--tp-gray-500)} .tp-fare-card__date-icon{color:var(--tp-primary);flex-shrink:0} /* Footer: price + WhatsApp CTA */ .tp-fare-card__foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding-top:.85rem;border-top:1px dashed var(--tp-gray-200)} .tp-fare-card__price{display:flex;flex-direction:column;gap:.1rem} .tp-fare-card__price-amount{font-size:1.3rem;font-weight:800;color:var(--tp-accent-dark,var(--tp-accent));letter-spacing:-.02em;line-height:1.1} .tp-fare-card__price-note{font-size:.66rem;font-weight:600;color:var(--tp-gray-500);text-transform:lowercase} .tp-fare-card__buy{ flex-shrink:0;display:inline-flex;align-items:center;gap:.35rem;justify-content:center; padding:.55rem 1.05rem;border-radius:var(--tp-r-full); background:linear-gradient(135deg,#25D366,#1DA851);color:#fff;font-weight:700;font-size:.78rem; text-decoration:none;box-shadow:0 4px 10px -2px rgba(37,211,102,.4); transition:background var(--tp-t),transform var(--tp-t),box-shadow var(--tp-t-lg); } .tp-fare-card__buy:hover{background:linear-gradient(135deg,#1DA851,#128C42);color:#fff;transform:translateY(-2px);box-shadow:0 10px 20px -4px rgba(37,211,102,.5)} @media (prefers-reduced-motion: reduce){.tp-fare-card,.tp-fare-card__buy{transition:none}.tp-fare-card:hover,.tp-fare-card__buy:hover{transform:none}} /* ══ JINGLE / MUSIC PLAYER STRIP ══ Deliberately background-less section: it paints nothing of its own so it always shows whatever color/gradient is behind it in the page flow. Every active song (Theme Songs admin) renders as one compact card; all cards sit in a single horizontal strip. If there are more than fit the viewport it scrolls sideways rather than wrapping onto a second row. */ .tp-jingle-section{padding:1.5rem 0 3rem;background:transparent} .tp-jingle-strip{ display:flex;align-items:stretch;justify-content:center;flex-wrap:wrap; gap:1rem; max-width:100%; overflow-x:auto; padding:.25rem; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; } .tp-jingle-strip::-webkit-scrollbar{height:6px} .tp-jingle-strip::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:99px} .tp-jingle{ display:flex;align-items:center;gap:1rem; flex:0 0 auto; scroll-snap-align:start; min-width:260px;max-width:340px; padding:.85rem 1.35rem; border-radius:22px; background:rgba(255,255,255,.35); -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%); border:1px solid rgba(255,255,255,.5); box-shadow:0 8px 28px -12px rgba(13,27,15,.16); user-select:none; } .tp-jingle__play{ flex-shrink:0;width:48px;height:48px;border-radius:50%;border:0;cursor:pointer; display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,var(--tp-primary) 0%,var(--tp-accent) 100%); color:#fff;box-shadow:0 6px 16px -4px rgba(45,106,79,.5); transition:transform var(--tp-t),box-shadow var(--tp-t); } .tp-jingle__play:hover{transform:scale(1.06);box-shadow:0 10px 22px -4px rgba(45,106,79,.6)} .tp-jingle__play:active{transform:scale(.96)} .tp-jingle__icon{width:20px;height:20px} .tp-jingle__icon--play{margin-left:2px} .tp-jingle__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.35rem} .tp-jingle__text{display:flex;flex-direction:column;line-height:1.25} .tp-jingle__title{font-size:.86rem;font-weight:800;color:var(--tp-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tp-jingle__subtitle{font-size:.72rem;font-weight:600;color:var(--tp-gray-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tp-jingle__credentials{font-size:.66rem;font-weight:500;font-style:italic;color:var(--tp-gray-400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tp-jingle__row{display:flex;align-items:center;gap:.6rem} .tp-jingle__bars{ flex:1;display:flex;align-items:center;justify-content:center;gap:2.5px; height:26px;min-width:0;overflow:hidden; } .tp-jingle__bar{ flex:1;max-width:3.5px;min-width:2px;height:100%;border-radius:3px; background:linear-gradient(180deg,var(--tp-accent) 0%,var(--tp-primary) 100%); transform:scaleY(.12);transform-origin:center; transition:transform .12s ease-out; opacity:.85; } .tp-jingle.is-playing .tp-jingle__bar{opacity:1} .tp-jingle__time{ flex-shrink:0;font-size:.72rem;font-weight:700;color:var(--tp-dark); min-width:2.4rem;text-align:right;font-variant-numeric:tabular-nums; opacity:.75; } @media(max-width:480px){ .tp-jingle{min-width:220px;max-width:280px;padding:.7rem 1.1rem;gap:.85rem} .tp-jingle__play{width:44px;height:44px} .tp-jingle__bars{height:22px} } @media (prefers-reduced-motion: reduce){ .tp-jingle__play,.tp-jingle__bar{transition:none} }