/* ================================================================================
   VISIT.CSS - The one screen the + lands on
   Photo, what's on, one submit. Everything scoped to #visitOverlay except
   the tag sheet, which sits above it.
   ================================================================================ */

#visitOverlay {
    position: fixed;
    inset: 0;
    background-image: var(--bg-home-page);
    z-index: var(--z-overlay);
    display: none;
    flex-direction: column;
    /* Same treatment as #snapOverlay - caps Android's invalidation region so
       repaints can't leak past the overlay's edges. */
    will-change: transform;
    isolation: isolate;
    contain: layout style paint;
}

#visitOverlay.active {
    display: flex;
}

#visitOverlay .visit-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ================================
   VENUE CHIP
   Pinned at the top and never asked again. Three states, same
   vocabulary as the create sheet and snap: green when GPS
   guessed, purple when the user said so, plain when unset.
   ================================ */

#visitOverlay .visit-venue-chip {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
    flex-shrink: 0;
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-card);
    border: none;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-primary);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast);
}

#visitOverlay .visit-venue-chip:active {
    background: var(--bg-section);
}

#visitOverlay .visit-venue-chip.is-verified {
    border-bottom-color: rgba(74, 222, 128, 0.35);
}

#visitOverlay .visit-venue-chip.is-set {
    border-bottom-color: var(--border-purple);
}

#visitOverlay .visit-venue-icon {
    font-size: var(--icon-sm);
    flex-shrink: 0;
}

#visitOverlay .visit-venue-info {
    flex: 1;
    min-width: 0;
}

#visitOverlay .visit-venue-label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

#visitOverlay .visit-venue-chip.is-verified .visit-venue-label {
    color: var(--green);
}

#visitOverlay .visit-venue-chip.is-set .visit-venue-label {
    color: var(--purple);
}

#visitOverlay .visit-venue-name {
    font-size: var(--text-md);
    font-weight: 700;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#visitOverlay .visit-venue-change {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-light);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
}

/* ================================
   BODY
   ================================ */

#visitOverlay .visit-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-lg);
    padding-bottom: var(--space-2xl);
}

#visitOverlay .visit-section {
    margin-bottom: var(--space-xl);
}

#visitOverlay .visit-section-label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
}

#visitOverlay .visit-section-hint {
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.4;
    margin: 0 0 var(--space-md);
}

/* Only ever on screen when there's more than one photo, so it costs the
   common case nothing. */
#visitOverlay .visit-title-wrap {
    margin-bottom: var(--space-md);
}

#visitOverlay .visit-title {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 11px var(--space-md);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--text-md);
    outline: none;
    transition: border-color var(--transition-fast);
}

#visitOverlay .visit-title:focus {
    border-color: var(--border-purple);
}

#visitOverlay .visit-title::placeholder {
    color: var(--text-muted);
}

/* One caption per photo. Always available rather than appearing after some
   other action - a rule about when it turns up is one more thing to explain,
   and the bar shot wants a caption as much as the pint does. */
#visitOverlay .visit-caption-wrap {
    margin-top: var(--space-md);
}

#visitOverlay .visit-caption-label {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-xs);
}

#visitOverlay .visit-caption {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 10px var(--space-md);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--text-sm);
    outline: none;
    transition: border-color var(--transition-fast);
}

#visitOverlay .visit-caption:focus {
    border-color: var(--border-purple);
}

#visitOverlay .visit-caption::placeholder {
    color: var(--text-muted);
}

/* Shown when the search was opened by tapping Tag beer, so it's obvious why
   the list appeared and what picking one will do. */
#visitOverlay .visit-picking-hint {
    font-size: var(--text-sm);
    color: var(--text-purple);
    margin: 0 0 var(--space-md);
    line-height: 1.4;
}

/* ================================
   PHOTOS
   Empty is a full-width invitation - the camera shouldn't shrink
   into a corner before anyone's used it. Once there's a photo it
   becomes a strip with a small + on the end.
   ================================ */

#visitOverlay .visit-shots {
    display: flex;
    gap: var(--space-md);
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: var(--space-xs);
}

#visitOverlay .visit-shots::-webkit-scrollbar {
    display: none;
}

#visitOverlay .visit-shoot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 120px;
    background: var(--bg-purple);
    border: 2px dashed var(--border-purple);
    border-radius: var(--radius-xl);
    color: var(--text-primary);
    font-family: inherit;
    cursor: pointer;
    transition: transform var(--transition-fast);
}

#visitOverlay .visit-shoot:active {
    transform: scale(0.99);
}

#visitOverlay .visit-shoot-icon {
    font-size: 24px;
}
#visitOverlay .visit-shoot-label {
    font-size: var(--text-md);
    font-weight: 700;
}

