/* ── Theme tokens (added 2026-07-22 light-mode retheme) ──────────────── Structural neutrals only; accent colours stay literal so they read the same in both themes. Light values redefined in the data-theme block below. */ :root{ --as-bg:#080B14; --as-surface:#111827; --as-surface-2:#0F172A; --as-border:#1E293B; --as-border-2:#334155; --as-ink:#F1F5F9; --as-ink-2:#E2E8F0; --as-ink-3:#CBD5E1; --as-muted:#94A3B8; --as-dim:#64748B; --as-faint:#475569; } html[data-theme="light"]{ --as-bg:#F4F6FB; --as-surface:#FFFFFF; --as-surface-2:#FFFFFF; --as-border:#E4E8F0; --as-border-2:#D3DAE6; --as-ink:#0F172A; --as-ink-2:#1E293B; --as-ink-3:#334155; --as-muted:#5A6678; --as-dim:#64748B; --as-faint:#94A3B8; } /* Variables inherited from ecosystem-global.css. The universal reset and html/body base styles are already defined in tratok_design_system.css — duplicating them here used to: 1. Apply env(safe-area-inset-top) padding to , which on iPhones with notches stacked on top of the header's own safe-area handling and produced a visible ~44px gap above the orange header bar. 2. Set body to display:flex/flex-direction:column, which conflicted with the sticky positioning of

and made the header sit slightly off compared to every other page. The design system already handles all of this correctly, so we let it do its job and only override what's truly page-specific below. */ html { scroll-behavior: smooth; } .status-bar-fix { position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 44px); background: var(--dark-bg); z-index: 10000; } .container { flex-grow: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 1.5rem; overflow-y: auto; } .location-date-bar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); box-shadow: var(--shadow); border-radius: var(--border-radius); margin: 0 0 1.5rem; } .location-date-info { flex: 1; } .location-date-info h2 { font-size: 1.5rem; color: var(--primary-color); font-weight: 600; margin: 0; } .location-date-info p { margin: 0.5rem 0 0; color: var(--text-muted); font-size: 0.95rem; display: flex; align-items: center; gap: 0.5rem; } .button-group { display: flex; gap: 0.75rem; } .edit-button, .sort-button, .map-button { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.2rem; border-radius: 6px; border: 2px solid var(--primary-color); background: transparent; cursor: pointer; color: var(--primary-color); font-weight: 600; font-size: 0.9rem; transition: var(--transition); } .edit-button:hover, .sort-button:hover, .map-button:hover { background: var(--primary-color); color: var(--text-light); box-shadow: var(--glow); transform: scale(1.05); } .results { background: rgba(255, 255, 255, 0.03); padding: 2rem; border-radius: var(--border-radius); box-shadow: var(--shadow); backdrop-filter: blur(5px); } .results p { font-size: 1.1rem; font-weight: 500; margin-bottom: 1.5rem; color: var(--text-light); } .activity-card { display: flex; background: rgba(255, 255, 255, 0.08); border-radius: var(--border-radius); overflow: hidden; margin-bottom: 1.5rem; box-shadow: var(--shadow); transition: transform 0.3s ease, box-shadow 0.3s ease; } .activity-card:hover { transform: translateY(-5px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2); } .activity-image { position: relative; width: 30%; min-width: 200px; } .activity-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .image-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); display: flex; align-items: flex-start; padding: 1rem; } .image-overlay .discount { background: var(--accent-color); color: var(--text-dark); padding: 0.4rem 0.8rem; border-radius: 6px; font-size: 0.85rem; font-weight: 600; } .activity-info { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; gap: 1rem; } .activity-info h2 { font-size: 1.3rem; font-weight: 600; color: var(--text-light); display: flex; align-items: center; gap: 0.5rem; } .activity-info h2 i { color: var(--primary-color); font-size: 1.2rem; } .activity-info .location { font-size: 0.95rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.5rem; } .activity-info .location i { color: var(--secondary-color); } .activity-info .rating { font-size: 0.95rem; color: var(--accent-color); font-weight: 500; display: flex; align-items: center; gap: 0.5rem; } .activity-info .rating i { color: var(--accent-color); } .description { font-size: 0.9rem; color: var(--text-light); line-height: 1.6; } .activity-price { display: flex; justify-content: space-between; align-items: center; margin-top: 0.5rem; } .price-info { display: flex; flex-direction: column; gap: 0.25rem; } .price-info .price { color: #4caf50; font-size: 1.3rem; font-weight: 600; } .price-info p { font-size: 0.85rem; color: var(--text-muted); } .book-button { padding: 0.8rem 1.5rem; border-radius: 8px; border: none; background: var(--primary-color); color: var(--text-light); font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: var(--transition); display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; } .book-button:hover { background: var(--secondary-color); box-shadow: var(--glow); transform: scale(1.05); } .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 1000; overflow-y: auto; align-items: center; justify-content: center; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } .modal-content { background: rgba(26, 26, 46, 0.95); backdrop-filter: blur(10px); padding: 2rem; border-radius: var(--border-radius); box-shadow: var(--shadow); position: relative; color: var(--text-light); animation: slideIn 0.3s ease; } #searchModal .modal-content, #sortModal .modal-content { width: 90%; max-width: 400px; } #mapModal .modal-content { width: 90%; max-width: 800px; height: 80vh; max-height: 800px; } .modal-content.closing { animation: modalclose 0.3s ease forwards; } .modal-title { font-size: 1.6rem; margin-bottom: 1.5rem; color: var(--primary-color); text-align: center; font-weight: 600; } .close { position: absolute; top: 1rem; right: 1rem; color: var(--text-muted); font-size: 1.5rem; cursor: pointer; transition: var(--transition); } .close:hover { color: var(--primary-color); } #map { width: 100%; height: calc(100% - 60px); border-radius: var(--border-radius); background: var(--as-border); } .leaflet-control { background: rgba(26, 26, 46, 0.95); border: 1px solid rgba(255, 255, 255, 0.2); } .leaflet-control a { color: var(--text-light); } .leaflet-control a:hover { color: var(--primary-color); } .sort-options { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; } .sort-option { position: relative; background: rgba(255, 255, 255, 0.05); border-radius: var(--border-radius); padding: 1rem; cursor: pointer; transition: var(--transition); display: flex; align-items: center; gap: 1rem; } .sort-option:hover { background: rgba(255, 107, 107, 0.1); transform: translateX(5px); } .sort-option input[type="radio"] { display: none; } .sort-option label { flex: 1; display: flex; align-items: center; gap: 0.75rem; font-size: 0.95rem; color: var(--text-light); cursor: pointer; } .sort-option label i { color: var(--primary-color); font-size: 1.2rem; } .sort-option input:checked + label { color: var(--primary-color); font-weight: 600; } .sort-option input:checked + label i { color: var(--secondary-color); } .filter-search { padding: 1rem; background: rgba(255, 255, 255, 0.1); border: none; border-radius: 8px; color: var(--text-light); font-size: 0.95rem; transition: var(--transition); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); width: 100%; } .filter-search.custom-datepicker { cursor: pointer; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3e%3c/rect%3e%3cline x1='16' y1='2' x2='16' y2='6'%3e%3c/line%3e%3cline x1='8' y1='2' x2='8' y2='6'%3e%3c/line%3e%3cline x1='3' y1='10' x2='21' y2='10'%3e%3c/line%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1rem; } .filter-search::placeholder { color: var(--text-muted); opacity: 0.7; } .filter-search:focus { outline: none; background: rgba(255, 255, 255, 0.15); box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.2); } .modal-actions { display: flex; gap: 1rem; margin-top: 1.5rem; justify-content: space-between; } .search-button, .apply-sort-button, .cancel-button { padding: 1rem 1.5rem; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: var(--transition); box-shadow: var(--shadow); width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .search-button { background: var(--primary-color); color: var(--text-light); } .search-button:hover { background: var(--secondary-color); box-shadow: var(--glow); transform: scale(1.05); } .apply-sort-button { background: var(--primary-color); color: var(--text-light); } .cancel-button { background: rgba(255, 255, 255, 0.1); color: var(--text-muted); } .apply-sort-button:hover { background: var(--secondary-color); box-shadow: var(--glow); transform: scale(1.05); } .cancel-button:hover { background: rgba(255, 255, 255, 0.2); color: var(--text-light); transform: scale(1.05); } #editSuggestions { position: absolute; z-index: 1100; background: rgba(26, 26, 46, 0.95); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--border-radius); box-shadow: var(--shadow); max-height: 260px; overflow-y: auto; display: none; margin-top: 0.5rem; animation: slideDown 0.3s ease; width: 100%; } .suggestions-list { list-style: none; margin: 0; padding: 0.5rem 0; } .suggestions-list li { padding: 0.8rem 1rem; cursor: pointer; transition: var(--transition); color: var(--text-light); } .suggestions-list li:hover, .suggestions-list li.focused { background: rgba(255, 107, 107, 0.3); } .suggestion-content { display: flex; align-items: center; } .suggestion-icon { margin-inline-end: 0.8rem; font-size: 1.2rem; color: var(--secondary-color); width: 1.5rem; text-align: center; flex-shrink: 0; } .suggestion-text { flex: 1; min-width: 0; } .suggestion-main { font-size: 0.95rem; font-weight: 500; color: var(--text-light); white-space: normal; word-wrap: break-word; line-height: 1.3; } .suggestion-sub { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.2rem; white-space: normal; word-wrap: break-word; line-height: 1.3; } .suggestions-list .no-results { padding: 0.8rem 1rem; font-size: 0.9rem; color: var(--text-muted); text-align: center; cursor: default; } .suggestions-loading { display: none; padding: 0.8rem 1rem; font-size: 0.9rem; color: var(--text-muted); text-align: center; animation: pulse 1.5s infinite; } .suggestions-loading.active { display: block; } #editSuggestions::-webkit-scrollbar { width: 6px; } #editSuggestions::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); border-radius: 3px; } #editSuggestions::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 3px; } #editSuggestions::-webkit-scrollbar-thumb:hover { background: var(--secondary-color); } .custom-select { position: relative; width: 100%; margin-bottom: 1.5rem; } .custom-select-toggle { width: 100%; padding: 1rem; font-size: 0.95rem; border: none; border-radius: 8px; background: rgba(255, 255, 255, 0.1); color: var(--text-light); transition: var(--transition); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); cursor: pointer; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1rem; text-align: left; } .custom-select-toggle:focus { outline: none; background: rgba(255, 255, 255, 0.15); box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.2); } .custom-select-options { position: absolute; top: 100%; left: 0; right: 0; background: rgba(26, 26, 46, 0.95); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--border-radius); max-height: 200px; overflow-y: auto; display: none; z-index: 1000; box-shadow: var(--shadow); animation: slideDown 0.3s ease; } .custom-select-options.show { display: block; } .custom-select-option { padding: 0.8rem; cursor: pointer; color: var(--text-light); transition: var(--transition); display: flex; align-items: center; gap: 0.5rem; } .custom-select-option:hover, .custom-select-option.selected { background: rgba(255, 107, 107, 0.3); } .custom-select-option i { font-size: 1rem; color: var(--secondary-color); } .custom-select-option .option-text { flex: 1; } .custom-select-options::-webkit-scrollbar { width: 6px; } .custom-select-options::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); border-radius: 3px; } .custom-select-options::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 3px; } .custom-select-options::-webkit-scrollbar-thumb:hover { background: var(--secondary-color); } .custom-calendar { position: absolute; z-index: 1000; display: none; animation: fadeIn 0.3s ease; margin-top: 0.5rem; } .custom-calendar.active { display: block; } .calendar-content { background: rgba(26, 26, 46, 0.95); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); padding: 1.5rem; width: 360px; max-width: 95vw; } .calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; } .calendar-nav { background: none; border: none; color: var(--text-light); font-size: 1.2rem; cursor: pointer; padding: 0.5rem 0.8rem; border-radius: 50%; transition: var(--transition); } .calendar-nav:hover { background: rgba(255, 107, 107, 0.2); color: var(--primary-color); } .calendar-nav:focus { outline: none; box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.3); } .month-year { display: flex; gap: 0.5rem; } .month-year select { background: rgba(255, 255, 255, 0.1); border: none; color: var(--text-light); padding: 0.5rem 0.8rem; border-radius: 6px; font-size: 1rem; cursor: pointer; } .month-year select:focus { outline: none; box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.2); } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .weekday-header { text-align: center; font-size: 0.9rem; color: var(--text-muted); padding: 0.6rem 0; font-weight: 500; } .calendar-day { text-align: center; padding: 0.6rem; font-size: 0.95rem; color: var(--text-light); cursor: pointer; border-radius: 50%; transition: var(--transition); min-width: 40px; } .calendar-day.empty { background: transparent; cursor: default; } .calendar-day:hover:not(.empty):not(.disabled) { background: rgba(255, 107, 107, 0.3); } .calendar-day.selected { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: var(--text-light); font-weight: 600; } .calendar-day.disabled { color: #666; cursor: not-allowed; } .calendar-day:focus { outline: none; box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.2); } @keyframes slideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes modalclose { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-50px); } } @keyframes pulse { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } } @media (max-width: 768px) { .container { padding: 1rem; } .location-date-bar { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1rem; } .button-group { width: 100%; justify-content: space-between; } .edit-button, .sort-button, .map-button { padding: 0.5rem 1rem; font-size: 0.85rem; flex: 1; } .activity-card { flex-direction: column; } .activity-image { width: 100%; min-width: unset; height: 200px; } .activity-info { padding: 1rem; } .activity-info h2 { font-size: 1.2rem; } .price-info .price { font-size: 1.2rem; } .book-button { padding: 0.7rem 1.2rem; font-size: 0.9rem; } .modal-content { padding: 1.5rem; } #mapModal .modal-content { max-width: 95%; height: 70vh; } #map { height: calc(100% - 60px); } .modal-actions { flex-direction: column; } .search-button, .apply-sort-button, .cancel-button { width: 100%; } .calendar-content { width: 320px; } .calendar-day { padding: 0.5rem; font-size: 0.9rem; min-width: 36px; } } @media (max-width: 480px) { .location-date-bar { padding: 0.8rem; } .location-date-info h2 { font-size: 1.3rem; } .location-date-info p { font-size: 0.9rem; } .edit-button, .sort-button, .map-button { padding: 0.5rem 0.8rem; font-size: 0.8rem; } .results { padding: 1rem; } .activity-info h2 { font-size: 1.1rem; } .price-info .price { font-size: 1.1rem; } .book-button { padding: 0.6rem 1rem; font-size: 0.85rem; } .modal-content { padding: 1rem; } #mapModal .modal-content { height: 60vh; } #map { height: calc(100% - 60px); } #editSuggestions { max-height: 200px; } .custom-select-toggle { padding: 0.8rem; font-size: 0.9rem; } .sort-option { padding: 0.8rem; } .sort-option label { font-size: 0.9rem; } } /* ================================================ Inline styles extracted from activity_search.php ================================================ */ /* -- No-results page -- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} html,body{background:var(--as-bg)!important;color:var(--as-ink-2);font-family:'DM Sans', 'Noto Naskh Arabic', 'Noto Sans Devanagari', 'Noto Sans Thai', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans',-apple-system,sans-serif;min-height:100vh;-webkit-font-smoothing:antialiased;} .no-results-wrap{max-width:520px;margin:0 auto;padding:0 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:80vh;text-align:center;} .no-results-card{background:var(--as-surface);border:1px solid var(--as-border);border-radius:16px;padding:48px 28px;width:100%;max-width:400px;} .no-results-icon{width:72px;height:72px;border-radius:50%;background:rgba(232,93,58,0.1);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;} .no-results-icon i{font-size:28px;color:#E85D3A;} .no-results-title{font-size:1.15rem;font-weight:800;color:var(--as-ink);margin-bottom:8px;} .no-results-query{font-size:0.85rem;font-weight:600;color:#E85D3A;margin-bottom:12px;word-break:break-word;} .no-results-sub{font-size:0.78rem;color:var(--as-muted);line-height:1.5;margin-bottom:28px;} .no-results-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;background:linear-gradient(135deg,#E85D3A,#D94B2A);color:#fff;font-family:'DM Sans', 'Noto Naskh Arabic', 'Noto Sans Devanagari', 'Noto Sans Thai', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans',sans-serif;font-size:0.85rem;font-weight:700;border:none;border-radius:14px;cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform 0.15s,opacity 0.15s;} .no-results-btn:active{transform:scale(0.96);opacity:0.9;} .no-results-btn i{font-size:13px;} /* -- Main page -- */ .page{max-width:520px;margin:0 auto;padding:0 14px 100px;} /* -- Search summary -- */ .search-bar{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--as-surface);border:1px solid var(--as-border);border-radius:14px;margin:14px 0 10px;} .sb-info{flex:1;min-width:0;} .sb-dest{font-size:0.9rem;font-weight:800;color:var(--as-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .sb-meta{font-size:0.65rem;color:var(--as-dim);font-weight:500;margin-top:3px;display:flex;flex-wrap:wrap;gap:4px;} .sb-pill{background:var(--as-border);padding:3px 8px;border-radius:6px;font-size:0.6rem;font-weight:600;color:var(--as-muted);} .sb-edit{width:36px;height:36px;border-radius:10px;background:rgba(232,93,58,0.1);border:none;color:#E85D3A;font-size:14px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;transition:all 0.15s;} .sb-edit:active{background:rgba(232,93,58,0.2);transform:scale(0.93);} /* -- Chips -- */ .chips{display:flex;gap:6px;margin-bottom:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:2px 0;}.chips::-webkit-scrollbar{display:none;} .chip{display:flex;align-items:center;gap:5px;padding:8px 14px;background:var(--as-surface);border:1px solid var(--as-border);border-radius:10px;color:var(--as-muted);font-size:0.72rem;font-weight:700;white-space:nowrap;cursor:pointer;font-family:'DM Sans', 'Noto Naskh Arabic', 'Noto Sans Devanagari', 'Noto Sans Thai', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans',sans-serif;-webkit-tap-highlight-color:transparent;transition:all 0.15s;flex-shrink:0;} .chip:active{background:var(--as-border);color:var(--as-ink);transform:scale(0.96);}.chip i{font-size:12px;} .chip-sort-label{display:none;font-size:0.62rem;color:#E85D3A;font-weight:700;margin-inline-start: 2px;}.chip-sort-label.show{display:inline;} .result-count{font-size:0.68rem;color:var(--as-faint);font-weight:600;margin-bottom:10px;} /* -- Activity cards -- */ .act-card{background:var(--as-surface);border:1px solid var(--as-border);border-radius:16px;overflow:hidden;margin-bottom:10px;-webkit-tap-highlight-color:transparent;transition:transform 0.15s;} .act-card:active{transform:scale(0.99);} .ac-img{width:100%;height:180px;object-fit:cover;display:block;background:var(--as-border);} .ac-body{padding:12px 14px 14px;} .ac-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;} .ac-name{font-size:0.92rem;font-weight:800;color:var(--as-ink);line-height:1.25;} .ac-location{font-size:0.68rem;color:var(--as-dim);margin-top:3px;display:flex;align-items:center;gap:4px;}.ac-location i{font-size:9px;color:#E85D3A;} .ac-desc{font-size:0.72rem;color:var(--as-muted);margin-top:8px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} /* Perks */ .ac-perks{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap;} .ac-perk{font-size:0.6rem;font-weight:600;color:#2ECDA7;display:flex;align-items:center;gap:4px;}.ac-perk i{font-size:9px;} /* Participants badge */ .ac-participants{display:inline-flex;align-items:center;gap:4px;font-size:0.6rem;font-weight:700;color:#8B5CF6;background:rgba(139,92,246,0.1);padding:4px 10px;border-radius:8px;margin-top:8px;} .ac-participants i{font-size:10px;} /* Footer */ .ac-footer{display:flex;justify-content:space-between;align-items:flex-end;margin-top:12px;gap:10px;} .ac-price-wrap{} .ac-per{font-size:0.58rem;color:var(--as-dim);font-weight:600;margin-bottom:1px;} .ac-price{font-size:1.1rem;font-weight:800;color:var(--as-ink);}.ac-price small{font-size:0.62rem;font-weight:700;color:var(--as-dim);} .ac-total{font-size:0.6rem;color:var(--as-dim);font-weight:600;margin-top:1px;} .ac-discount{display:inline-block;font-size:0.58rem;font-weight:700;color:var(--as-bg);background:#F5A623;padding:2px 7px;border-radius:6px;margin-bottom:4px;} .ac-btn{padding:10px 16px;background:linear-gradient(135deg,#E85D3A,#D94B2A);border:none;border-radius:12px;color:#fff;font-size:0.75rem;font-weight:700;cursor:pointer;font-family:'DM Sans', 'Noto Naskh Arabic', 'Noto Sans Devanagari', 'Noto Sans Thai', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans',sans-serif;white-space:nowrap;display:flex;align-items:center;gap:5px;-webkit-tap-highlight-color:transparent;box-shadow:0 4px 12px rgba(232,93,58,0.2);transition:transform 0.1s;} .ac-btn:active{transform:scale(0.96);}.ac-btn i{font-size:11px;} /* === MODALS === */ .sheet-overlay{display:none;position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,0);transition:background 0.35s;justify-content:center;align-items:center;padding:20px;} .sheet-overlay.open{display:flex;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);} .sheet{width:100%;max-width:400px;max-height:80vh;background:var(--as-surface-2);border-radius:24px;padding:0 20px 28px;overflow-y:auto;overscroll-behavior:contain;opacity:0;transform:scale(0.95) translateY(10px);transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);-webkit-overflow-scrolling:touch;box-shadow:0 8px 40px rgba(0,0,0,0.5);} .sheet-overlay.open .sheet{opacity:1;transform:scale(1) translateY(0);} .sheet-handle{display:flex;justify-content:center;padding:12px 0 4px;position:sticky;top:0;background:var(--as-surface-2);z-index:1;border-radius:24px 24px 0 0;} .sheet-handle::before{content:'';width:36px;height:4px;background:var(--as-border-2);border-radius:2px;} .sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;} .sheet-title{font-size:1rem;font-weight:800;color:var(--as-ink);display:flex;align-items:center;gap:8px;}.sheet-title i{font-size:15px;} .sheet-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--as-border);border:1px solid var(--as-border-2);border-radius:50%;color:var(--as-muted);font-size:12px;cursor:pointer;-webkit-tap-highlight-color:transparent;flex-shrink:0;transition:all 0.15s;} .sheet-close:active{background:var(--as-border-2);color:var(--as-ink);transform:scale(0.9);} .sheet-actions{display:flex;gap:10px;margin-top:24px;} .sheet-btn{flex:1;padding:15px;border:none;border-radius:14px;font-family:'DM Sans', 'Noto Naskh Arabic', 'Noto Sans Devanagari', 'Noto Sans Thai', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans',sans-serif;font-size:0.85rem;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;justify-content:center;gap:6px;transition:all 0.15s;} .sheet-btn:active{transform:scale(0.97);} .sheet-btn.primary{background:linear-gradient(135deg,#E85D3A,#D94B2A);color:#fff;box-shadow:0 4px 20px rgba(232,93,58,0.25);} .sheet-btn.secondary{background:var(--as-surface);color:var(--as-muted);border:1px solid var(--as-border);} /* Edit groups */ .ef-group{background:var(--as-surface);border:1px solid var(--as-border);border-radius:16px;padding:16px;margin-bottom:12px;} .ef-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;} .ef-icon{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;} .ef-label{font-size:0.75rem;font-weight:700;color:var(--as-ink);}.ef-sublabel{font-size:0.6rem;color:var(--as-dim);font-weight:500;margin-top:1px;} .edit-input{width:100%;padding:12px 14px;font-size:0.85rem;font-family:'DM Sans', 'Noto Naskh Arabic', 'Noto Sans Devanagari', 'Noto Sans Thai', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans',sans-serif;background:var(--as-surface-2);border:1px solid var(--as-border);border-radius:12px;color:var(--as-ink);outline:none;height:46px;transition:all 0.2s;} .edit-input:focus{border-color:#E85D3A;box-shadow:0 0 0 3px rgba(232,93,58,0.08);} .edit-input::placeholder{color:var(--as-faint);}.edit-input option{background:var(--as-surface-2);color:var(--as-ink);}select.edit-input{cursor:pointer;} .input-with-suggestions{position:relative;} #edit-suggestions{position:absolute;left:0;right:0;top:100%;z-index:3000;background:var(--as-surface);border:1px solid var(--as-border);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,0.5);max-height:180px;overflow-y:auto;display:none;margin-top:4px;} .suggestions-list{list-style:none;padding:4px 0;} .suggestions-list li{padding:11px 14px;cursor:pointer;transition:background 0.15s;color:var(--as-ink-2);} .suggestions-list li:active,.suggestions-list li.focused{background:rgba(232,93,58,0.08);} .suggestion-content{display:flex;align-items:center;}.suggestion-icon{margin-inline-end: 10px;font-size:13px;color:#2ECDA7;width:18px;text-align:center;flex-shrink:0;} .suggestion-text{flex:1;min-width:0;}.suggestion-main{font-size:0.82rem;font-weight:600;color:var(--as-ink);}.suggestion-sub{font-size:0.65rem;color:var(--as-dim);margin-top:1px;} .suggestions-list .no-results{padding:10px 12px;font-size:0.78rem;color:var(--as-dim);text-align:center;cursor:default;} /* Date trigger button */ .date-trigger{ display:flex;align-items:center;gap:8px;padding:10px 12px; background:var(--as-border);border:1px solid var(--as-border-2);border-radius:10px; cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color 0.2s;height:42px; } .date-trigger:active{border-color:#E85D3A;} .date-trigger i{color:#E85D3A;font-size:14px;flex-shrink:0;} .date-trigger .dt-text{flex:1;font-size:0.8rem;color:var(--as-ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .date-trigger .dt-placeholder{color:var(--as-faint);font-weight:500;} /* -- Calendar overlay -- */ .cal-overlay{display:none;position:fixed;inset:0;background:rgba(8,11,20,0.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:3000;justify-content:center;align-items:center;padding:16px;} .cal-overlay.open{display:flex;} .cal-sheet{ width:100%;max-width:380px;background:var(--as-surface);border:1px solid var(--as-border);border-radius:20px; padding:20px 16px 22px;max-height:80vh;overflow-y:auto; animation:calPop 0.25s cubic-bezier(0.34,1.56,0.64,1); } @keyframes calPop{from{opacity:0;transform:scale(0.95);}to{opacity:1;transform:scale(1);}} .cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;} .cal-head .cal-title{font-size:0.9rem;font-weight:700;color:var(--as-ink);} .cal-head button{background:none;border:none;color:var(--as-dim);font-size:16px;padding:6px;cursor:pointer;border-radius:8px;-webkit-tap-highlight-color:transparent;} .cal-head button:active{color:var(--as-ink);} .cal-sel{display:flex;gap:8px;margin-bottom:14px;} .cal-sel-box{flex:1;padding:10px;background:var(--as-border);border:1px solid var(--as-border-2);border-radius:10px;text-align:center;} .cal-sel-box.active{border-color:#E85D3A;} .cal-sel-label{font-size:0.6rem;font-weight:700;color:var(--as-dim);text-transform:uppercase;letter-spacing:0.05em;} .cal-sel-val{font-size:0.82rem;font-weight:700;color:var(--as-ink);margin-top:2px;} .cal-month{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;} .cal-month span{font-size:0.85rem;font-weight:700;color:var(--as-ink);} .cal-month button{background:none;border:none;color:var(--as-muted);font-size:16px;padding:6px 10px;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:8px;} .cal-month button:active{background:rgba(255,255,255,0.04);} .cal-month button:disabled{opacity:0.2;cursor:default;} .cal-week{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px;} .cal-week span{text-align:center;font-size:0.62rem;font-weight:700;color:var(--as-faint);padding:4px 0;text-transform:uppercase;} .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;} .cal-day{ text-align:center;padding:10px 0;font-size:0.78rem;font-weight:600;color:var(--as-ink-2); border-radius:8px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background 0.1s; } .cal-day:active{background:rgba(232,93,58,0.15);} .cal-day.empty{cursor:default;} .cal-day.disabled{color:var(--as-border-2);cursor:default;} .cal-day.today{color:#2ECDA7;font-weight:800;} .cal-day.start{background:#E85D3A;color:#fff;border-radius:8px;} .cal-done{ width:100%;padding:13px;margin-top:14px;background:linear-gradient(135deg,#E85D3A,#D94B2A); color:#fff;border:none;border-radius:12px;font-family:'DM Sans', 'Noto Naskh Arabic', 'Noto Sans Devanagari', 'Noto Sans Thai', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans',sans-serif;font-size:0.88rem; font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent; } .cal-done:disabled{opacity:0.4;cursor:default;} /* Sort options */ .sort-opt{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--as-surface);border:1px solid var(--as-border);border-radius:14px;color:var(--as-ink-2);font-size:0.82rem;font-weight:600;cursor:pointer;margin-bottom:8px;-webkit-tap-highlight-color:transparent;transition:all 0.15s;} .sort-opt:active{transform:scale(0.98);} .sort-opt.active{border-color:#E85D3A;background:rgba(232,93,58,0.05);color:#E85D3A;} .sort-ico{width:34px;height:34px;border-radius:11px;background:var(--as-border);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--as-dim);flex-shrink:0;transition:all 0.15s;} .sort-opt.active .sort-ico{background:rgba(232,93,58,0.1);color:#E85D3A;} .so-check{margin-left:auto;font-size:14px;color:var(--as-border);transition:color 0.15s;} .sort-opt.active .so-check{color:#E85D3A;} /* Map modal */ .map-modal .sheet{max-width:440px;max-height:85vh;background:var(--as-bg);} .map-modal .sheet-handle{background:var(--as-bg);} .map-info{font-size:0.72rem;color:var(--as-muted);font-weight:600;margin-bottom:12px;}.map-info span{color:#E85D3A;font-weight:800;} #map{width:100%;height:50vh;border-radius:18px;background:var(--as-border);z-index:0;} /* Leaflet popup overrides */ .leaflet-popup-content-wrapper{background:var(--as-surface)!important;border:1px solid var(--as-border)!important;border-radius:14px!important;box-shadow:0 8px 32px rgba(0,0,0,0.5)!important;padding:0!important;} .leaflet-popup-content{margin:0!important;font-family:'DM Sans', 'Noto Naskh Arabic', 'Noto Sans Devanagari', 'Noto Sans Thai', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans',sans-serif!important;color:var(--as-ink-2)!important;}.leaflet-popup-tip{background:var(--as-surface)!important;border-inline-end: 1px solid var(--as-border)!important;border-bottom:1px solid var(--as-border)!important;} .leaflet-container a.leaflet-popup-close-button{color:var(--as-muted)!important;font-size:20px!important;padding:8px 10px!important;z-index:1!important;} .leaflet-container a.leaflet-popup-close-button:hover{color:var(--as-ink)!important;} .leaflet-control-zoom a{background:var(--as-surface-2)!important;color:var(--as-ink-2)!important;border-color:var(--as-border)!important;border-radius:10px!important;width:32px!important;height:32px!important;line-height:32px!important;} .leaflet-control-zoom{border:none!important;box-shadow:0 2px 12px rgba(0,0,0,0.2)!important;border-radius:12px!important;overflow:hidden;} .leaflet-control-attribution{font-size:8px!important;background:rgba(255,255,255,0.7)!important;color:var(--as-dim)!important;} .leaflet-control-attribution a{color:var(--as-faint)!important;} @media(max-width:380px){.page{padding:0 10px 100px;}.ac-img{height:150px;}#map{height:45vh;}} /* Loading overlay */ .search-loading-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(8, 11, 20, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; } .search-loading-content { text-align: center; } .search-loading-spinner { width: 48px; height: 48px; border: 3px solid rgba(232,93,58,0.2); border-top-color: #E85D3A; border-radius: 50%; animation: searchSpin 0.8s linear infinite; margin: 0 auto 16px; } @keyframes searchSpin { to { transform: rotate(360deg); } } .search-loading-text { font-family: 'DM Sans', 'Noto Naskh Arabic', 'Noto Sans Devanagari', 'Noto Sans Thai', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans', sans-serif; font-size: 0.95rem; color: var(--as-ink); font-weight: 500; } /* ════════════════════════════════════════════════════════════ DESKTOP POLISH — ≥1024px Activity cards become horizontal magazine cards (image left, content right) with refined typography and modal filter/sort. ════════════════════════════════════════════════════════════ */ @media (min-width: 1024px) { body { isolation: isolate; } /* PAGE — width handled by Phase A scaffold; we add ambient glow only */ .page { position: relative; } .page::before { content: ''; position: absolute; top: 0; left: -32px; right: -32px; height: 260px; background: radial-gradient(ellipse at 30% 20%, rgba(232,93,58,0.10) 0%, transparent 60%); z-index: -1; pointer-events: none; filter: blur(40px); } /* SEARCH BAR */ .search-bar { padding: 18px 22px; gap: 16px; margin: 24px 0 14px; border-radius: 18px; background: linear-gradient(180deg, var(--as-surface-2) 0%, var(--as-surface-2) 100%); border-color: rgba(255,255,255,0.06); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); } .sb-dest { font-family: 'Playfair Display', 'DM Sans', Georgia, serif; font-size: 1.6rem; letter-spacing: -0.012em; line-height: 1.15; } .sb-meta { font-size: 0.82rem; gap: 8px; margin-top: 8px; } .sb-pill { padding: 5px 12px; font-size: 0.74rem; border-radius: 8px; } .sb-edit { width: 46px; height: 46px; font-size: 16px; border-radius: 13px; transition: background 0.15s ease, transform 0.15s ease; } .sb-edit:hover { background: rgba(232,93,58,0.16); transform: translateY(-1px); } /* CHIPS */ .chips { gap: 10px; padding: 4px 0 14px; overflow: visible; } .chip { padding: 11px 18px; font-size: 0.85rem; border-radius: 12px; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .chip:hover { background: var(--as-surface-2); border-color: var(--as-border-2); transform: translateY(-1px); } /* RESULT COUNT */ .result-count { font-size: 0.95rem; font-weight: 700; color: var(--as-ink); padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 16px; } /* ACTIVITY CARDS — VERTICAL TILES IN A GRID tratok_design_system.css turns #activityResults into a 2-3 col grid. Each card is vertical (image top, body below) and fills the cell. */ .act-card { display: flex; flex-direction: column; background: linear-gradient(180deg, var(--as-surface-2) 0%, var(--as-surface-2) 100%); border: 1px solid rgba(255,255,255,0.06); border-radius: 18px; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.28s ease, box-shadow 0.28s ease; } .act-card:hover { transform: translateY(-3px); border-color: rgba(232, 93, 58, 0.28); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 16px 36px rgba(0, 0, 0, 0.35); } /* IMAGE — top of card, fixed aspect ratio */ .ac-img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; background: var(--as-surface-2); } /* BODY — flex column with footer pinned to bottom */ .ac-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 18px 20px; min-width: 0; } .ac-name { font-family: 'Playfair Display', 'DM Sans', Georgia, serif; font-size: 1.25rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; } .ac-location { font-size: 0.82rem; margin-top: 5px; gap: 6px; } .ac-location i { font-size: 11px; } .ac-desc { font-size: 0.86rem; line-height: 1.5; color: var(--as-muted); margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ac-perks { gap: 10px; margin-top: 10px; } .ac-perk { font-size: 0.74rem; } .ac-participants { font-size: 0.78rem; margin-top: 8px; } /* FOOTER — separator above, price stack on left, CTA on right */ .ac-footer { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.05); align-items: flex-end; gap: 14px; } .ac-discount { font-size: 0.66rem; padding: 4px 9px; border-radius: 99px; margin-bottom: 4px; } .ac-per { font-size: 0.82rem; color: var(--as-muted); } .ac-price { font-family: 'Playfair Display', 'DM Sans', Georgia, serif; font-size: 1.65rem; font-weight: 800; color: var(--as-ink); font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; line-height: 1.1; letter-spacing: -0.01em; margin-top: 2px; } .ac-price small { font-family: 'DM Sans', 'Noto Naskh Arabic', 'Noto Sans Devanagari', 'Noto Sans Thai', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans', sans-serif; font-size: 0.78rem; color: var(--as-muted); font-weight: 600; letter-spacing: 0; margin-left: 4px; } .ac-total { font-size: 0.74rem; color: var(--as-muted); margin-top: 4px; } .ac-btn { padding: 12px 22px; font-size: 0.88rem; gap: 7px; border-radius: 12px; white-space: nowrap; flex-shrink: 0; transition: filter 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease; } .ac-btn:hover { filter: brightness(1.06); box-shadow: 0 8px 22px rgba(232,93,58,0.36); transform: translateY(-1px); } .ac-btn:active { transform: translateY(0); } /* MODALS — bottom sheets become centered scale-fade dialogs */ .sheet-overlay { padding: 0; align-items: center; } .sheet-overlay > .sheet { max-width: 540px; max-height: 86vh; border-radius: 22px; padding: 24px 28px 28px; background: linear-gradient(180deg, var(--as-surface-2) 0%, var(--as-surface-2) 100%); box-shadow: 0 24px 60px rgba(0,0,0,0.6); } .sheet-overlay > .sheet > .sheet-handle { display: none; } .sheet-title { font-family: 'Playfair Display', 'DM Sans', Georgia, serif; font-size: 1.3rem; letter-spacing: -0.015em; } /* Edit/sort/filter polish */ .ef-group { padding: 18px; margin-bottom: 14px; border-radius: 16px; } .ef-icon { width: 38px; height: 38px; font-size: 14px; border-radius: 11px; } .ef-label { font-size: 0.92rem; } .ef-sublabel { font-size: 0.7rem; } .edit-input { padding: 13px 16px; font-size: 0.9rem; height: 48px; } .date-trigger { padding: 13px 16px; height: 48px; } .dt-text { font-size: 0.9rem; } .f-card { padding: 16px; margin-bottom: 12px; border-radius: 14px; } .f-card-head { gap: 12px; margin-bottom: 12px; } .f-card-ico { width: 36px; height: 36px; font-size: 14px; } .f-card-title { font-size: 0.92rem; } .sort-opt { padding: 13px 16px; gap: 12px; font-size: 0.9rem; margin-bottom: 6px; transition: background 0.15s ease; } .sort-opt:hover { background: rgba(255,255,255,0.04); } .sheet-actions { gap: 10px; margin-top: 20px; } .sheet-btn { padding: 13px 16px; font-size: 0.88rem; border-radius: 12px; transition: filter 0.18s ease, box-shadow 0.18s ease, background 0.15s ease; } .sheet-btn.primary:hover { filter: brightness(1.06); box-shadow: 0 6px 18px rgba(232,93,58,0.32); } .sheet-btn.secondary:hover { background: rgba(255,255,255,0.08); } } /* Wider desktops — bigger typography */ @media (min-width: 1280px) { .sb-dest { font-size: 1.85rem; } .ac-name { font-size: 1.25rem; } .ac-price { font-size: 1.55rem; } } /* ──────────────────────────────────────────────────────────────────────── * Search-page hero + edit-modal polish (rev May 2026 — redesign 2). * * Appended last so it wins on source order against the per-page inline *