/* ═══════════════════════════════════════════════════════════════
hp-shared.css — Heritage Persia | Shared Styles
Used by: airport-transfer, bus-tickets, car-rental, flights,
free-tour, health-tourism, payment (+ future pages)
═══════════════════════════════════════════════════════════════ */
/* ── 1. RESET & ROOT ────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box;}
:root{
--teal:#1de9b6;
--gold:#ffd54f;
--navy:#0c2340;
--bg:#0c2340; /* default dark background */
--text:#e2f8f5; /* default body text */
}
html{scroll-behavior:smooth;}
body{
font-family:'Raleway',sans-serif;
background:var(--bg);
color:var(--text);
min-height:100vh;
}
/* ── 2. FONTS (paste in — do NOT import via @import) ───
─────────────────────────────────────────────────────────────── */
/* ── 3. NAVIGATION ──────────────────────────────────────────── */
/* The page header is now entirely header.html + header.css (loaded after
this file on every page). The old nav/.logo/.nav-back rules that used
to live here have been removed on purpose — not overridden, removed —
so nothing in this file can ever again change how the header looks. */
/* ── 4. SEARCH FORM FIELDS & BUTTON ─────────────────────────── */
/* Used in: airport-transfer, bus-tickets, car-rental, flights */
.s-field label{
display:block;
font-size:0.6rem;letter-spacing:2px;text-transform:uppercase;
color:var(--teal);margin-bottom:.5rem;
}
.s-field select,
.s-field input{
width:100%;
background:rgba(255,255,255,0.04);
border:1px solid rgba(29,233,182,0.2);
border-radius:8px;
padding:11px 12px;
color:var(--text);
font-size:0.85rem;
font-family:'Raleway',sans-serif;
color-scheme:dark;
}
.s-field select option{background:var(--navy);}
.s-btn{
background:var(--teal);
color:#04140f;
border:none;
padding:12px 30px;
border-radius:8px;
font-size:0.7rem;letter-spacing:2px;text-transform:uppercase;
font-weight:700;cursor:pointer;white-space:nowrap;
}
.s-btn:hover{opacity:.9;}
/* ── 5. TRUST ROW (badges under hero) ───────────────────────── */
/* Used in: airport-transfer, bus-tickets, car-rental, flights */
.trust-row{display:flex;flex-wrap:wrap;gap:1rem;margin:0 0 2rem;}
.trust-item{
display:flex;align-items:center;gap:.5rem;
font-size:0.72rem;color:rgba(226,248,245,0.7);
padding:.5rem 1rem;
border:1px solid rgba(29,233,182,0.12);
border-radius:8px;
background:rgba(29,233,182,0.03);
}
.trust-item span{color:var(--teal);}
/* ── 6. SECTION TITLE ───────────────────────────────────────── */
/* Used in: airport-transfer, bus-tickets, car-rental, flights,
free-tour */
.section-title{
font-family:'Cinzel',serif;
font-size:1rem;color:var(--text);
margin:2rem 0 1rem;
display:flex;align-items:center;gap:.5rem;
}
.section-title span{color:var(--teal);}
/* ── 7. INFO CARDS ──────────────────────────────────────────── */
/* Used in: airport-transfer, car-rental, flights */
.info-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:1rem;margin-top:1.5rem;
}
@media(max-width:600px){.info-grid{grid-template-columns:1fr;}}
.info-card{
background:rgba(255,255,255,0.03);
border:1px solid rgba(29,233,182,0.1);
border-radius:12px;
padding:1.1rem 1.3rem;
}
.info-card-title{
font-family:'Cinzel',serif;
font-size:0.82rem;color:var(--teal);margin-bottom:.5rem;
}
.info-card p{
font-size:0.76rem;
color:rgba(226,248,245,0.65);
line-height:1.65;margin:0;
}
/* ── 8. PRIMARY BOOK / CTA BUTTON ──────────────────────────── */
/* Used in: airport-transfer, car-rental */
.book-btn{
display:block;width:100%;max-width:400px;
margin:0 auto 3rem;
background:var(--teal);color:#000;
border:none;padding:16px;border-radius:10px;
font-family:'Cinzel',serif;
font-size:0.88rem;letter-spacing:2px;text-transform:uppercase;
cursor:pointer;font-weight:700;
transition:all .25s;
}
.book-btn:hover{box-shadow:0 0 20px rgba(29,233,182,0.4);}
/* ── 9. RESULT CARD (flights & bus shared layout) ───────────── */
/* Used in: flights, bus-tickets */
.result-card{
display:grid;
grid-template-columns:auto 1fr auto auto;
gap:1.2rem;align-items:center;
background:rgba(255,255,255,0.03);
border:1px solid rgba(29,233,182,0.1);
border-radius:12px;
padding:1.1rem 1.4rem;margin-bottom:.8rem;
transition:border-color .2s;
}
.result-card:hover{border-color:rgba(29,233,182,0.35);}
.r-times{display:flex;align-items:center;gap:.8rem;}
.r-time-block{text-align:center;}
.r-time{font-family:'Cinzel',serif;font-size:1.1rem;color:var(--text);}
.r-city{font-size:0.62rem;color:rgba(226,248,245,0.45);text-transform:uppercase;letter-spacing:1px;}
.r-dur-line{display:flex;flex-direction:column;align-items:center;min-width:80px;}
.r-dur{font-size:0.68rem;color:var(--teal);margin-bottom:.3rem;}
.r-dash{width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(29,233,182,0.4),transparent);}
.r-meta{font-size:0.68rem;color:rgba(226,248,245,0.5);}
.results-meta{font-size:0.76rem;color:rgba(226,248,245,0.5);margin-bottom:1.2rem;}
.empty-state{text-align:center;padding:3rem 1rem;color:rgba(226,248,245,0.4);font-size:0.85rem;}
.trv-note{font-size:0.72rem;color:rgba(226,248,245,0.4);margin-top:1.4rem;line-height:1.7;font-style:italic;}
.r-book{
background:transparent;
border:1px solid var(--teal);color:var(--teal);
padding:8px 16px;border-radius:8px;
font-size:0.62rem;letter-spacing:1.5px;text-transform:uppercase;
cursor:pointer;font-family:'Raleway',sans-serif;
transition:all .2s;
}
.r-book:hover{background:var(--teal);color:#04140f;}
/* ── 10. MAP COLUMN SIDEBAR ─────────────────────────────────── */
/* Used in: flights, bus-tickets */
.map-col{
position:sticky;top:1.4rem;
background:rgba(255,255,255,0.02);
border:1px solid rgba(29,233,182,0.12);
border-radius:16px;padding:1.2rem;
}
.map-title{
font-family:'Cinzel',serif;font-size:0.85rem;
color:var(--text);text-align:center;margin-bottom:.8rem;
}
/* ── 11. VEHICLE CARDS ──────────────────────────────────────── */
/* Used in: airport-transfer, car-rental */
.v-card{
border-radius:14px;
background:rgba(255,255,255,0.03);
border:1px solid rgba(29,233,182,0.15);
padding:1.5rem;text-align:center;
cursor:pointer;transition:all .25s;
}
.v-card:hover,.v-card.selected{
border-color:var(--teal);
background:rgba(29,233,182,0.06);
transform:translateY(-4px);
}
.v-icon{font-size:2.5rem;margin-bottom:.8rem;}
.v-name{font-family:'Cinzel',serif;font-size:1rem;color:var(--text);margin-bottom:.4rem;}
.v-models{font-size:0.72rem;color:rgba(226,248,245,0.5);line-height:1.6;margin-bottom:.8rem;}
.v-cap{font-size:0.74rem;color:rgba(226,248,245,0.65);margin-bottom:.8rem;}
.v-price{font-family:'Cinzel',serif;color:var(--teal);font-size:1.1rem;}
.v-price small{font-family:'Raleway',sans-serif;font-size:0.62rem;color:rgba(226,248,245,0.4);}
/* ── 12. FOOTER ─────────────────────────────────────────────── */
footer{
text-align:center;padding:2rem 5%;
border-top:1px solid rgba(29,233,182,0.1);
}
footer p{font-size:0.72rem;color:rgba(226,248,245,0.35);}
.footer-links{
display:flex;justify-content:center;
gap:2rem;margin-top:.8rem;flex-wrap:wrap;
}
.footer-links a{
font-size:0.65rem;letter-spacing:2px;text-transform:uppercase;
color:rgba(226,248,245,0.4);text-decoration:none;
}
.footer-links a:hover{color:var(--teal);}
/* ═══ UNIFIED LIVE CHAT WIDGET (shared across all pages) ═══ */
/* ═══════════════════════════════════════════════════════════
LIVE CHAT WIDGET
═══════════════════════════════════════════════════════════ */
#chatWidget{
position:fixed; bottom:2rem; right:2rem;
z-index:1400; font-family:'Raleway',sans-serif;
}
/* Floating button */
#chatToggleBtn{
width:58px;height:58px;border-radius:16px;
background:var(--teal);border:none;cursor:pointer;
display:flex;align-items:center;justify-content:center;
box-shadow:0 4px 20px rgba(29,233,182,0.5);
transition:transform .25s,box-shadow .25s;
position:relative;
}
#chatToggleBtn:hover{transform:scale(1.08);box-shadow:0 6px 28px rgba(29,233,182,0.7);}
#chatToggleBtn svg{width:26px;height:26px;fill:#000;}
.chat-notif-dot{
position:absolute;top:2px;right:2px;
width:12px;height:12px;border-radius:50%;
background:#ff4444;border:2px solid #0c2340;
animation:pulseDot 1.5s infinite;
}
@keyframes pulseDot{0%,100%{transform:scale(1);}50%{transform:scale(1.3);}}
/* Chat window */
#chatWindow{
position:absolute;bottom:70px;right:0;
width:340px;background:#0d2440;
border:1px solid rgba(29,233,182,0.25);
border-radius:16px 16px 4px 16px;
box-shadow:0 8px 40px rgba(0,0,0,0.6);
display:none;flex-direction:column;overflow:hidden;
opacity:0;transform:translateY(12px) scale(0.97);
transition:opacity .3s,transform .3s;
}
#chatWindow.open{opacity:1;transform:translateY(0) scale(1);}
/* Header */
.chat-header{
background:linear-gradient(135deg,#0a1e35,#0c2844);
border-bottom:1px solid rgba(29,233,182,0.2);
padding:14px 16px;display:flex;align-items:center;justify-content:space-between;
}
.chat-header-left{display:flex;align-items:center;gap:10px;}
.chat-avatar{
width:38px;height:38px;border-radius:50%;
background:linear-gradient(135deg,var(--teal),#00bcd4);
display:flex;align-items:center;justify-content:center;
font-size:1.1rem;flex-shrink:0;
}
.chat-title{font-family:'Cinzel',serif;font-size:0.82rem;color:#fff;letter-spacing:1px;}
.chat-subtitle{font-size:0.62rem;color:rgba(29,233,182,0.7);margin-top:2px;}
.chat-online{display:flex;align-items:center;gap:4px;font-size:0.6rem;color:rgba(29,233,182,0.8);}
.chat-online-dot{width:7px;height:7px;border-radius:50%;background:#4cff91;animation:pulseDot 2s infinite;}
.chat-close-btn{
background:none;border:none;cursor:pointer;
color:rgba(224,247,245,0.5);font-size:1.1rem;line-height:1;
padding:2px 4px;transition:color .2s;
}
.chat-close-btn:hover{color:var(--teal);}
/* Tab switcher */
.chat-tabs{
display:flex;border-bottom:1px solid rgba(255,255,255,0.06);
}
.chat-tab{
flex:1;padding:9px 0;font-size:0.65rem;letter-spacing:1.5px;
text-transform:uppercase;font-family:'Raleway',sans-serif;
background:none;border:none;cursor:pointer;
color:rgba(224,247,245,0.45);transition:all .2s;
border-bottom:2px solid transparent;
}
.chat-tab.active{color:var(--teal);border-bottom-color:var(--teal);}
.chat-tab:hover{color:rgba(224,247,245,0.75);}
/* Messages area */
.chat-messages{
height:260px;overflow-y:auto;padding:14px 12px;
display:flex;flex-direction:column;gap:10px;
scrollbar-width:thin;scrollbar-color:rgba(29,233,182,0.3) transparent;
}
.chat-messages::-webkit-scrollbar{width:4px;}
.chat-messages::-webkit-scrollbar-thumb{background:rgba(29,233,182,0.3);border-radius:2px;}
.chat-msg{display:flex;gap:8px;align-items:flex-end;}
.chat-msg.user{flex-direction:row-reverse;}
.chat-msg-avatar{
width:26px;height:26px;border-radius:50%;flex-shrink:0;
background:linear-gradient(135deg,var(--teal),#00bcd4);
display:flex;align-items:center;justify-content:center;
font-size:0.7rem;
}
.chat-msg.user .chat-msg-avatar{background:linear-gradient(135deg,#2196f3,#0d47a1);}
.chat-bubble{
max-width:72%;padding:9px 13px;border-radius:14px 14px 14px 3px;
font-size:0.78rem;line-height:1.55;color:rgba(224,247,245,0.9);
background:rgba(255,255,255,0.07);
}
.chat-msg.user .chat-bubble{
background:linear-gradient(135deg,rgba(29,233,182,0.18),rgba(0,188,212,0.15));
border-radius:14px 14px 3px 14px;
border:1px solid rgba(29,233,182,0.2);
}
.chat-time{font-size:0.55rem;color:rgba(224,247,245,0.3);margin-top:3px;display:block;}
/* Quick replies */
.chat-quick-replies{
display:flex;flex-wrap:wrap;gap:6px;
padding:8px 12px;border-top:1px solid rgba(255,255,255,0.04);
}
.quick-reply{
background:rgba(29,233,182,0.08);
border:1px solid rgba(29,233,182,0.2);
color:rgba(29,233,182,0.85);
font-size:0.65rem;letter-spacing:.5px;
padding:5px 10px;cursor:pointer;border-radius:12px;
font-family:'Raleway',sans-serif;transition:all .2s;
}
.quick-reply:hover{background:rgba(29,233,182,0.18);color:var(--teal);}
/* Input bar */
.chat-input-area{
display:flex;align-items:center;gap:8px;
padding:10px 12px;border-top:1px solid rgba(255,255,255,0.06);
}
#chatInput{
flex:1;background:rgba(255,255,255,0.06);
border:1px solid rgba(29,233,182,0.2);
color:#fff;padding:8px 12px;font-size:0.78rem;
font-family:'Raleway',sans-serif;border-radius:20px;outline:none;
transition:border-color .2s;
}
#chatInput::placeholder{color:rgba(224,247,245,0.3);}
#chatInput:focus{border-color:rgba(29,233,182,0.5);}
.chat-send-btn{
width:36px;height:36px;border-radius:50%;background:var(--teal);
border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
transition:all .2s;flex-shrink:0;
}
.chat-send-btn:hover{background:var(--teal2);transform:scale(1.05);}
.chat-send-btn svg{width:16px;height:16px;fill:#000;}
/* WhatsApp panel */
.chat-whatsapp-panel{
padding:20px 16px;text-align:center;
display:none;flex-direction:column;align-items:center;gap:14px;
}
.wa-avatar{
width:64px;height:64px;border-radius:50%;
background:linear-gradient(135deg,#25d366,#128c7e);
display:flex;align-items:center;justify-content:center;
font-size:1.8rem;box-shadow:0 4px 16px rgba(37,211,102,0.4);
}
.wa-name{font-family:'Cinzel',serif;font-size:0.9rem;color:#fff;letter-spacing:1px;}
.wa-desc{font-size:0.72rem;color:rgba(224,247,245,0.55);line-height:1.7;max-width:240px;}
.wa-online{display:flex;align-items:center;justify-content:center;gap:5px;font-size:0.65rem;color:#4cff91;}
.wa-btn{
background:linear-gradient(135deg,#25d366,#128c7e);
border:none;color:#fff;padding:12px 28px;border-radius:24px;
font-size:0.78rem;letter-spacing:1.5px;text-transform:uppercase;
cursor:pointer;font-family:'Raleway',sans-serif;font-weight:600;
display:flex;align-items:center;gap:8px;
box-shadow:0 4px 16px rgba(37,211,102,0.35);
transition:all .25s;text-decoration:none;
}
.wa-btn:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(37,211,102,0.5);}
.wa-separator{
width:100%;display:flex;align-items:center;gap:8px;
font-size:0.6rem;color:rgba(224,247,245,0.3);letter-spacing:2px;text-transform:uppercase;
}
.wa-separator::before,.wa-separator::after{
content:'';flex:1;height:1px;background:rgba(255,255,255,0.06);
}
/* Typing indicator */
.chat-typing{display:none;align-items:center;gap:4px;padding:4px 8px;}
.typing-dot{width:6px;height:6px;border-radius:50%;background:var(--teal);opacity:0.5;
animation:typingBounce .9s infinite;}
.typing-dot:nth-child(2){animation-delay:.15s;}
.typing-dot:nth-child(3){animation-delay:.3s;}
@keyframes typingBounce{0%,60%,100%{transform:translateY(0);}30%{transform:translateY(-6px);}}