/*
 * Mobile-numbers vertical (third vertical, 13.11.2026). Prefix .kmn- only —
 * grepped before use (kmm/kmp/kmr/kmw exist elsewhere).
 * Linked from each mobile view, like ksa-plate-detail.css; no build step.
 */

/* ---------------------------------------------------------------- number plate
 * The mobilenumber.ae plate, measured on its 500x110 image (13.11.2026):
 * frame 4px in the operator colour, tile 95px wide starting 25px in,
 * flush with the top, 5px short of the bottom; number cap height 39px.
 * All sizes in cqw of the plate width, so it scales like <x-ksa-plate>. */
.kmn-wrap { display: block; width: 100%; }
.kmn-plate {
    --kmn-op: #111;
    container-type: inline-size;
    position: relative;
    width: 100%;
}
.kmn-plate__body {
    position: relative;
    aspect-ratio: 500 / 110;
    box-sizing: border-box;
    display: flex; align-items: stretch;
    direction: ltr;
    background: #fff;
    border: max(1.5px, .8cqw) solid var(--kmn-op);
    border-radius: max(3px, 1.6cqw);
    overflow: hidden;
    box-shadow: 0 max(1px, .5cqw) max(3px, 1.6cqw) rgba(0, 0, 0, .14);
}
.kmn-plate.is-promoted .kmn-plate__body {
    box-shadow: 0 0 0 max(1px, .4cqw) #D4A017, 0 0 4cqw rgba(212, 160, 23, .35);
}
.kmn-plate__tile {
    flex: 0 0 19cqw;
    margin: 0 0 1cqw 4.2cqw;
    border-radius: 0 0 1.2cqw 1.2cqw;
    overflow: hidden;
    background: var(--kmn-op);
}
.kmn-plate__tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kmn-plate__num {
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: center;
    /* safe: if the line is ever too long it is cut on the right instead of
       running left over the tile (13.11.: "XXXXXXX" overlapped the logo). */
    justify-content: safe center;
    overflow: hidden;
    padding: 0 3cqw 0 2.2cqw;
    font-family: inherit;
    font-weight: 800;
    font-size: 9.8cqw;
    line-height: 1;
    letter-spacing: -.01em;
    color: #0a0a0a;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    unicode-bidi: isolate;
}
.kmn-plate__num .sep { margin: 0 .22em; }
/* Every position is one fixed cell (a digit is .59em in Instrument Sans 800),
   so the plate has the same width for 0555555555 and 055XXXXXXX: an X is
   .71em wide and seven of them pushed the number over the tile. */
.kmn-plate__num .d { display: inline-block; width: .59em; text-align: center; }
.kmn-plate__num .d.x { color: #b4b4bb; transform: scaleX(.84); }
.kmn-plate__sold {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .55); border-radius: max(3px, 1.6cqw);
}
.kmn-plate__sold span {
    background: #dc2626; color: #fff; font-weight: 900; font-size: 6cqw; letter-spacing: .06em;
    padding: .6cqw 3cqw; border-radius: 1cqw; transform: rotate(-6deg);
}

