/* racesapp/static/racesapp/css/mobile.css */
/* Horizontally scrollable tab strips (camel page seasons, etc.) */
.nav-scroll { display: flex; overflow-x: auto; flex-wrap: nowrap;
              -webkit-overflow-scrolling: touch; }
.nav-scroll > li { float: none; flex: 0 0 auto; }
.nav-scroll > li > a { min-height: 44px; white-space: nowrap; }

/* Global search box + dropdown */
.global-search { position: relative; margin: 8px 15px; }
.global-search input[type="search"] { width: 100%; min-width: 220px; padding: 10px 12px;
    font-size: 16px; border: 1px solid #ccc; border-radius: 4px; }
.global-search-results { position: absolute; right: 0; left: 0; top: 100%; z-index: 1000;
    direction: rtl; background: #fff; border: 1px solid #ddd; border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,.15); max-height: 60vh; overflow-y: auto; }
/* Scope bar: apply the typed query to camels (المطايا) or owners (الملاك) */
.gs-scope { display: flex; gap: 8px; padding: 10px 12px 8px; }
.gs-scope-btn { flex: 1 1 0; display: flex; align-items: center; justify-content: center;
    min-height: 40px; padding: 8px 6px; border: 1px solid #a94442; border-radius: 8px;
    color: #a94442; background: #fff; font-size: 13px; font-weight: 700;
    text-align: center; text-decoration: none; }
.gs-scope-btn:hover, .gs-scope-btn:active, .gs-scope-btn:focus {
    background: #a94442; color: #fff; text-decoration: none; }

.search-group-title { padding: 6px 14px 2px; font-size: 10.5px; font-weight: 700;
    color: #a94442; letter-spacing: .3px; text-align: right; }

/* Compact result row: name — owner ........ N مشاركة · YY-YY (wraps, never truncates) */
.gs-item { display: flex; align-items: baseline; gap: 8px; padding: 6px 14px;
    color: #222; text-decoration: none; border-top: 1px solid #f2f2f2; font-size: 12px; }
.search-group-title + .gs-item { border-top: 0; }
.gs-item:hover, .gs-item:active, .gs-item:focus {
    text-decoration: none; background: rgba(169,68,66,.06); }
.gs-primary { flex: 1 1 auto; min-width: 0; white-space: normal;
    word-break: break-word; line-height: 1.35; }
.gs-name { font-weight: 700; color: #222; }
.gs-sub { color: #9a9a9a; font-weight: 400; }
.gs-meta { flex: 0 0 auto; color: #8a8a8a; font-size: 11px; white-space: nowrap; }
@media (max-width: 767px) {
    .global-search { margin: 8px 10px; }
}

/* Prominent homepage (hero) search — sits under the "كيف تستفيد" heading */
.global-search--hero { max-width: 560px; margin: 22px auto 4px; }
.global-search--hero input[type="search"] {
    padding: 15px 22px 15px 52px; font-size: 18px; line-height: 1.4;
    border: 2px solid #a94442; border-radius: 999px; background: #fff; color: #333;
    box-shadow: 0 6px 18px rgba(0,0,0,.10);
    transition: box-shadow .15s ease, border-color .15s ease; }
.global-search--hero input[type="search"]:focus {
    outline: none; border-color: #7a2f2d; box-shadow: 0 8px 26px rgba(169,68,66,.25); }
.global-search--hero .global-search-icon {
    position: absolute; top: 50%; left: 22px; transform: translateY(-50%);
    color: #a94442; font-size: 18px; pointer-events: none; z-index: 2; }
.global-search--hero .global-search-results { border-radius: 0 0 16px 16px; }
@media (max-width: 767px) {
    .global-search--hero { max-width: 100%; margin: 16px 8px 4px; }
    .global-search--hero input[type="search"] { font-size: 16px; padding: 13px 16px 13px 44px; }
    .global-search--hero .global-search-icon { left: 16px; }
}

/* Compare picker */
.compare-picker { position: relative; margin-bottom: 10px; }
.compare-input { width: 100%; padding: 10px 12px; font-size: 16px;
    border: 1px solid #ccc; border-radius: 4px; }
.compare-results { position: absolute; right: 15px; left: 15px; top: 100%;
    z-index: 1000; background: #fff; border: 1px solid #ddd;
    box-shadow: 0 4px 10px rgba(0,0,0,.15); max-height: 50vh; overflow-y: auto; }
.compare-results a { display: block; padding: 12px 14px; min-height: 44px;
    color: #333; border-bottom: 1px solid #f0f0f0; text-align: right; }

/* === Global mobile foundation === */
html { -webkit-text-size-adjust: 100%; }
img { max-width: 100%; height: auto; }
input, select, textarea { font-size: 16px; }
.table-responsive { -webkit-overflow-scrolling: touch; }

@media (max-width: 767px) {
    body { font-size: 15px; }
    .container { padding-right: 10px; padding-left: 10px; }
    h1, .section-title { font-size: 24px; }
    h2 { font-size: 21px; }
    .btn { min-height: 44px; padding: 10px 16px; }
    .table { font-size: 13px; }
    .navbar-nav h5 { min-height: 44px; line-height: 30px; }
}