#visitOverlay .visit-shoot-hint {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

#visitOverlay .visit-shot {
    position: relative;
    flex: 0 0 auto;
    width: 104px;
    height: 152px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #000;
    border: none;
    padding: 0;
}

#visitOverlay .visit-shot-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Removing a photo is much rarer than tagging one, so it stops shouting -
   small, low contrast, out of the way. The tag strip is what should catch
   the eye. */
#visitOverlay .visit-shot-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    border: none;
    color: rgba(255, 255, 255, 0.75);
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#visitOverlay .visit-shot-remove:active {
    background: rgba(239, 68, 68, 0.8);
    color: #fff;
}

#visitOverlay .visit-shot-remove:active {
    background: rgba(239, 68, 68, 0.8);
}

/* Untagged asks a question so it's obvious something's wanted; tagged shows
   the beer's name, so the photo says what it's of and you can see at a glance
   which ones you've done. Three identical "Tag" labels told you nothing. */
/* Two strips stacked at the foot of the photo: what it's of, and what you
   want to say about it. Both optional, both quiet until used. */
#visitOverlay .visit-shot-actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

#visitOverlay .visit-shot-tag,
#visitOverlay .visit-shot-caption {
    display: block;
    width: 100%;
    padding: 6px;
    border: none;
    color: #fff;
    font-family: inherit;
    font-size: var(--text-xxs);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#visitOverlay .visit-shot-tag {
    background: rgba(0, 0, 0, 0.7);
}

#visitOverlay .visit-shot-tag.is-untagged {
    background: rgba(139, 92, 246, 0.85);
}

#visitOverlay .visit-shot-caption {
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#visitOverlay .visit-shot-caption.has {
    color: #fff;
    font-style: italic;
}

/* The photo whose caption is currently being edited. */
#visitOverlay .visit-shot.is-active {
    outline: 2px solid var(--border-purple);
    outline-offset: 2px;
}

#visitOverlay .visit-shot-tag:active {
    background: rgba(139, 92, 246, 0.7);
}

#visitOverlay .visit-shot-more {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-purple);
    border: 2px dashed var(--border-purple);
    border-radius: var(--radius-lg);
    color: var(--purple);
    font-size: 26px;
    cursor: pointer;
}

#visitOverlay .visit-shot-more:active {
    transform: scale(0.96);
}

/* ================================
   SEARCH + RESULTS
   Tapping a format IS the add - there's no select-then-choose
   step, which is what turned four beers into four journeys.
   ================================ */

#visitOverlay .visit-search-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--bg-input);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 0 var(--space-md);
    margin-bottom: var(--space-sm);
    transition: border-color var(--transition-fast);
}

#visitOverlay .visit-search-wrap:focus-within {
    border-color: var(--border-purple);
}

#visitOverlay .visit-search-icon {
    font-size: var(--text-md);
    flex-shrink: 0;
    opacity: 0.6;
}

#visitOverlay .visit-search {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none !important;
    outline: none;
    box-shadow: none !important;
    padding: 12px 0;
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--text-md);
}

#visitOverlay .visit-search::placeholder {
    color: var(--text-muted);
}

/* A group of results - the venue's own beers first, then everything else.
   The heading is "Last seen here" rather than "On here now": it's a list of
   likely picks, not a claim about what's pouring. */
/* Its own scroll area rather than growing the page. Ten results used to push
   the submit button off screen and make you scroll past the thing you were
   typing into to reach the answers. */
#visitOverlay .visit-results {
    max-height: 280px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

#visitOverlay .visit-results::-webkit-scrollbar {
    display: none;
}

#visitOverlay .visit-results-head {
    font-size: var(--text-xxs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin: var(--space-lg) 0 var(--space-sm);
    margin-bottom: var(--space-sm);
}

#visitOverlay .visit-result {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
    color: var(--text-primary);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

#visitOverlay .visit-result.is-open {
    border-color: var(--border-purple);
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

#visitOverlay .visit-result-icon {
    font-size: var(--text-lg);
    line-height: 1;
    flex-shrink: 0;
}

#visitOverlay .visit-result-info {
    flex: 1;
    min-width: 0;
}

#visitOverlay .visit-result-name {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#visitOverlay .visit-result-meta {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The venue's own word, not a crowd report - so it's flagged rather than
   treated as something you could contradict. */
#visitOverlay .visit-result-owner {
    flex-shrink: 0;
    font-size: var(--text-xxs);
    font-weight: 700;
    color: #7dd3fc;
    white-space: nowrap;
}

/* Every row in the picker is a thing you tap, and on a dark card in a list
   that isn't obvious without something pointing at it. */
