/*
 * doond.com — custom styles
 * Plain hand-written CSS layered on top of Bootstrap 5.
 * Served statically from /public/css/app.css — no compiler, no build step.
 * Edit freely; changes show on next page refresh.
 */

:root {
    --doond-primary: #2563eb;   /* matches Bootstrap primary override below */
    --doond-dark: #0b2a4a;
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Smaller, more compact base type across the whole site. */
    font-size: 0.9rem;
}

/* ---- Hero (home page) ---------------------------------------------------- */
.hero {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #3b82f6 100%);
    color: #fff;
}
.hero .form-control {
    height: 3.25rem;
}

/* ---- Category / listing cards ------------------------------------------- */
.card-hover {
    transition: transform .15s ease, box-shadow .15s ease;
}
.card-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 .75rem 1.5rem rgba(2, 6, 23, .12) !important;
}

/* Browse hub: category boxes — 4 per row on large screens (row-cols-lg-4),
   each ~300px wide and a fixed 250px tall. */
.category-box {
    width: 100%;
    max-width: 300px;
    height: 250px;
    margin: 0 auto;
    transition: transform .15s ease, box-shadow .15s ease;
}
.category-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 .75rem 1.5rem rgba(2, 6, 23, .12) !important;
}

.category-tile {
    text-decoration: none;
    color: inherit;
    display: block;
}
.category-tile .icon-circle {
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(37, 99, 235, .1);
    color: var(--doond-primary);
    font-size: 1.25rem;
}

/* ---- Search typeahead ---------------------------------------------------- */
.typeahead-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    margin-top: .25rem;
    padding: .25rem;
    display: none;
    max-height: 60vh;
    overflow: auto;
}
.typeahead-menu.show { display: block; }
.typeahead-item {
    display: flex;
    align-items: center;
    padding: .4rem .55rem;
    border-radius: .4rem;
    text-decoration: none;
    color: #1e293b;
    font-size: .85rem;
}
.typeahead-item:hover, .typeahead-item.active { background: #f1f5f9; }

/* ---- Brand logo ---------------------------------------------------------- */
.brand-logo {
    width: auto;
    max-height: 36px;
    object-fit: contain;
}

/* ---- Skeleton loaders (shown while AJAX search is loading) --------------- */
.skeleton-card {
    border-radius: .5rem;
    background: #fff;
    box-shadow: 0 .125rem .25rem rgba(2, 6, 23, .06);
    padding: 1.25rem;
    height: 100%;
}
.skeleton-line {
    height: .75rem;
    border-radius: .375rem;
    margin-bottom: .6rem;
    background: linear-gradient(90deg, #eef1f5 25%, #e2e7ee 37%, #eef1f5 63%);
    background-size: 400% 100%;
    animation: doond-shimmer 1.3s ease infinite;
}
.skeleton-line.w-75 { width: 75%; }
.skeleton-line.w-50 { width: 50%; }
.skeleton-line.w-25 { width: 25%; }
@keyframes doond-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ---- Star rating --------------------------------------------------------- */
.stars i {
    color: #f59e0b;
}

/* ---- Misc ---------------------------------------------------------------- */
.navbar-brand .bi {
    line-height: 1;
}
.min-vh-75 {
    min-height: 75vh;
}
.cursor-pointer {
    cursor: pointer;
}

/* ---- Responsiveness (mobile / tablet / desktop) -------------------------- */
/* Never allow horizontal overflow from wide content. */
html, body { overflow-x: hidden; }

/* Media and embeds always scale to their container. */
img, iframe, video, table { max-width: 100%; }
img { height: auto; }

/* Tablet and below: tighten the hero + headings a touch. */
@media (max-width: 991.98px) {
    .hero { padding-top: 1.5rem; padding-bottom: 1.5rem; }
}

/* Phones: smaller hero type, full-width search button, comfortable tap targets. */
@media (max-width: 575.98px) {
    h1, .h1 { font-size: 1.5rem; }
    h2, .h2 { font-size: 1.25rem; }
    .hero .input-group-lg > .form-control,
    .hero .input-group-lg > .btn { font-size: 1rem; }
    .btn { padding-top: .45rem; padding-bottom: .45rem; }
    .category-tile .card-body { padding: .5rem .75rem; }
    .container, .container-lg, .container-md { padding-left: .85rem; padding-right: .85rem; }
}

/* Brand-coloured social chips on listing detail. */
.social-chip { background:#fff; transition:background-color .15s ease, color .15s ease; text-decoration:none; }
.social-chip:hover { background-color: var(--clr, #6c757d); color:#fff !important; }

/* ---- Colorful type chooser pills (Add a listing) ---- */
.type-pill { border:1px solid #e2e8f0; color:#334155; background:#fff; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease; }
.type-pill i { color: var(--tc, #64748b); }
.type-pill:hover { border-color: var(--tc); color: var(--tc); transform: translateY(-2px); box-shadow: 0 .25rem .6rem rgba(0,0,0,.10); }
.type-pill.active { background: var(--tc); border-color: var(--tc); color:#fff; }
.type-pill.active i { color:#fff; }

/* ---- Compact, small-font listing form ---- */
.lf-compact .form-label { font-size:.78rem; font-weight:600; color:#475569; margin-bottom:.15rem; }
.lf-compact .form-control, .lf-compact .form-select, .lf-compact textarea { font-size:.85rem; }
.lf-compact .form-text { font-size:.72rem; }
.lf-compact .nav-tabs .nav-link { font-size:.82rem; padding:.4rem .7rem; }
.lf-compact .row { --bs-gutter-y:.5rem; }
/* Inline "Label : field" on wider screens */
@media (min-width: 768px) {
  .lf-compact .lf-row { display:flex; align-items:center; gap:.5rem; }
  .lf-compact .lf-row > .form-label { flex:0 0 150px; text-align:right; margin-bottom:0; }
  .lf-compact .lf-row > .form-label::after { content:" :"; }
  .lf-compact .lf-row > .lf-field { flex:1 1 auto; min-width:0; }
}