/* ==========================================================================
   Childhood Matters — main stylesheet
   Component styles are added here (and via @import partials) as the Figma
   design is built out. Design tokens live in the theme root style.css.
   ========================================================================== */

@import "_fonts.css";
@import "_tokens.css";
@import "_reset.css";
@import "_typography.css";
@import "_layout.css";
@import "_navigation.css";
@import "_hero.css";
@import "_buttons.css";
@import "_cards.css";
@import "_forms.css";
@import "_footer.css";
@import "_single.css";
@import "_layouts.css";
@import "_dcb.css";


/* =========================================================
   Referral Forms
   Lightweight replacement for the Tailwind classes used
   by the referral form shortcode.
   ========================================================= */

.referral-form {
    max-width: 1000px;
    margin: 30px auto;
    padding: 30px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    font-family: Arial, Helvetica, sans-serif;
    color: #374151;
    box-sizing: border-box;
    text-align: left;
}

.referral-form *,
.referral-form *::before,
.referral-form *::after {
    box-sizing: border-box;
}


/* =========================================================
   Fieldsets
   ========================================================= */

.referral-form fieldset {
    border: 1px solid #d1d5db;
    padding: 20px;
    margin: 0 0 24px 0;
    border-radius: 8px;
    background: #ffffff;
}

.referral-form legend {
    padding: 0px!important;
    font-size: 18px;
    font-weight: 600;
    color: #581c87;
    margin-bottom:20px;
}

.referral-form table{
    width:100%;
}

.referral-form table th{
    color:#333;
}


/* =========================================================
   Grid layouts
   ========================================================= */

.referral-form .grid {
    display: grid;
}


.referral-form .grid-cols-1 {
    grid-template-columns: 1fr;
}

.referral-form .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.referral-form .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.referral-form .gap-2 {
    gap: 8px;
}

.referral-form .gap-4 {
    gap: 16px;
}

.referral-form .gap-6 {
    gap: 24px;
}


/* =========================================================
   Spacing
   ========================================================= */

.referral-form .mt-1 {
    margin-top: 4px;
}

.referral-form .mt-2 {
    margin-top: 8px;
}

.referral-form .mt-4 {
    margin-top: 16px;
}

.referral-form .mb-2 {
    margin-bottom: 8px;
}


/* =========================================================
   Labels
   ========================================================= */

.referral-form label {
    display: block;
    margin-bottom:8px;
    margin-right:10px;
}

.referral-form .text-sm {
    font-size: 15px;
}

.referral-form .text-xs {
    font-size: 12px;
}

.referral-form .font-medium {
    font-weight: 500;
}

.referral-form .font-semibold {
    font-weight: 600;
}

.referral-form .font-bold {
    font-weight: 500;
}

.referral-form .text-gray-700 {
    color: #374151;
}

.referral-form .text-gray-600 {
    color: #4b5563;
}

.referral-form .text-red-500 {
    color: #ef4444;
}

.margin-bottom-20{
    margin-bottom:20px;
}

/* =========================================================
   Inputs / Selects / Textareas
   ========================================================= */

.referral-form input[type="text"],
.referral-form input[type="email"],
.referral-form input[type="date"],
.referral-form input[type="number"],
.referral-form input[type="tel"],
.referral-form select,
.referral-form textarea {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 15px 15px!important;
    font-size: 14px;
    line-height: 1.5;
    color: #374151;
    background: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    margin-bottom:20px;
}

.referral-form textarea {
    resize: vertical;
    min-height: 115px;
    resize: none;
}

.referral-form input[type="date"] {
    cursor: pointer;
}

.referral-form input:focus,
.referral-form select:focus,
.referral-form textarea:focus {
    outline: none;
    border-color: #7e22ce;
    box-shadow: 0 0 0 2px rgba(126, 34, 206, 0.12);
}


/* Yellow Eircode fields */

.referral-form .bg-yellow-50 {
    background: #fffbeb;
}


/* =========================================================
   Buttons
   ========================================================= */

.referral-form button {
    border: 0;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
}

.referral-form .bg-purple-900 {
    background: #581c87;
}

.referral-form .bg-purple-900:hover {
    background: #6b21a8;
}

.referral-form .text-white {
    color: #ffffff;
}

.referral-form .px-6 {
    padding-left: 24px;
    padding-right: 24px;
}

.referral-form .py-2 {
    padding-top: 8px;
    padding-bottom: 8px;
}

.referral-form .rounded-md {
    border-radius: 6px;
}

.referral-form .transition {
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.referral-form button:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}


/* =========================================================
   Alignment
   ========================================================= */

.referral-form .text-right {
    text-align: right;
}


/* =========================================================
   Full-width fields
   ========================================================= */

.referral-form .md\:col-span-2 {
    grid-column: span 2;
}


/* =========================================================
   Mother / Father panels
   ========================================================= */

.referral-form .bg-gray-50 {
    background: #f9fafb;
}

.referral-form .p-4 {
    padding: 16px;
}

.referral-form .rounded {
    border-radius: 4px;
}

.referral-form .border {
    border: 1px solid #d1d5db;
}


/* =========================================================
   Parent detail spacing
   ========================================================= */

.referral-form .space-y-3 > * + * {
    margin-top: 12px;
}


/* =========================================================
   Checkboxes
   ========================================================= */

.referral-form input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: middle;
    accent-color: #581c87;
}

.referral-form input[type="checkbox"] + * {
    vertical-align: middle;
}

/* =========================================================
   Success Message
   ========================================================= */

.referral-form .referral-success-message {
    padding: 40px;
    text-align: center;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
}

.referral-form .referral-success-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #16a34a;
    color: #fff;
    font-size: 28px;
    font-weight: 700;
}

.referral-form .referral-success-message h2 {
    margin: 0 0 10px;
    font-size: 24px;
}

.referral-form .referral-success-message p {
    margin: 0;
    font-size: 16px;
}


/* =========================================================
   Responsive layout
   ========================================================= */

@media (min-width: 768px) {

    .referral-form .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .referral-form .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 767px) {

    .referral-form {
        margin: 0px;
        padding: 0px;
    }

    .referral-form fieldset {
        padding: 15px;
    }

    .referral-form .md\:col-span-2 {
        grid-column: span 1;
    }

    .referral-form .grid-cols-2,
    .referral-form .grid-cols-3 {
        grid-template-columns: 1fr;
    }

    .referral-form .text-right {
        text-align: left;
    }

    .referral-form button {
        width: 100%;
    }

}