:root {
    --bg: #f2f2f2;
    --text: #49539f;
    --border: #808080;
    --input-bg: #fff;
    --shadow: 0 2px 10px rgba(0,0,0,.05);
    --radius: 15px; /* ~30% smaller */
}

/* Base */
body {
    margin: 0;
    background: #fff;
    color: var(--text);
}

/* Card */
.contact-details-card {
    background: #f2f2f2;
    border: 3px solid var(--border);
    border-radius: var(--radius);
    margin: 20px auto; /* 28 → 20 */
    padding: 20px; /* 28 → 20 */
    box-shadow: var(--shadow);
    font-size:2em;
}

    .contact-details-card h2 {
        margin: 4px 0 14px;
        font-weight: 700;
        letter-spacing: .2px;
        color: var(--text);
        font-size: clamp(18px, 2.6vw, 26px); /* slightly smaller, fluid */
    }

/* Grids */
.contact-details-grid {
    display: grid;
    grid-template-columns: 1fr;
    margin-bottom: 12px;
    gap: 12px; /* 18 → 12 */
}

    .contact-details-grid.two-up {
        grid-template-columns: 1fr 1fr;
    }

    /* 3:1 rows (street & city) */
    .contact-details-grid.street-row,
    .contact-details-grid.city-row {
        display: grid;
        grid-template-columns: 3fr 1fr;
        gap: 12px;
    }

/* Inputs */
.contact-details-field {
    position: relative;
}

.contact-details-input {
    width: 100%;
    background: var(--input-bg);
    border: 2px solid var(--border);
    border-radius: 6px;
    padding: 11px 38px 11px 12px; /* 16 → 11, 46 → 38, 16 → 12 */
    font-size: 13px; /* 18 → 13 */
    color: var(--text);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .contact-details-input::placeholder {
        color: var(--text);
        font-weight: 600;
        opacity: .85;
    }

    .contact-details-input:focus {
        border-color: var(--text);
        box-shadow: 0 0 0 3px rgba(73,83,159,.12);
    }

/* Eye button */
.contact-details-eye {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px; /* 28 → 22 */
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: grid;
    place-items: center;
    opacity: .85;
}

    .contact-details-eye:hover {
        opacity: 1;
    }
/* --- Key delivery buttons --- */
.contact-details-card .contact-details-actions,
.contact-details-card .actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* desktop: 4 in a row */
    gap: 12px;
    margin-top: 12px;
}

    /* Make buttons full width inside grid cells */
    .contact-details-card.contact-details-actions button,
    .contact-details-card.actions button,
    .contact-details-card.buttons button {
        width: 100%;
    }

/* Medium screens: 2x2 layout */
@media (max-width: 920px) {
    .contact-details-card .contact-details-actions,
    .contact-details-card .actions {
        grid-template-columns: repeat(2, 1fr); /* 2 by 2 */
    }

    .contact-details-grid.buttons {
        grid-template-columns: repeat(2, 1fr); /* 2 by 2 */
    }
}



@media (max-width: 680px) {
    .contact-details-card {
        padding: 16px;
    }

    /* Collapse all grids to a single column */
    .contact-details-grid.two-up,
    .contact-details-grid.street-row,
    .contact-details-grid.city-row {
        grid-template-columns: 1fr !important;
    }

    .contact-details-grid.buttons {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Buttons: single column on small screens */
    .contact-details-card.contact-details-actions,
    .contact-details-card.actions {
        grid-template-columns: 2fr;
    }
}