#visitOverlay .visit-result::after {
    content: '›';
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: var(--text-xl);
    line-height: 1;
}

#visitOverlay .visit-result.is-open::after {
    content: '⌄';
    font-size: var(--text-md);
}

/* Opens under the row it belongs to, joined to it. */
#visitOverlay .visit-result-formats {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
    background: var(--bg-card);
    border: 1px solid var(--border-purple);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
}

#visitOverlay .visit-format-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 9px 4px;
    background: var(--bg-input);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition-fast);
}

#visitOverlay .visit-format-btn:active {
    transform: scale(0.95);
    border-color: var(--amber);
    background: rgba(245, 166, 35, 0.1);
    color: var(--amber);
}

#visitOverlay .visit-format-icon {
    font-size: 18px;
}

#visitOverlay .visit-format-label {
    font-size: var(--text-xxs);
    font-weight: 700;
}

#visitOverlay .visit-cant-find {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    background: rgba(246, 166, 35, 0.07);
    border: 1px solid rgba(246, 166, 35, 0.2);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-top: var(--space-sm);
}

#visitOverlay .visit-cant-find-text {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

#visitOverlay .visit-cant-find-btn {
    flex-shrink: 0;
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    border: none;
    background: var(--amber);
    color: #1a1a2e;
    font-family: inherit;
    font-size: var(--text-xs);
    font-weight: 800;
    cursor: pointer;
}

/* ================================
   ADDED THIS VISIT
   ================================ */

#visitOverlay .visit-added-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--border-light);
}

#visitOverlay .visit-added-row:last-child {
    border-bottom: none;
}

#visitOverlay .visit-added-name {
    flex: 1;
    min-width: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#visitOverlay .visit-added-shots,
#visitOverlay .visit-added-format {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--bg-purple);
    border: 1px solid var(--border-purple);
    color: var(--text-purple);
    font-size: var(--text-xxs);
    font-weight: 700;
    text-transform: capitalize;
    white-space: nowrap;
}

#visitOverlay .visit-added-remove {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: var(--text-md);
    line-height: 1;
    padding: 4px;
    cursor: pointer;
}

#visitOverlay .visit-added-remove:active {
    color: var(--red);
}

/* ================================
   SUBMIT
   ================================ */

#visitOverlay .visit-submit-bar {
    flex-shrink: 0;
    padding: var(--space-md) var(--space-lg);
    padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
    background: var(--bg-card);
    border-top: 1px solid var(--border-light);
}

#visitOverlay .visit-submit-btn {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--amber), #e8941a);
    color: #1a1a2e;
    font-family: inherit;
    font-size: var(--text-md);
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(245, 166, 35, 0.3);
    transition: all var(--transition);
}

#visitOverlay .visit-submit-btn:active {
    transform: scale(0.98);
}

#visitOverlay .visit-submit-btn:disabled {
    opacity: 0.5;
    transform: none;
    box-shadow: none;
}

/* ================================
   NO GF
   Deliberately not a button. It's destructive and it's the
   opposite of what this screen is for, so it reads as a line of
   text with one word you can tap - the same treatment the venue
   page's empty state gives it.
   ================================ */

#visitOverlay .visit-nogf {
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.5;
    text-align: center;
    margin: var(--space-xl) 0 0;
}

#visitOverlay .visit-nogf-link {
    border: none;
    background: none;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    color: var(--red);
    cursor: pointer;
    text-decoration: underline;
}

/* ================================
   NO GF CONFIRM
   ================================ */

#visitNoGfModal .visit-nogf-body {
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
    text-align: center;
}

#visitNoGfModal .visit-nogf-icon {
    font-size: 2.2rem;
    margin-bottom: var(--space-sm);
}

#visitNoGfModal .visit-nogf-title {
    font-size: var(--text-lg);
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 var(--space-sm);
}

#visitNoGfModal .visit-nogf-text {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 var(--space-lg);
}

#visitNoGfModal .visit-nogf-cancel {
    width: 100%;
    margin-top: var(--space-md);
    padding: 12px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}

/* ================================
   BEER ROWS INSIDE THE VISIT
   The rows themselves come from beer-row.js and carry the venue
   page's classes, so they're already styled. These two are the
   new states that component introduced - the undo window - and
   they belong wherever .beer-row is defined rather than here.
   Left as a marker: if the removing state looks wrong on the
   venue page too, that's why.
   ================================ */

.beer-row.is-removing,
.handle-card.is-removing {
    opacity: 0.55;
}

.beer-row-removing {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--red);
    white-space: nowrap;
}

.handle-confirm-btn.undo {
    padding: 0 12px;
    height: 42px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--text-xs);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}