:root {
    --card-border: #5360d8;
    --header-red: #d56a63;
    --header-green: #4f6f61;
    --header-purple: #6265a5;
    --label-blue: #2b4aa9;
    --shadow: 0 4px 14px rgba(20,30,70,.08);
    --radius: 16px; /* slightly smaller corners */
}

/* ====== PAGE GRID ====== */
.room-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* slightly narrower cards */
    gap: 10px;
    width: 100%;
    align-items: stretch;
    padding: 10px 0;
}

/* ====== CARD ====== */
.room-card {
    display: flex;
    flex-direction: column;
    border: 1.8px solid var(--card-border);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
    height: 100%;    
    color: #1f2a44;
}

/* ====== HEADER ====== */
.room-card__header {
    background: #a1a1a1;
    color: #fff;
    font-weight: 700;
    font-size: 1.03rem; /* 10% smaller */
    padding: 12px 14px; /* reduced padding */
    line-height: 1.25;
    white-space: normal;
    word-break: break-word;
    min-height: 54px; /* 10% shorter header */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-top-left-radius: calc(var(--radius) - 2px);
    border-top-right-radius: calc(var(--radius) - 2px);
}

.room-card__body {
    flex: 1;
    padding: 12px 16px 14px;
    border-bottom-left-radius: calc(var(--radius) - 2px);
    border-bottom-right-radius: calc(var(--radius) - 2px);
}

/* ====== GRID FOR OPTIONS ====== */
.room-card__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px 24px;
}

/* 2-column layout on large screens */
@media (min-width: 768px) {
    .room-card__grid.two-cols {
        grid-template-columns: 1fr 1fr;
    }
}

/* ====== OPTIONS ====== */
.room-card__option {
    display: grid;
    grid-template-columns: 18px 1fr; /* slightly smaller */
    column-gap: 8px;
    align-items: start;
    cursor: pointer;
    color: var(--label-blue);
    font-weight: 600;
    font-size: 0.93rem; /* 10% smaller font */
    line-height: 1.3;
    user-select: none;
}

    /* custom radio */
    .room-card__option input[type="radio"] {
        appearance: none;
        width: 16px;
        height: 16px;
        aspect-ratio: 1/1;
        border: 1.8px solid #9aa6ff;
        border-radius: 50%;
        display: inline-grid;
        place-content: center;
        background: #fff;
        margin: 0;
        transform: translateY(1.5px);
        flex-shrink: 0;
    }

        .room-card__option input[type="radio"]::before {
            content: "";
            width: 8.5px;
            height: 8.5px;
            border-radius: 50%;
            transform: scale(0);
            transition: transform .12s ease-in-out;
            background: var(--card-border);
        }

        .room-card__option input[type="radio"]:checked::before {
            transform: scale(1);
        }

        .room-card__option input[type="radio"]:focus-visible {
            box-shadow: 0 0 0 3px rgba(83,96,216,.25);
            border-color: var(--card-border);
        }

/* bold option text */
.room-card__option--bold span {
    font-weight: 800;
}

/* ====== VALIDATION ====== */
.validation-error {
    display: block;
    margin-top: 6px;
    font-size: 1rem;
    color: #d9534f;
}

.input-validation-error + span {
    color: #d9534f;
    font-weight: 600;
}

/* Red border for invalid cards */
.room-card.has-error {
    border: 4px solid #dc3545 !important;
    box-shadow: 0 0 0.5rem rgba(220, 53, 69, 0.3);
}

/* ====== COLOR HELPERS ====== */
.header--red {
    background: var(--header-red);
}

.header--green {
    background: var(--header-green);
}

.header--purple {
    background: var(--header-purple);
}

:root {
    --guarantee-blue: #3797e6;
}

/* Main bar */
.guarantee-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--guarantee-blue);
    border-radius: 30px;
    padding: 10px 20px;
    color: #fff;
    width: 100%;
    box-sizing: border-box;
    margin: 2em 0 2em 0;
}

/* Radio + label styling */
.guarantee-option {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    user-select: none;
}

    /* Custom radio button */
    .guarantee-option input[type="radio"] {
        appearance: none;
        width: 16px;
        height: 16px;
        border: 2px solid #fff;
        border-radius: 50%;
        display: grid;
        place-content: center;
        background: transparent;
        margin: 0;
        outline: none;
        cursor: pointer;
    }

        /* Inner filled circle when selected */
        .guarantee-option input[type="radio"]::before {
            content: "";
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #fff;
            transform: scale(0);
            transition: transform 0.15s ease-in-out;
        }

        .guarantee-option input[type="radio"]:checked::before {
            transform: scale(1);
        }

        /* Focus ring for accessibility */
        .guarantee-option input[type="radio"]:focus-visible {
            box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
        }

/* Responsive padding */
@media (max-width: 600px) {
    .guarantee-bar {
        padding: 12px 10px;
    }

    .guarantee-option {
        font-size: 1rem;
    }
}

.guarantee-option {
    cursor: pointer; /* 🔹 hand cursor on hover */
    transition: transform 0.1s ease, opacity 0.1s ease;
}

    .guarantee-option:hover {
        transform: scale(1.02); /* subtle zoom */
        opacity: 0.9; /* optional fade effect */
    }

:root {
    --accent: #525da3; /* main theme color */
    --border-dark: #7a7a7a; /* darker neutral for borders */
    --bg-white: #fff;
}

/* container expands full width of parent */
.info-box {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

/* wrapper with full rounding around both label + textarea */
.info-field {
    width: 100%;
    border: 2px solid var(--border-dark); /* thicker & darker border */
    border-radius: 20px; /* slightly more rounded */
    background: var(--bg-white);
    display: flex;
    flex-direction: column;
    padding: 12px 18px 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

/* label */
.info-label {
    font-weight: 600;
    color: var(--accent);
    font-size: 0.95rem;
    margin-bottom: 6px;
}

/* horizontal line below the label */
.info-divider {
    border: none;
    border-top: 2px solid var(--border-dark); /* darker & thicker underline */
    margin: 0 0 8px 0;
}

/* textarea */
.info-textarea {
    width: 100%;
    border: none;
    outline: none;
    font-size: 1rem;    
    color: var(--accent);
    resize: vertical;
    background: transparent;
    min-height: 100px;
}

    /* focus state */
    .info-textarea:focus,
    .info-field:focus-within {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(82, 93, 163, 0.25);
    }

        .info-field:focus-within .info-divider {
            border-top-color: var(--accent); /* underline turns blue on focus */
        }

:root {
    --calc-bg: #4f6f61; /* your current green tone */
    --calc-bg-hover: #3f5a4f;
    --calc-text: #fff;
}


/* optional responsive tweak */
@media (max-width: 600px) {
    .btn-calculate {
        width: 100%;
        font-size: 1.2rem;
        padding: 14px 0;
    }
}