/* meta row under the plate (wizard preview, manage page) */
.kmn-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; min-height: 28px; }
.kmn-meta__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.kmn-tag {
    display: inline-flex; align-items: center; font-size: 12px; font-weight: 800; line-height: 1;
    padding: 6px 10px; border-radius: 999px; color: #3a2a0c; background: linear-gradient(135deg, #f7dc8c, #d9a441);
}
.kmn-meta__type { font-size: 12px; font-weight: 700; color: #71717a; }
.kmn-meta__price { font-size: 17px; font-weight: 900; color: #006C35; white-space: nowrap; }

/* ---------------------------------------------------------------- upload wizard */
.kmn-ops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 560px) { .kmn-ops { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kmn-op {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    min-height: 108px; padding: 14px 10px; border-radius: 16px; cursor: pointer;
    background: #fff; border: 2px solid #e5e7eb; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.kmn-op:hover { border-color: #a7d7bb; transform: translateY(-1px); }
.kmn-op input { position: absolute; opacity: 0; pointer-events: none; }
.kmn-op img { height: 34px; width: auto; max-width: 92%; object-fit: contain; }
.kmn-op__pfx { font-size: 12px; font-weight: 700; color: #71717a; direction: ltr; }
.kmn-op:has(input:checked) { border-color: #006C35; box-shadow: 0 0 0 4px rgba(0, 108, 53, .12); }
.kmn-op:has(input:focus-visible) { outline: 3px solid #006C35; outline-offset: 2px; }

.kmn-pfx { display: flex; flex-wrap: wrap; gap: 8px; direction: ltr; }
.kmn-pfx label { cursor: pointer; }
.kmn-pfx input { position: absolute; opacity: 0; pointer-events: none; }
.kmn-pfx span {
    display: inline-flex; align-items: center; justify-content: center; min-width: 64px; height: 48px; padding: 0 12px;
    border-radius: 12px; border: 2px solid #e5e7eb; background: #fff; font-weight: 800; font-size: 17px; color: #18181b;
    font-variant-numeric: tabular-nums;
}
.kmn-pfx input:checked + span { border-color: #006C35; background: #f0fdf4; color: #006C35; }
.kmn-pfx input:focus-visible + span { outline: 3px solid #006C35; outline-offset: 2px; }
.kmn-pfx .is-other span { color: #71717a; font-weight: 700; font-size: 14px; }

.kmn-digits {
    width: 100%; direction: ltr; text-align: center;
    font-size: 30px; font-weight: 800; letter-spacing: .28em; font-variant-numeric: tabular-nums;
    padding: 14px 12px; border-radius: 14px; border: 2px solid #e5e7eb; background: #fff; color: #18181b;
}
.kmn-digits:focus { outline: none; border-color: #006C35; box-shadow: 0 0 0 4px rgba(0, 108, 53, .12); }
.kmn-digits::placeholder { color: #d4d4d8; letter-spacing: .28em; }

.kmn-seg { display: inline-flex; padding: 4px; border-radius: 14px; background: #f4f4f5; gap: 4px; }
.kmn-seg label { cursor: pointer; }
.kmn-seg input { position: absolute; opacity: 0; pointer-events: none; }
.kmn-seg span { display: inline-block; padding: 10px 16px; border-radius: 10px; font-weight: 700; font-size: 14px; color: #52525b; }
.kmn-seg input:checked + span { background: #fff; color: #006C35; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }

.kmn-hint { font-size: 12px; color: #71717a; margin-top: 6px; }
.kmn-err { display: none; margin-top: 10px; padding: 10px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; }

/* Not sticky: on a phone a stuck card covered the tiles under it. Each step
   scrolls the card back into view instead (mobile-sell.blade.php, show()). */
.kmn-sticky-preview { max-width: 520px; margin-inline: auto; scroll-margin-top: 80px; }
@media (prefers-reduced-motion: reduce) { .kmn-op, .kmn-op:hover { transition: none; transform: none; } }

/* ---------------------------------------------------------------- catalogue (.kcp frame)
 * The plate catalogue's classes carry the layout; these add only what a
 * number needs. The number plate is 4.5:1 like the long licence plate, so
 * the card stage gets a little more width than the 250px licence plate. */
.kcp .pwrap.kmn-pw { max-width: 300px; }
@media (max-width: 767px) { .kcp .pwrap.kmn-pw { max-width: 330px; } }
.kmn-ctags { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.kmn-ctags .kmn-tag { font-size: 11px; padding: 5px 9px; }

/* network filter: logo tiles, two per row */
.kmn-fops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kmn-fop {
    display: flex; align-items: center; justify-content: center; height: 52px; padding: 8px;
    background: #fff; border: 1.5px solid #E4E7E5; border-radius: 12px; cursor: pointer;
}
.kmn-fop img { max-height: 24px; max-width: 100%; width: auto; object-fit: contain; }
.kmn-fop.on { border-color: #006C35; box-shadow: 0 0 0 3px rgba(0, 108, 53, .12); }
.kmn-fop:focus-visible { outline: 3px solid #006C35; outline-offset: 2px; }

/* prefix filter */
.kmn-fpfx { display: flex; flex-wrap: wrap; gap: 8px; }
.kmn-fpfx button {
    min-width: 58px; height: 40px; padding: 0 10px; border-radius: 10px; cursor: pointer;
    border: 1.5px solid #E4E7E5; background: #fff; font-weight: 800; font-size: 15px; color: #18181B;
    font-variant-numeric: tabular-nums;
}
.kmn-fpfx button.on { border-color: #006C35; background: #F0FDF4; color: #006C35; }

/* sell band: the number plate floats where the plate-to-cash picture sits */
.kcp .kmn-kse { display: block; width: min(100%, 460px); transform: rotate(-4deg); }
@media (prefers-reduced-motion: reduce) { .kcp .kmn-kse { transform: none; } }

/* ---------------------------------------------------------------- listing page (.kdt frame) */
/* .kdt-plate sizes the stage (50% / 66% / 100%); the plate just fills it. */
.kdt .kmn-dplate .kmn-wrap { width: 100%; }
.kmn-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 0; }
@media (max-width: 639px) { .kmn-facts { grid-template-columns: 1fr; } }
.kmn-facts div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #E4E7E5; }
.kmn-facts dt { color: #6B7077; font-size: 14px; }
.kmn-facts dd { margin: 0; font-weight: 700; font-size: 14px; text-align: end; }
.kcp .grid.kmn-sim { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* "Similar numbers" borrows the catalogue grid (.kcp) but not its page ground. */
.kdt .kdt-sec-comp.kcp { background: none; }

/* ---------------------------------------------------------------- transfer guides + copy */
.kmn-more { font-weight: 800; color: #006C35; text-decoration: none; }
.kmn-more:hover { text-decoration: underline; }
.kmn-guide { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 899px) { .kmn-guide { grid-template-columns: 1fr; gap: 28px; } }
.kmn-gsteps { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: none; }
.kmn-gsteps li { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid #E4E7E5; border-radius: 18px; padding: 18px 20px; }
.kmn-gsteps .n {
    flex: 0 0 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: #006C35; color: #fff; font-weight: 900; font-size: 16px;
}
.kmn-gsteps p { margin: 6px 0 0; font-size: 16.5px; line-height: 1.6; color: #27272A; }
.kmn-gcheck { background: #fff; border: 1px solid #E4E7E5; border-radius: 22px; padding: 24px; position: sticky; top: 88px; }
@media (max-width: 899px) { .kmn-gcheck { position: static; } }
.kmn-gcheck h2 { font-size: 19px; font-weight: 800; margin: 0 0 14px; color: #18181B; }
.kmn-gcheck ul { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.kmn-gcheck li { position: relative; padding-inline-start: 28px; font-size: 15px; line-height: 1.55; color: #3F444B; }
.kmn-gcheck li::before {
    content: ''; position: absolute; inset-inline-start: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%;
    background: #E8F3EC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006C35' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}
.kcp .kmn-prose p { font-size: 17px; }