/* ==========================================================================
   Umonda 3D World
   Loaded next to motors.css, which supplies the shared kit (buttons, badges,
   alerts, chips, the admin shell). Everything here is either the public
   directory of environments or the screens for arranging one.

   Namespaced um-w* rather than reusing um-mbox / um-mform: those carry
   layout of their own in the kit - um-mbox is position: sticky for a product
   buy box - which is wrong for a stack of editing panels.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Directory
   -------------------------------------------------------------------------- */

.um-world__hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--um-space-5, 20px);
    flex-wrap: wrap;
    margin: var(--um-space-4, 16px) 0 var(--um-space-6, 24px);
}

.um-world__hero h1 {
    font-size: var(--um-text-2xl, 28px);
    font-weight: 700;
    margin: 0 0 6px;
}

.um-world__hero p {
    color: var(--um-muted, #6b7280);
    max-width: 640px;
    margin: 0;
    font-size: var(--um-text-base, 14px);
}

.um-world__beta {
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
    padding: 3px 10px;
    border-radius: var(--um-radius-pill, 999px);
    background: var(--um-gold-tint, #fff7e0);
    color: var(--um-gold-dark, #dfa400);
    font-size: 11px;
    font-weight: 700;
}

.um-world__hero-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.um-world__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--um-space-4, 16px);
}

.um-world__card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--um-line, #e5e7eb);
    border-radius: var(--um-radius-lg, 16px);
    background: var(--um-surface, #fff);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: border-color var(--um-transition, 0.2s ease), box-shadow var(--um-transition, 0.2s ease),
        transform var(--um-transition, 0.2s ease);
}

.um-world__card:hover,
.um-world__card:focus {
    border-color: var(--um-primary, #3288a3);
    box-shadow: var(--um-shadow-2, 0 4px 8px -2px rgba(16, 24, 40, 0.1));
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}

/* Typed environments have no photograph by default, so the card leads with
   the palette of the store it opens: a furniture hall and an electronics
   store are told apart before either is entered. */
.um-world__card-art {
    position: relative;
    display: grid;
    place-items: center;
    height: 132px;
    background: linear-gradient(135deg, var(--um-world-a, #3288a3), var(--um-world-b, #276c82));
    color: #fff;
    font-size: 40px;
}

.um-world__card-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.um-world__card-flag {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 9px;
    border-radius: var(--um-radius-pill, 999px);
    background: var(--um-gold, #fcb800);
    color: #1a1a1a;
    font-size: 11px;
    font-weight: 700;
}

.um-world__card-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: var(--um-space-4, 16px);
}

.um-world__card-type {
    font-size: var(--um-text-xs, 12px);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--um-primary, #3288a3);
}

.um-world__card-name {
    font-size: var(--um-text-md, 16px);
    font-weight: 600;
    color: var(--um-ink, #1a1a1a);
}

.um-world__card-desc {
    font-size: var(--um-text-sm, 13px);
    color: var(--um-muted, #6b7280);
    line-height: 1.5;
}

.um-world__card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--um-line, #e5e7eb);
    font-size: var(--um-text-xs, 12px);
    color: var(--um-muted, #6b7280);
}

.um-world__card-meta i {
    margin-right: 4px;
}

.um-world__empty {
    text-align: center;
    padding: var(--um-space-9, 56px) var(--um-space-5, 20px);
    border: 1px dashed var(--um-line-strong, #d1d5db);
    border-radius: var(--um-radius-lg, 16px);
    background: var(--um-surface-alt, #f7f8fa);
}

.um-world__empty i {
    font-size: 34px;
    color: var(--um-primary, #3288a3);
}

.um-world__empty h2 {
    font-size: var(--um-text-xl, 22px);
    font-weight: 600;
    margin: 12px 0 6px;
}

.um-world__empty p {
    color: var(--um-muted, #6b7280);
    margin: 0 0 16px;
}

.um-world__foot {
    margin-top: var(--um-space-6, 24px);
    font-size: var(--um-text-sm, 13px);
    color: var(--um-muted, #6b7280);
}

/* --------------------------------------------------------------------------
   Arranging a store
   -------------------------------------------------------------------------- */

.um-wbox {
    background: var(--um-surface, #fff);
    border: 1px solid var(--um-line, #e5e7eb);
    border-radius: var(--um-radius-lg, 16px);
    padding: var(--um-space-5, 20px);
    margin: 0 0 var(--um-space-5, 20px);
}

.um-wbox--nested {
    background: var(--um-surface-alt, #f7f8fa);
    padding: var(--um-space-4, 16px);
    margin: var(--um-space-3, 12px) 0;
}

.um-wbox__title {
    font-size: var(--um-text-lg, 18px);
    font-weight: 700;
    margin: 0 0 6px;
}

.um-wbox__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.um-wmuted {
    color: var(--um-muted, #6b7280);
    font-size: var(--um-text-sm, 13px);
    margin: 0 0 12px;
}

.um-wform {
    margin: 0 0 12px;
}

.um-wform__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-bottom: 10px;
}

.um-wform label {
    display: block;
    margin: 0 0 10px;
    font-size: var(--um-text-sm, 13px);
}

.um-wform label > span {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
    color: var(--um-ink-soft, #404040);
}

.um-wform input[type="text"],
.um-wform input[type="number"],
.um-wform select,
.um-wform textarea {
    width: 100%;
    min-height: 38px;
    padding: 7px 10px;
    border: 1px solid var(--um-line-strong, #d1d5db);
    border-radius: var(--um-radius-sm, 6px);
    background: var(--um-surface, #fff);
    font-size: var(--um-text-sm, 13px);
    font-family: inherit;
}

.um-wform input:focus,
.um-wform select:focus,
.um-wform textarea:focus {
    outline: none;
    border-color: var(--um-primary, #3288a3);
    box-shadow: var(--um-focus-ring, 0 0 0 3px rgba(50, 136, 163, 0.35));
}

/* One line of controls: used for the repeated per-fixture and per-product
   rows, where a stacked form would bury the list it belongs to. */
.um-wform--inline {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin: 0;
}

.um-wform--inline label {
    margin: 0;
}

.um-wform--inline input[type="text"] {
    min-width: 150px;
}

.um-wform--inline input[type="number"],
.um-wform--inline select {
    min-width: 92px;
}

.um-wform__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.um-wcheck {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.um-wcheck input {
    width: auto;
    min-height: 0;
}

.um-wcheck > span {
    margin: 0 !important;
    font-weight: 500 !important;
}

.um-wrow {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 0;
    border-bottom: 1px solid var(--um-line, #e5e7eb);
}

.um-wrow:last-of-type {
    border-bottom: 0;
}

.um-wrow__main {
    flex: 1 1 220px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: var(--um-text-sm, 13px);
}

.um-wcollapse {
    border: 1px solid var(--um-line, #e5e7eb);
    border-radius: var(--um-radius-md, 10px);
    margin: 0 0 12px;
    background: var(--um-surface, #fff);
}

.um-wcollapse > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 14px;
    cursor: pointer;
    font-size: var(--um-text-base, 14px);
}

.um-wcollapse__body {
    padding: 0 14px 14px;
    border-top: 1px solid var(--um-line, #e5e7eb);
}

@media (max-width: 767px) {
    .um-world__hero {
        flex-direction: column;
    }

    .um-wform--inline {
        flex-direction: column;
        align-items: stretch;
    }

    .um-wform--inline label,
    .um-wform--inline input,
    .um-wform--inline select {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Homepage band
   Loaded on the homepage via world.css, which the strip pulls in with the
   rest of the module's styles. Mirrors the .um-categories rail so it sits in
   the page rhythm rather than looking bolted on.
   -------------------------------------------------------------------------- */

.um-world-strip {
    margin: var(--um-space-8, 40px) 0;
}

.um-world-strip__rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(230px, 1fr);
    gap: var(--um-space-4, 16px);
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
}

.um-world-strip__card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--um-line, #e5e7eb);
    border-radius: var(--um-radius-lg, 16px);
    background: var(--um-surface, #fff);
    color: inherit;
    text-decoration: none;
    scroll-snap-align: start;
    transition: border-color var(--um-transition, 0.2s ease), box-shadow var(--um-transition, 0.2s ease),
        transform var(--um-transition, 0.2s ease);
}

.um-world-strip__card:hover,
.um-world-strip__card:focus {
    border-color: var(--um-primary, #3288a3);
    box-shadow: var(--um-shadow-2, 0 4px 8px -2px rgba(16, 24, 40, 0.1));
    transform: translateY(-2px);
    color: inherit;
    text-decoration: none;
}

.um-world-strip__art {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: var(--um-radius-md, 10px);
    background: linear-gradient(135deg, var(--um-world-a, #3288a3), var(--um-world-b, #276c82));
    color: #fff;
    font-size: 22px;
}

/* The always-open hall gets the brand orange, so it reads as the front door
   rather than as one store among several. */
.um-world-strip__card--hall .um-world-strip__art {
    background: linear-gradient(135deg, var(--um-accent, #f5480a), var(--um-accent-dark, #d23c06));
}

.um-world-strip__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.um-world-strip__kicker {
    font-size: var(--um-text-xs, 12px);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--um-primary, #3288a3);
}

.um-world-strip__name {
    font-size: var(--um-text-md, 16px);
    font-weight: 600;
    color: var(--um-ink, #1a1a1a);
}

.um-world-strip__desc {
    font-size: var(--um-text-sm, 13px);
    line-height: 1.45;
    color: var(--um-muted, #6b7280);
}

@media (max-width: 767px) {
    .um-world-strip__rail {
        grid-auto-columns: minmax(210px, 80%);
    }
}