/*
 * Address form base + preset styles.
 * Class prefix: .mzaddress-*
 * Preset variants hang off [data-preset="..."] on the root element.
 */

.mzaddress {
    --mzaddr-ink:           #1a1f2e;
    --mzaddr-ink-muted:     #6b7c93;
    --mzaddr-border:        #d1d9e0;
    --mzaddr-border-focus:  #6772e5;
    --mzaddr-border-invalid:#e25950;
    --mzaddr-bg-input:      #fff;
    --mzaddr-radius:        6px;
    --mzaddr-font:          system-ui, -apple-system, 'Inter', 'Segoe UI', sans-serif;
}

.mzaddress .mzaddress-fields,
.mzaddress > .mzaddress-fields {
    display: block;
}

/* Country picker → first address field — add breathing room so the
   country dropdown is visually separated from "Address Line 1"
   (Orhan 2026-06-20). Single source of truth: every surface using
   the partial inherits this. */
.mzaddress > .mzaddress-country {
    margin-bottom: 14px;
}

.mzaddress-field {
    display: block;
    margin-bottom: 10px;
}

.mzaddress-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

.mzaddress-row > .mzaddress-field {
    margin-bottom: 0;
}

/* Labels are kept in the DOM for screen readers + form semantics but
   visually hidden across every preset — the input placeholder carries
   the required asterisk and acts as the visual marker. Individual
   presets can override this rule if they want labels back. */
.mzaddress-label {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.mzaddress-required-mark {
    color: var(--mzaddr-border-invalid);
}

.mzaddress-input,
.mzaddress-select {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--mzaddr-border);
    border-radius: var(--mzaddr-radius);
    background: var(--mzaddr-bg-input);
    color: var(--mzaddr-ink);
    font-family: var(--mzaddr-font);
    font-size: 13.5px;
    font-weight: 400;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

/* Custom dropdown affordance — `appearance: none` strips the native
   chevron, so we inject a slate-gray SVG arrow at the trailing edge.
   Without this the select looks like a plain text input (Orhan 2026-06-20). */
.mzaddress-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
    cursor: pointer;
}

/* RTL — chevron flips to the leading (left) edge so the visual cue
   stays at the natural trailing read position. */
html[dir="rtl"] .mzaddress-select {
    padding-right: 11px;
    padding-left: 34px;
    background-position: left 12px center;
}

.mzaddress-input:focus,
.mzaddress-select:focus {
    border-color: var(--mzaddr-border-focus);
}

.mzaddress-input:disabled,
.mzaddress-select:disabled {
    background: #f6f9fc;
    cursor: not-allowed;
}

.mzaddress-field.mzaddress-invalid .mzaddress-input,
.mzaddress-field.mzaddress-invalid .mzaddress-select {
    border-color: var(--mzaddr-border-invalid);
}

.mzaddress-field.mzaddress-invalid .mzaddress-label {
    color: var(--mzaddr-border-invalid);
}

.mzaddress-error {
    display: none;
    margin-top: 4px;
    font-family: var(--mzaddr-font);
    font-size: 12px;
    color: var(--mzaddr-border-invalid);
}

.mzaddress-field.mzaddress-invalid .mzaddress-error:not(:empty) {
    display: block;
}

/* Preset: stripe-compact
   The host page (services / wizard / upgrade-pay) owns the actual
   border-collapse stack — country select at top, fields below, single
   1px outer border, no doubled lines. This preset only:
     - hides labels visually (placeholders carry the required marker)
     - tints invalid fields red without changing the stack geometry
     - suppresses the per-field error slot (background carries the signal) */
.mzaddress[data-preset="stripe-compact"] {
    background: transparent;
    border: 0;
    padding: 0;
}

/* Invalid state — Stripe-style tint; outer border stays neutral so the
   group's geometry doesn't shift when a field is flagged. */
.mzaddress[data-preset="stripe-compact"] .mzaddress-field.mzaddress-invalid .mzaddress-input,
.mzaddress[data-preset="stripe-compact"] .mzaddress-field.mzaddress-invalid .mzaddress-select {
    color: var(--mzaddr-border-invalid);
    background: #fef2f0;
}
.mzaddress[data-preset="stripe-compact"] .mzaddress-field.mzaddress-invalid .mzaddress-input::placeholder {
    color: var(--mzaddr-border-invalid);
    opacity: 0.7;
}

.mzaddress[data-preset="stripe-compact"] .mzaddress-error {
    display: none !important;
}

/* Preset: profile-stacked */
.mzaddress[data-preset="profile-stacked"] .mzaddress-row {
    margin-bottom: 4px;
}

.mzaddress[data-preset="profile-stacked"] .mzaddress-field {
    padding: 0;
    margin-bottom: 4px;
}

/* Preset: owner-inline */
.mzaddress[data-preset="owner-inline"] .mzaddress-field {
    margin-bottom: 6px;
}

.mzaddress[data-preset="owner-inline"] .mzaddress-row {
    gap: 6px;
    margin-bottom: 6px;
}

.mzaddress[data-preset="owner-inline"] .mzaddress-input,
.mzaddress[data-preset="owner-inline"] .mzaddress-select {
    padding: 7px 9px;
    font-size: 13px;
}