/* ============================================
   PREMIUM COMPONENTS — Rio Favela Tour
   Converted from React/styled-components to pure CSS
   ============================================ */

/* ── LIKE BUTTON (Tour cards) ── */
.like-button {
    position: relative; cursor: pointer;
    display: flex; height: 40px; width: 110px;
    border-radius: 12px; border: none;
    background-color: #1d1d1d; overflow: hidden;
    box-shadow: inset -2px -2px 5px rgba(255,255,255,0.2), inset 2px 2px 5px rgba(0,0,0,0.1), 4px 4px 10px rgba(0,0,0,0.4), -2px -2px 8px rgba(255,255,255,0.1);
}
.like-button input[type="checkbox"] { display: none; }
.like-label {
    width: 70%; height: 100%; display: flex; cursor: pointer;
    align-items: center; justify-content: space-evenly;
}
.like-icon { fill: #505050; height: 22px; width: 22px; transition: fill 0.2s ease-out; }
.like-text { color: #fcfcfc; font-size: 13px; font-family: var(--font-sans); }
.like-count {
    position: absolute; right: 0; width: 30%; height: 100%;
    display: flex; justify-content: center; align-items: center;
    color: #717070; font-size: 13px;
    border-left: 2px solid #4e4e4e; transition: all 0.5s ease-out;
}
.like-count.two { transform: translateY(40px); }
.like-checkbox:checked ~ .like-label .like-icon {
    fill: #fc4e4e;
    animation: likeEnlarge 0.2s ease-out 1;
}
.like-checkbox:checked ~ .like-count.two { transform: translateX(0); color: #fcfcfc; }
.like-checkbox:checked ~ .like-count.one { transform: translateY(-40px); }
@keyframes likeEnlarge {
    0% { transform: scale(0.5); }
    100% { transform: scale(1.2); }
}

/* ── TRANSPORT SELECTOR (Voucher / Uber section) ── */
.transport-inputs { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; }
.transport-input { clip: rect(0 0 0 0); clip-path: inset(100%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.transport-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 72px; min-height: 72px; border-radius: 0.5rem;
    border: 2px solid #b5bfd9; background-color: var(--card);
    box-shadow: 0 5px 10px rgba(0,0,0,0.1); transition: 0.15s ease;
    cursor: pointer; position: relative;
}
.transport-tile:before {
    content: ""; position: absolute; display: block;
    width: 0.75rem; height: 0.75rem; border: 2px solid #b5bfd9;
    background-color: var(--card); border-radius: 50%;
    top: 0.25rem; left: 0.25rem; opacity: 0; transform: scale(0); transition: 0.25s ease;
}
.transport-tile:hover { border-color: #8B5CF6; }
.transport-tile:hover:before { transform: scale(1); opacity: 1; }
.transport-input:checked + .transport-tile {
    border-color: #8B5CF6; box-shadow: 0 5px 10px rgba(139,92,246,0.2); color: #8B5CF6;
}
.transport-input:checked + .transport-tile:before { transform: scale(1); opacity: 1; background-color: #8B5CF6; border-color: #8B5CF6; }
.transport-icon svg { width: 2rem; height: 2rem; stroke: #494949; }
.transport-input:checked + .transport-tile .transport-icon svg { stroke: #8B5CF6; }
.transport-label { color: #707070; font-size: 11px; text-align: center; margin-top: 4px; }
.transport-input:checked + .transport-tile .transport-label { color: #8B5CF6; }

/* ── NEUMORPHIC SEARCH INPUT ── */
.search-neumorphic {
    border: none; padding: 0.875rem 1rem 0.875rem 2.75rem;
    border-radius: 1rem; width: 100%;
    background: var(--secondary);
    box-shadow: inset 4px 4px 8px rgba(0,0,0,0.15), inset -4px -4px 8px rgba(255,255,255,0.04);
    transition: 0.3s; color: var(--foreground); font-family: var(--font-sans); font-size: 0.875rem;
    outline: none;
}
.search-neumorphic:focus {
    box-shadow: inset 6px 6px 12px rgba(0,0,0,0.2), inset -6px -6px 12px rgba(255,255,255,0.05);
}
html.light .search-neumorphic {
    background: #e8e8e8;
    box-shadow: inset 6px 6px 12px #c5c5c5, inset -6px -6px 12px #ffffff;
}

/* ── PREMIUM TOGGLE SWITCH ── */
.premium-switch { font-size: 17px; position: relative; display: inline-block; width: 62px; height: 35px; }
.premium-switch input { opacity: 0; width: 0; height: 0; }
.premium-slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background: var(--secondary); transition: .4s; border-radius: 30px;
    border: 1px solid var(--border);
}
.premium-slider:before {
    position: absolute; content: ""; height: 1.9em; width: 1.9em;
    border-radius: 16px; left: 1.2px; top: 0; bottom: 0; margin: auto;
    background-color: white; box-shadow: 0 2px 5px #999; transition: .4s;
}
.premium-switch input:checked + .premium-slider { background-color: #5fdd54; border: 1px solid transparent; }
.premium-switch input:checked + .premium-slider:before { transform: translateX(1.5em); }

/* ── FLIP CREDIT CARD (Payment modal) ── */
.flip-card {
    background-color: transparent; width: 240px; height: 154px;
    perspective: 1000px; color: white; margin: 0 auto;
}
.flip-card-inner {
    position: relative; width: 100%; height: 100%;
    text-align: center; transition: transform 0.8s; transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back {
    position: absolute; display: flex; flex-direction: column; justify-content: center;
    width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden;
    border-radius: 1rem;
    box-shadow: rgba(0,0,0,0.4) 0px 2px 2px, rgba(0,0,0,0.3) 0px 7px 13px -3px, rgba(0,0,0,0.2) 0px -1px 0px inset;
    background-color: #171717;
}
.flip-card-back { transform: rotateY(180deg); }
.flip-card .card-number { position: absolute; font-weight: bold; font-size: .6em; top: 8.3em; left: 1.6em; }
.flip-card .card-name { position: absolute; font-weight: bold; font-size: .5em; top: 16.1em; left: 2em; }
.flip-card .card-date { position: absolute; font-weight: bold; font-size: .5em; top: 13.6em; left: 3.2em; }
.flip-card .card-brand { position: absolute; font-size: .5em; top: 2em; left: 18.6em; letter-spacing: .2em; }
.flip-card .card-strip {
    position: absolute; width: 15em; height: 1.5em; top: 2.4em;
    background: repeating-linear-gradient(45deg,#303030,#303030 10px,#202020 10px,#202020 20px);
}
.flip-card .card-mstrip { position: absolute; background: white; width: 8em; height: 0.8em; top: 5em; left: .8em; border-radius: 2.5px; }
.flip-card .card-sstrip { position: absolute; background: white; width: 4.1em; height: 0.8em; top: 5em; left: 10em; border-radius: 2.5px; }
.flip-card .card-code { font-weight: bold; text-align: center; margin: .2em; color: black; font-size: 0.8em; }

/* ── REGISTER NOW BUTTON (Login page) ── */
.btn-register-now {
    position: relative; padding: 0.875rem 2rem;
    font-size: 1rem; font-weight: bold; color: #ffffff;
    background: linear-gradient(to bottom, #171717, #242424);
    border-radius: 9999px; cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,1), 0 10px 20px rgba(0,0,0,0.4);
    transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #292929; gap: 0.5rem; font-family: var(--font-sans);
}
.btn-register-now:before {
    content: ""; position: absolute; top: -2px; right: -1px; bottom: -1px; left: -1px;
    background: linear-gradient(to bottom, #292929, #000000);
    z-index: -1; border-radius: 9999px; transition: all 0.2s ease;
}
.btn-register-now:active { transform: translateY(2px); box-shadow: 0 1px 2px rgba(0,0,0,1), 0 5px 10px rgba(0,0,0,0.4); }
.btn-register-now .btn-inner-circle {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(to bottom, #171717, #242424);
    width: 36px; height: 36px; border-radius: 50%;
    box-shadow: 0 0 1px rgba(0,0,0,1); border: 1px solid #252525; transition: all 0.2s ease;
}
.btn-register-now .btn-inner-circle svg { transition: all 0.4s ease-in-out; }
.btn-register-now:hover .btn-inner-circle svg { transform: rotate(-35deg); }

/* ── 3D CLEAN BUTTON (Light theme) ── */
.btn-3d-light {
    color: #090909; padding: 0.6em 1.5em; font-size: 0.9375rem;
    border-radius: 0.5em; background: #e8e8e8; cursor: pointer;
    border: 1px solid #e8e8e8; transition: all 0.3s;
    box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
    font-family: var(--font-sans); font-weight: 600;
}
.btn-3d-light:hover { border: 1px solid white; }
.btn-3d-light:active { box-shadow: 4px 4px 12px #c5c5c5, -4px -4px 12px #ffffff; }

/* ── SOCIAL BUTTONS (Profile page) ── */
.social-btn {
    padding: 1.125rem; border-radius: 50%;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.1);
    background: linear-gradient(135deg, rgba(0,0,0,0.6), rgba(0,0,0,0.4));
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.social-btn:hover { transform: scale(1.1) rotate(3deg); box-shadow: 0 12px 32px rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.3); }
.social-btn:active { transform: scale(0.95); }
.social-btn::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: translateX(-100%); transition: transform 0.7s ease;
}
.social-btn:hover::before { transform: translateX(100%); }
.social-btn svg { width: 1.5rem; height: 1.5rem; position: relative; z-index: 1; }

/* ── ANIMATED BOOKING BUTTON (Reserve modal) ── */
.btn-booking-animated {
    --primary: #8B5CF6; --neutral-1: #f7f8f7; --neutral-2: #e7e7e7;
    --radius: 14px;
    cursor: pointer; border-radius: var(--radius);
    border: none; box-shadow: 0 0.5px 0.5px 1px rgba(255,255,255,0.2), 0 10px 20px rgba(0,0,0,0.2), 0 4px 5px rgba(0,0,0,0.05);
    display: flex; align-items: center; justify-content: center;
    position: relative; transition: all 0.3s ease;
    min-width: 200px; padding: 16px 24px; height: 60px;
    font-family: var(--font-sans); font-size: 1rem; font-weight: 700;
    background: linear-gradient(135deg, #8B5CF6, #a855f7, #ec4899);
    color: white;
}
.btn-booking-animated:hover { transform: scale(1.02); box-shadow: 0 0 1px 2px rgba(139,92,246,0.3), 0 15px 30px rgba(0,0,0,0.3); }
.btn-booking-animated:active { transform: scale(0.98); }
.btn-booking-animated::after {
    content: ''; position: absolute; inset: 0; border-radius: var(--radius);
    border: 2px solid transparent;
    background: linear-gradient(var(--neutral-1), var(--neutral-2)) padding-box, linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0)) border-box;
    z-index: 0; transition: all 0.4s ease; opacity: 0.3;
}
.btn-booking-animated:hover::after { opacity: 0.5; }
.btn-booking-animated span { position: relative; z-index: 1; }

/* ── COMMENT BOX (Review modal) ── */
.comment-card {
    width: 100%; background: var(--card);
    box-shadow: 0px 47px 47px rgba(0,0,0,0.09), 0px 12px 26px rgba(0,0,0,0.1);
    border-radius: 17px 17px 27px 27px; overflow: hidden;
}
.comment-card-title {
    width: 100%; height: 50px; display: flex; align-items: center;
    padding-left: 20px; border-bottom: 1px solid var(--border);
    font-weight: 700; font-size: 13px; color: var(--foreground); position: relative;
}
.comment-card-title::after {
    content: ''; width: 8ch; height: 1px; position: absolute;
    bottom: -1px; background-color: var(--foreground);
}
.comment-react-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; background: var(--secondary); border-radius: 8px;
}
.comment-react-bar button {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; cursor: pointer; border-radius: 50%; transition: background 0.2s;
}
.comment-react-bar button:hover { background: rgba(245,53,110,0.1); }
.comment-react-bar button:hover svg { fill: #f5356e; }
.comment-text-box {
    background: var(--secondary); padding: 8px;
}
.comment-text-box .box-inner {
    background: var(--card); border-radius: 8px 8px 16px 16px; padding: 8px;
}
.comment-text-box textarea {
    width: 100%; min-height: 60px; resize: none; border: none;
    border-radius: 6px; padding: 10px; font-size: 13px;
    outline: none; background: transparent; color: var(--foreground);
    font-family: var(--font-sans); caret-color: #8B5CF6;
}
.comment-formatting {
    display: flex; align-items: center; gap: 4px; padding-top: 4px;
}
.comment-formatting button {
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    background: transparent; border-radius: 50%; border: none; cursor: pointer; transition: background 0.15s;
}
.comment-formatting button:hover { background: var(--secondary); }
.comment-send-btn {
    width: 30px; height: 30px; background: #8B5CF6; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: none; cursor: pointer; margin-left: auto; transition: background 0.15s;
}
.comment-send-btn:hover { background: #6d28d9; }

/* ── RAINBOW DOTS MENU ICON ── */
@keyframes dotRainbow {
    0%   { fill: #ef4444; }
    14%  { fill: #f97316; }
    28%  { fill: #eab308; }
    42%  { fill: #22c55e; }
    57%  { fill: #3b82f6; }
    71%  { fill: #8b5cf6; }
    85%  { fill: #ec4899; }
    100% { fill: #ef4444; }
}
#menu-dots-icon .dot { fill: var(--foreground); }
#menu-dots-icon .d1 { animation: dotRainbow 4.5s ease-in-out infinite 0.0s; }
#menu-dots-icon .d2 { animation: dotRainbow 4.5s ease-in-out infinite 0.5s; }
#menu-dots-icon .d3 { animation: dotRainbow 4.5s ease-in-out infinite 1.0s; }
#menu-dots-icon .d4 { animation: dotRainbow 4.5s ease-in-out infinite 1.5s; }
#menu-dots-icon .d5 { animation: dotRainbow 4.5s ease-in-out infinite 2.0s; }
#menu-dots-icon .d6 { animation: dotRainbow 4.5s ease-in-out infinite 2.5s; }
#menu-dots-icon .d7 { animation: dotRainbow 4.5s ease-in-out infinite 3.0s; }
#menu-dots-icon .d8 { animation: dotRainbow 4.5s ease-in-out infinite 3.5s; }
#menu-dots-icon .d9 { animation: dotRainbow 4.5s ease-in-out infinite 4.0s; }

/* ── RATING STARS ── */
.rating-stars {
    display: flex; gap: 0.375rem;
}
.rating-star {
    font-size: 1.75rem; background: none; border: none; cursor: pointer;
    color: var(--border); transition: color 0.15s, transform 0.15s;
    padding: 0; line-height: 1;
}
.rating-star.active { color: #f59e0b; }
.rating-star:hover { transform: scale(1.15); }

/* ── SAFETY BADGE ── */
.safety-badge {
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 0.3rem 0.75rem; border-radius: 2rem;
    font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.safety-badge-green {
    background: rgba(22,163,74,0.12); color: #16a34a;
    border: 1px solid rgba(22,163,74,0.25);
}
.safety-badge-amber {
    background: rgba(217,119,6,0.12); color: #d97706;
    border: 1px solid rgba(217,119,6,0.25);
}
.safety-badge-red {
    background: rgba(239,68,68,0.1); color: #ef4444;
    border: 1px solid rgba(239,68,68,0.2);
}

/* ── PULL TO REFRESH ── */
.pull-to-refresh {
    position: fixed; top: -3rem; left: 50%; transform: translateX(-50%);
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    background: var(--card); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-md); z-index: 9990;
    transition: top 0.2s ease;
}
.pull-to-refresh.visible { top: 1rem; }
.pull-to-refresh svg { animation: spin 0.8s linear infinite; }

/* ── LIKE BUTTON — theme aware ── */
.like-button {
    background-color: var(--secondary) !important;
    box-shadow: inset -2px -2px 5px rgba(0,0,0,0.15), inset 2px 2px 5px rgba(255,255,255,0.05), 2px 2px 6px rgba(0,0,0,0.2) !important;
    border: 1px solid var(--border) !important;
}
html.light .like-button {
    background-color: #f0f0f0 !important;
    box-shadow: inset -2px -2px 5px rgba(255,255,255,0.8), inset 2px 2px 5px rgba(0,0,0,0.08), 2px 2px 6px rgba(0,0,0,0.1) !important;
}
.like-count { color: var(--muted-foreground) !important; border-left-color: var(--border) !important; }
.like-icon { fill: var(--muted-foreground) !important; }
.like-checkbox:checked ~ .like-label .like-icon { fill: #fc4e4e !important; }

/* ── SKELETON IMAGE PLACEHOLDER ── */
.skeleton-image {
    background: linear-gradient(90deg, var(--secondary) 25%, var(--accent) 50%, var(--secondary) 75%);
    background-size: 600px 100%; animation: shimmer 1.4s infinite;
}

/* ── VIBE SELECTOR MODAL ── */
.vibe-selector-modal {
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(0,0,0,0.85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.vibe-selector-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: 1.5rem; padding: 2rem 1.5rem;
    max-width: 400px; width: 100%; text-align: center;
    animation: fadeInUp 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.vibe-option {
    display: flex; flex-direction: column; align-items: center; gap: 0.375rem;
    padding: 1rem 0.75rem; border-radius: 1rem;
    background: var(--secondary); border: 2px solid var(--border);
    cursor: pointer; transition: all 0.2s ease; font-family: var(--font-sans);
}
.vibe-option:hover { border-color: var(--brand); background: var(--brand-light); }
.vibe-option.selected { border-color: var(--brand); background: var(--brand-light); }
.vibe-option .vibe-emoji { font-size: 2rem; }
.vibe-option .vibe-label { font-size: 0.75rem; font-weight: 700; color: var(--foreground); }

/* ── PROMOTED / DESTAQUE CARD ── */
.destaque-card {
    position: relative; overflow: hidden;
}
.destaque-card::before {
    content: '';
    position: absolute; inset: -1px; border-radius: inherit; padding: 1px; z-index: 0;
    background: linear-gradient(135deg, #8B5CF6, #a855f7, #ec4899, #8B5CF6);
    background-size: 300% 300%;
    animation: gradientShift 3s ease infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
}
@keyframes gradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.destaque-label {
    position: absolute; top: 0.625rem; left: 0.625rem; z-index: 2;
    padding: 0.2rem 0.625rem; border-radius: 2rem;
    background: linear-gradient(135deg, #8B5CF6, #a855f7);
    color: white; font-size: 0.6rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.1em;
    box-shadow: 0 2px 8px rgba(139,92,246,0.4);
}

/* ── SPRING MODAL ANIMATION ── */
@keyframes springIn {
    0%   { transform: scale(0.85) translateY(20px); opacity: 0; }
    60%  { transform: scale(1.03) translateY(-4px); opacity: 1; }
    80%  { transform: scale(0.98) translateY(2px); }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}
.spring-modal { animation: springIn 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards; }

/* ── SLIDE UP CHECKOUT ── */
@keyframes slideUpBounce {
    0%   { transform: translateY(100%); }
    65%  { transform: translateY(-8px); }
    80%  { transform: translateY(4px); }
    100% { transform: translateY(0); }
}
.slide-up-checkout { animation: slideUpBounce 0.5s cubic-bezier(0.32,0.72,0,1) forwards; }

/* ── HAPTIC FEEDBACK VISUAL ── */
@keyframes hapticPulse {
    0%   { box-shadow: 0 0 0 0 rgba(139,92,246,0.4); }
    70%  { box-shadow: 0 0 0 10px rgba(139,92,246,0); }
    100% { box-shadow: 0 0 0 0 rgba(139,92,246,0); }
}
.haptic-pulse { animation: hapticPulse 0.4s ease-out; }

/* ── DRAWPATH ANIMATION (Logo SVG) ── */
@keyframes drawPath {
    to { stroke-dashoffset: 0; }
}
@keyframes fadeIn {
    to { opacity: 1; }
}

/* ── MOBILE LAYOUT FIXES ── */
@media (max-width: 479px) {
    /* Force single column on very small screens */
    .bento-item-large,
    .bento-item-wide {
        grid-column: span 1 !important;
    }
    /* Ensure experience card images don't overflow */
    .experience-card-img {
        padding-top: 60% !important;
    }
    /* Like button smaller on mobile */
    .like-button {
        width: 80px !important;
        height: 34px !important;
    }
}

/* ── BOTTOM NAV SAFE AREA ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .bottom-nav {
        padding-bottom: max(env(safe-area-inset-bottom), 0.5rem);
        height: calc(var(--nav-h) + max(env(safe-area-inset-bottom), 0px));
    }
    #main-content {
        padding-bottom: calc(120px + env(safe-area-inset-bottom));
    }
}

/* ── MOBILE MENU BTN — ensure above content ── */
.mobile-menu-btn {
    top: env(safe-area-inset-top, 0.75rem);
    top: calc(env(safe-area-inset-top) + 0.75rem);
}

/* ── HEADER PADDING FOR MOBILE MENU BTN ── */
@media (max-width: 767px) {
    #page-header {
        padding-left: 3rem; /* space for hamburger button */
    }
}

/* ── LIGHT THEME SIDEBAR DRAWER ── */
html.light #sidebar-drawer {
    background: #ffffff !important;
    border-right: 1px solid rgba(0,0,0,0.1) !important;
}

/* ── TOUR DETAIL MODAL IMAGE ── */
@media (max-width: 479px) {
    .modal-content [style*="height:200px"] {
        height: 160px !important;
    }
}

/* ── SEARCH INPUT PADDING FIX ── */
.search-input {
    padding-left: 2.5rem !important;
}