/* Parties - Sender/Receiver Blocks */

.parties-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    contain: layout; /* Isolate layout calculations to prevent shifts */
}

@media (max-width: 900px) {
    .parties-grid {
        grid-template-columns: 1fr;
    }
}

.party-block {
    contain: layout; /* Isolate each block's layout */
    min-height: 0; /* Allow proper grid sizing */
}

.party-block h2 {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--primary);
    margin-bottom: var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Direct children inputs (not in containers) */
.party-block > input:not(.section-title-input),
.party-block > select {
    width: 100%;
    height: var(--input-height);
    padding: 0 var(--input-padding-x);
    font-size: var(--input-font-size);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    margin-bottom: var(--spacing-xs);
}

/* Inputs inside containers (no margin - container provides spacing) */
.party-block .address-with-country input,
.party-block .address-row input,
.party-block .address-row select,
.party-block .custom-field-row input {
    width: 100%;
    height: var(--input-height);
    padding: 0 var(--input-padding-x);
    font-size: var(--input-font-size);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    margin-bottom: 0;
}

.party-block input:focus:not(.section-title-input),
.party-block select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-subtle);
}

/* Address Row */
.address-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
}

/* City + Postal Row - postal should be slightly narrower */
.address-row:has(input[name$="-city"]) {
    grid-template-columns: 1.3fr 0.7fr;
}

/* Phone Prefix + Phone Row - prefix should be narrower */
.address-row:has(input[name$="-phone-prefix"]) {
    grid-template-columns: 0.6fr 1.4fr;
}

.address-row.address-row--4 {
    grid-template-columns: 2fr 1fr 0.8fr 1fr;
}

.address-row input:focus,
.address-row select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-subtle);
}

/* Address with Country */
.address-with-country {
    display: grid;
    grid-template-columns: 1fr 3.5rem;
    gap: var(--space-1);
    margin-bottom: var(--space-1);
}

.country-input {
    width: 100%;
    height: var(--input-height);
    padding: 0 var(--space-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
    font-family: inherit;
    background: var(--bg);
    color: var(--text);
    text-align: center;
    text-transform: uppercase;
    font-weight: 500;
}

.country-input::placeholder {
    text-transform: none;
}

.country-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-subtle);
}

/* Inline Fields */
.inline-fields {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--spacing-xs);
}

.inline-fields input {
    height: var(--input-height);
    padding: 0 var(--input-padding-x);
    font-size: var(--input-font-size);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
}

.inline-fields input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-subtle);
}

/* Phone Input Row - Prefix and Number always on same line */
.phone-input-row {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-1);
    flex-wrap: nowrap; /* Prevent wrapping */
}

.phone-input-row .phone-prefix {
    width: 70px !important; /* Override general input width */
    flex-shrink: 0; /* Don't shrink the prefix */
    text-align: center;
}

.phone-input-row input[type="tel"] {
    flex: 1; /* Phone number takes remaining space */
    min-width: 0; /* Allow shrinking if necessary */
    width: auto !important; /* Override general input width */
}

/* Required field indicator - removed per user request */
/* .party-block input[required]:not(.section-title-input):not([type="hidden"]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ctext x='0' y='11' fill='%23dc2626' font-size='12' font-weight='500'%3E•%3C/text%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px 12px;
    padding-right: 24px !important;
}

.address-with-country input[required]:not(.section-title-input):not([type="hidden"]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ctext x='0' y='11' fill='%23dc2626' font-size='12' font-weight='500'%3E•%3C/text%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px 12px;
    padding-right: 24px !important;
} */