/* ontop.lk — main.css */

/* ── Fonts ── */
body { font-family: 'DM Sans', sans-serif; font-size: 17px; }
.font-sora { font-family: 'Sora', sans-serif; }

/* ── Card hover ── */
.card-hover { transition: transform .18s ease, box-shadow .18s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(20,43,93,0.09); }

/* ── Scrollbar hide ── */
.scrollbar-hide { scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* ── Hero background ── */
.hero-bg {
  background: linear-gradient(135deg, #0d1f47 0%, #1e3f8a 100%),
    url('https://images.unsplash.com/photo-1588598198321-9735fd636df2?w=1600&q=80') center/cover no-repeat;
  min-height: 480px;
}
@media(max-width:640px){ .hero-bg { min-height: 420px; } }

/* ── Suggestion dropdown ── */
#suggestions { display:none; }
#suggestions.open { display:block; }
.suggestion-item { padding:10px 20px; cursor:pointer; border-bottom:1px solid #f0f2f8; transition:background .15s; display:flex; align-items:center; gap:12px; }
.suggestion-item:hover { background:#eaeeF7; }
.suggestion-item .match { color:#142B5D; font-weight:700; }

/* ── Fade-up animation ── */
@keyframes fadeUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
.fade-up-1 { animation: fadeUp .55s ease both; }
.fade-up-2 { animation: fadeUp .55s .12s ease both; }
.fade-up-3 { animation: fadeUp .55s .24s ease both; }

/* ── Active filter pills ── */
.active-pill { display:inline-flex; align-items:center; gap:6px; background:#eaeeF7; color:#142B5D; font-size:13px; font-weight:600; padding:5px 12px; border-radius:20px; }
.active-pill-x { background:none; border:none; cursor:pointer; color:#142B5D; font-size:16px; line-height:1; text-decoration:none; }
.active-pill-x:hover { color:#d95e0e; }

/* ── Sort select ── */
.sort-select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; }

/* ── Form inputs ── */
.field-input {
  width: 100%; border: 1.5px solid #d0d8ee; border-radius: 12px;
  padding: 12px 16px; font-size: 16px; color: #1f2937; outline: none;
  transition: border-color .2s; font-family: 'DM Sans', sans-serif; background: #fff;
}
.field-input:focus { border-color: #142B5D; }

/* ── Gallery ── */
.gallery-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 210px 210px;
  gap: 6px; border-radius: 16px; overflow: hidden;
}
.gallery-main { grid-row: 1/3; }
.gallery-cell { cursor: pointer; transition: filter .2s; display: flex; align-items: center; justify-content: center; }
.gallery-cell:hover { filter: brightness(.85); }
@media(max-width:640px){
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 160px 130px; }
  .gallery-main { grid-row: 1/2; grid-column: 1/3; }
}

/* ── Tab underline ── */
.tab-btn { position:relative; padding-bottom:12px; font-weight:500; color:#6b7280; font-size:16px; cursor:pointer; transition:color .2s; border:none; background:none; white-space:nowrap; }
.tab-btn::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2.5px; background:transparent; border-radius:2px; transition:background .2s; }
.tab-btn.active { color:#142B5D; font-weight:700; }
.tab-btn.active::after { background:#142B5D; }

/* ── Star colours ── */
.star-fill  { color: #F37121; }
.star-empty { color: #d1d5db; }

/* ── RTE ── */
.rte-toolbar { display:flex; gap:4px; padding:8px 10px; border-bottom:1.5px solid #d0d8ee; background:#f9fafb; border-radius:12px 12px 0 0; flex-wrap:wrap; }
.rte-btn { padding:5px 10px; border-radius:7px; border:1px solid #d0d8ee; background:#fff; font-size:13px; font-weight:700; cursor:pointer; color:#374151; transition:all .15s; }
.rte-btn:hover { background:#eaeeF7; border-color:#142B5D; color:#142B5D; }
.rte-content { min-height:140px; padding:14px 16px; outline:none; font-size:16px; line-height:1.7; color:#1f2937; border:1.5px solid #d0d8ee; border-top:none; border-radius:0 0 12px 12px; font-family:'DM Sans',sans-serif; }
.rte-content:focus { border-color:#142B5D; }
.rte-content h2 { font-size:20px; font-weight:700; margin:8px 0 4px; }
.rte-content ul { list-style:disc; padding-left:20px; margin:6px 0; }

/* ── Reading progress ── */
#reading-progress { position:fixed; top:0; left:0; height:3px; background:#F37121; z-index:100; transition:width .1s; width:0; }

/* ── Dashboard toggle ── */
.tog { position:relative; width:40px; height:22px; background:#d1d5db; border-radius:11px; cursor:pointer; transition:background .2s; flex-shrink:0; display:inline-block; }
.tog.on { background:#142B5D; }
.tog-thumb { position:absolute; top:2px; left:2px; width:18px; height:18px; background:#fff; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .2s; }
.tog.on .tog-thumb { transform:translateX(18px); }

/* ── Add listing form ── */
.plan-card { cursor:pointer; transition:all .2s; border:2px solid #e5e7eb; border-radius:20px; background:#fff; }
.plan-card.selected-free     { border-color:#142B5D; box-shadow:0 0 0 4px #eaeeF7; }
.plan-card.selected-featured { border-color:#F37121; box-shadow:0 0 0 4px #fff3eb; }

.form-section { background:#ffffff; border:1.5px solid #d0d8ee; border-radius:20px; padding:28px 32px; margin-bottom:20px; }
@media(max-width:640px){ .form-section { padding:20px 16px; } }

.section-num { width:32px; height:32px; border-radius:50%; background:#142B5D; color:#fff; font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

.field-label  { display:block; font-size:14px; font-weight:600; color:#374151; margin-bottom:6px; }
.field-hint   { font-size:13px; color:#9ca3af; margin-top:4px; }
.required     { color:#F37121; margin-left:2px; }

.input-prefix { display:flex; align-items:center; border:1.5px solid #d0d8ee; border-radius:12px; overflow:hidden; transition:border-color .2s; background:#fff; }
.input-prefix:focus-within { border-color:#142B5D; }
.input-prefix span { background:#f9fafb; padding:12px 14px; font-size:14px; color:#6b7280; border-right:1.5px solid #e5e7eb; white-space:nowrap; flex-shrink:0; }
.input-prefix input { flex:1; border:none; outline:none; padding:12px 14px; font-size:16px; color:#1f2937; font-family:'DM Sans',sans-serif; min-width:0; background:#fff; }

.upload-zone { border:2px dashed #b8c4de; border-radius:14px; padding:28px; text-align:center; cursor:pointer; transition:all .2s; }
.upload-zone:hover, .upload-zone.drag-over { border-color:#142B5D; background:#eaeeF7; }

.hours-row { display:grid; grid-template-columns:110px 1fr 1fr 60px; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid #e8ecf5; }
@media(max-width:540px){ .hours-row { grid-template-columns:80px 1fr 1fr 50px; gap:6px; } }

.tog-track { position:relative; width:44px; height:24px; background:#d1d5db; border-radius:12px; cursor:pointer; transition:background .2s; flex-shrink:0; }
.tog-track.on { background:#142B5D; }
.tog-track .tog-thumb-sm { position:absolute; top:3px; left:3px; width:18px; height:18px; background:#fff; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .2s; }
.tog-track.on .tog-thumb-sm { transform:translateX(20px); }

.cat-tag { display:inline-flex; align-items:center; gap:6px; background:#eaeeF7; color:#142B5D; font-size:13px; font-weight:600; padding:5px 10px 5px 12px; border-radius:20px; }
.cat-tag button { background:none; border:none; cursor:pointer; color:#142B5D; font-size:16px; line-height:1; padding:0; opacity:.6; }
.cat-tag button:hover { opacity:1; }

#cat-dropdown { display:none; }
#cat-dropdown.open { display:block; }
.cat-option { padding:10px 14px; cursor:pointer; font-size:15px; border-bottom:1px solid #f3f4f6; transition:background .15s; }
.cat-option:hover { background:#e8ecf5; color:#142B5D; }
.cat-option:last-child { border-bottom:none; }

.loc-tab { padding:9px 20px; border-radius:10px; font-size:14px; font-weight:600; cursor:pointer; border:1.5px solid #d0d8ee; color:#6b7280; transition:all .2s; background:#fff; }
.loc-tab.active { background:#142B5D; color:#fff; border-color:#142B5D; }

.char-count { font-size:12px; color:#9ca3af; text-align:right; margin-top:4px; }

#success-modal { display:none; }
#success-modal.open { display:flex; }

/* ── Prose content (about/privacy/terms pages) ── */
.prose-content { color:#374151; line-height:1.8; font-size:17px; }
.prose-content h1 { font-family:'Sora',sans-serif !important; font-size:2rem !important; font-weight:800 !important; color:#142B5D; margin:0 0 1rem; display:block; }
.prose-content h2 { font-family:'Sora',sans-serif !important; font-size:1.4rem !important; font-weight:700 !important; color:#142B5D; margin:2rem 0 .75rem; display:block; }
.prose-content h3 { font-family:'Sora',sans-serif !important; font-size:1.15rem !important; font-weight:700 !important; color:#1f2937; margin:1.5rem 0 .5rem; display:block; }
.prose-content p  { margin:0 0 1rem; }
.prose-content ul { list-style:disc !important; padding-left:1.5rem; margin:0 0 1rem; }
.prose-content ol { list-style:decimal !important; padding-left:1.5rem; margin:0 0 1rem; }
.prose-content li { margin-bottom:.4rem; }
.prose-content a  { color:#142B5D; text-decoration:underline; }
.prose-content a:hover { color:#F37121; }
.prose-content strong { font-weight:700 !important; color:#1f2937; }
.prose-content hr  { border:none; border-top:1.5px solid #e8ecf5; margin:2rem 0; }
.prose-content img { max-width:100%; height:auto; border-radius:12px; margin:1.5rem 0; display:block; }

/* ── Form validation ── */
input.invalid, textarea.invalid, select.invalid { border-color: #ef4444 !important; }
span.error { display:block; font-size:12px; color:#dc2626; margin-top:5px; font-weight:500; }

/* ── View Transitions API (mobile only) ── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 200ms ease both vt-out; }
::view-transition-new(root) { animation: 200ms ease both vt-in; }
@keyframes vt-out { to   { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(6px);  } }
@media (min-width: 1024px) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}