/* Container */
.fg-header-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Main description text */
.fg-header-text {
    font-size: 20px;
    font-family: "Forever Forma Body Text", sans-serif;
    font-weight: 400;
    line-height: 30px;
    color: #281805;
    margin: 0;
}

/* Required fields note */
.fg-required-note {
    display: flex;
    flex-direction: row; /* or just remove this line entirely */
    align-items: center;
    gap: 4px; /* matches Figma spacing */
}


.fg-required-star {
    color: #CF0000;
    font-size: 16px;
    font-family: "Forever Forma Body Text", sans-serif;
    line-height: 24px;
}

.fg-required-text {
    color: #1D1D1B;
    font-size: 16px;
    font-family: "Forever Forma Body Text", sans-serif;
    line-height: 24px;
    font-weight: normal;
}

/* Text-style button (Figma "text" variant) */
.fg-btn-text {
    background: none;
    border: none;
    padding: 12px 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    font-family: "Forever Forma Variable", sans-serif;
    font-weight: 500;
    line-height: 24px;
    color: var(--Actions-Button_Default, #281805);
    cursor: pointer;
    text-decoration: none;
}

/* ---------------------------------------------
   BUTTONS
--------------------------------------------- */
.svg-aspbutton-wrapper {
    position: relative; /* Anchor for the absolute button */
    display: flex;
    width: 135px;
    height: 48px;
    padding: 0 24px; /* Move vertical padding to 0 to prevent text shift */
    justify-content: right;
    align-items: center;
    gap: 4px;
    background: #281805;
    border-radius: 24px;
    cursor: pointer;
    overflow: hidden; 
}

.svg-asp-button {   
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* VISUALS */
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    z-index: 2; /* Sit on top of everything */
        
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 34px; 
    
    font-family: "Forever Forma Variable", sans-serif;
    font-size: 16px;
    font-weight: 500;
}

.svg-aspbutton-wrapper::after {
    position: relative;
    content: "";
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(../images/Icons/arrow_link.svg);
    transition: transform 0.1s ease-in-out;
	 pointer-events: none; 
}

/* PREVENT ARROW FROM BLOCKING CLICKS */
.svg-aspbutton-wrapper::after {
    pointer-events: none; /* Clicks pass through to the button */
}


.svg-aspbutton-wrapper:hover::after {
    transform: translate(6px);
}

.svg-asp-button {   
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* VISUALS */
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    z-index: 2; /* Sit on top of everything */
        
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 34px; 
    
    font-family: "Forever Forma Variable", sans-serif;
    font-size: 16px;
    font-weight: 500;
}

.svg-aspbutton-wrapper::after {
    position: relative;
    content: "";
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(../images/Icons/arrow_link.svg);
    transition: transform 0.1s ease-in-out;
	 pointer-events: none; 
}

/* PREVENT ARROW FROM BLOCKING CLICKS */
.svg-aspbutton-wrapper::after {
    pointer-events: none; /* Clicks pass through to the button */
}


.svg-aspbutton-wrapper:hover::after {
    transform: translate(6px);
}

.svg-aspbutton-wrapper2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}



.svg-button1 {
    width: 170px;
    height: 48px;
    background: #281805;
    border-radius: 24px;
    border: none;
    cursor: pointer;
    color: white;
    font-family: "Forever Forma Variable", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 150%;
    padding-left: 28px; /* space for arrow */

    position: relative;
    z-index: 1; 
}


.svg-aspbutton-wrapper2::after {
    pointer-events: none;
    z-index: 2;
    content: "";
    width: 90%;
    height: 60%;
    position: absolute;
    /* right: 3px; */
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12" viewBox="0 0 24 24" fill="white" aria-hidden="true"><path d="M12 21.4999C10.8205 21.4999 9.71542 21.2768 8.68475 20.8306C7.65392 20.3845 6.75517 19.778 5.9885 19.0114C5.22183 18.2447 4.61542 17.346 4.16925 16.3151C3.72308 15.2845 3.5 14.1794 3.5 12.9999H5C5 14.9499 5.67917 16.604 7.0375 17.9624C8.39583 19.3207 10.05 19.9999 12 19.9999C13.95 19.9999 15.6042 19.3207 16.9625 17.9624C18.3208 16.604 19 14.9499 19 12.9999C19 11.0499 18.3208 9.3957 16.9625 8.03737C15.6042 6.67903 13.95 5.99987 12 5.99987H11.7345L13.323 7.58837L12.2692 8.67287L8.84625 5.24037L12.2885 1.80762L13.3422 2.89212L11.7345 4.49987H12C13.1795 4.49987 14.2846 4.72295 15.3152 5.16912C16.3461 5.61528 17.2448 6.2217 18.0115 6.98837C18.7782 7.75503 19.3846 8.65378 19.8307 9.68462C20.2769 10.7153 20.5 11.8204 20.5 12.9999C20.5 14.1794 20.2769 15.2845 19.8307 16.3151C19.3846 17.346 18.7782 18.2447 18.0115 19.0114C17.2448 19.778 16.3461 20.3845 15.3152 20.8306C14.2846 21.2768 13.1795 21.4999 12 21.4999Z" fill="white"/></svg>');
}


.svg-button {
    height: 48px;
    background: #281805;
    border-radius: 24px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: white;
    font-family: "Forever Forma Variable", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 150%;
    text-decoration: none;
}
	
.svg-button:hover,
.svg-asp-button:hover,
.primary-button:hover,
.secondary-button:hover,
.tertiary-button:hover {
    outline: none;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
}

.primary-button {
    display: flex;
    height: 48px;
    padding: 12px 24px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 24px;
    background: var(--Actions-Button_Default, #281805);
    cursor: pointer;
    border: none;
    color: var(--Actions-Button_Label, #FFF);
    text-align: center;
    font-feature-settings: 'liga' off, 'clig' off;
    /* 💯 Desktop/Body/Label MD */
    font-family: "Forever Forma Variable";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 24px */
}
    .primary-button svg {
    transition: transform 0.1s ease-out;
    }
    /* PREVENT ARROW FROM BLOCKING CLICKS */
    /*.primary-button::after {
    pointer-events: none;*/ /* Clicks pass through to the button */
    /*}*/
    .primary-button:hover svg {
        transform: translate(6px);
    }

.tertiary-button{
    display: flex;
    height: 48px;
    padding: 12px 0;
    justify-content: center;
    align-items: center;
    gap: 4px;
    color: var(--Actions-Button_Default, #281805);
    text-align: center;
    font-feature-settings: 'liga' off, 'clig' off;

    /* 💯 Desktop/Body/Label M */
    font-family: "Forever Forma Variable";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 24px */
}

.secondary-button {
    display: flex;
    height: 48px;
    padding: 12px 24px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    color: var(--Actions-Button_Default, #281805);
    text-align: center;
    font-feature-settings: 'liga' off, 'clig' off;
    /* 💯 Desktop/Body/Label M */
    font-family: "Forever Forma Variable";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 24px */
    border-radius: 48px;
    border: 2px solid var(--Actions-Button_Default, #281805);
    background-color:white;
}

/* ---------------------------------------------
   ICONS
--------------------------------------------- */
/* Base icon container */
.fg-alert-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M1.86523 20.5L11.9997 3L22.1342 20.5H1.86523ZM4.44973 19H19.5497L11.9997 6L4.44973 19ZM11.9997 17.8077C12.2286 17.8077 12.4204 17.7303 12.5752 17.5755C12.7301 17.4207 12.8075 17.2288 12.8075 17C12.8075 16.7712 12.7301 16.5793 12.5752 16.4245C12.4204 16.2697 12.2286 16.1923 11.9997 16.1923C11.7709 16.1923 11.5791 16.2697 11.4242 16.4245C11.2694 16.5793 11.192 16.7712 11.192 17C11.192 17.2288 11.2694 17.4207 11.4242 17.5755C11.5791 17.7303 11.7709 17.8077 11.9997 17.8077ZM11.2497 15.1923H12.7497V10.1923H11.2497V15.1923Z' fill='%23CF0000'/%3E%3C/svg%3E");
}



.help-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    background: no-repeat center / contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' stroke='%23281805' stroke-width='2' fill='none'/%3E%3Ctext x='12' y='16' font-size='12' font-family='Arial' font-weight='bold' text-anchor='middle' fill='%23281805'%3E?%3C/text%3E%3C/svg%3E");
}

/* ---------------------------------------------
   LAYOUT CONTAINER
--------------------------------------------- */
.fg-container {
    width: 100%;
    padding: 64px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ---------------------------------------------
   HEADER
--------------------------------------------- */
.fg-header {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.fg-description {
    white-space: nowrap;
    font-size: 20px;
    font-family: "Forever Forma Body Text";
    font-weight: 400;
    line-height: 30px;
    color: #281805;
    margin: 0px;
}

/* Required note */
.fg-required {
    display: flex;
    flex-direction: column;
}

.fg-required-star {
    color: #CF0000;
    font-size: 16px;
}

/* ---------------------------------------------
   FORM FIELDS
--------------------------------------------- */
.fg-fields {
    width: 396px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 32px;
}

.fg-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Label row */
.fg-label-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fg-label {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-family: "Forever Forma Body Text";
    font-weight: 700;
    color: #281805;
}

/* ---------------------------------------------
   INPUTS
--------------------------------------------- */

.fg-input-box {
    width: 100%;
    display: flex;
    border: 2px solid var(--Inputs-Default, #281805);
    background: var(--Inputs-Bg_Default, #FFF);
}

    .fg-input-box input,
    .fg-input-field {
        width: 100%;
        height: 48px;
        padding: 12px 14px;
        font-size: 16px;
        font-family: "Forever Forma Body Text", sans-serif;
        background: var(--Inputs-Bg_Default, white);
        border: 2px solid var(--Inputs-Default,rgba(40, 24, 5, 0.60));
        /* border: 2px solid var(--Inputs-Default, #281805); */
        outline: none;
        box-sizing: border-box;
    }

 /*   behaviour*/
    /* Hover Behavior */
    .fg-input-box:hover {
        border: 2px solid var(--Inputs-Hover, rgba(40, 24, 5, 0.60));
        background: var(--Inputs-Bg_Default, #FFF);
    }

.fg-input-error {
    border: 2px solid var(--Inputs-Error-1, #C51321);
    outline-color: #C51321;
    background: var(--Inputs-Bg_Default, #FFF);
}

    .fg-input-error input {        
        border: 2px solid var(--Inputs-Error-1, #C51321);
        background: var(--Inputs-Bg_Default, #FFF);
    }
/* ---------------------------------------------
   ERROR TEXT
--------------------------------------------- */
.fg-error {
    color: #C51321;
    font-size: 14px;
}

/* ERROR LABEL */
.has-error .fg-label {
    color: #C51321;
}

    .has-error .fg-label::before {
        content: "";
        display: inline-block;
        width: 24px;
        height: 24px;
        margin-right: 4px;
        background-size: contain;
        background-repeat: no-repeat;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M1.86523 20.5L11.9997 3L22.1342 20.5H1.86523ZM4.44973 19H19.5497L11.9997 6L4.44973 19ZM11.9997 17.8077C12.2286 17.8077 12.4204 17.7303 12.5752 17.5755C12.7301 17.4207 12.8075 17.2288 12.8075 17C12.8075 16.7712 12.7301 16.5793 12.5752 16.4245C12.4204 16.2697 12.2286 16.1923 11.9997 16.1923C11.7709 16.1923 11.5791 16.2697 11.4242 16.4245C11.2694 16.5793 11.192 16.7712 11.192 17C11.192 17.2288 11.2694 17.4207 11.4242 17.5755C11.5791 17.7303 11.7709 17.8077 11.9997 17.8077ZM11.2497 15.1923H12.7497V10.1923H11.2497V15.1923Z' fill='%23C51321'/%3E%3C/svg%3E");
    }

.label-star-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 0; /* or a small controlled gap */
}

.error-field {
    outline: 2px solid var(--Inputs-Error-1, #C51321) !important;
    border-color: var(--Inputs-Error-1, #C51321) !important;
}

.error-field:focus-visible {
    box-shadow: 0 0 0 2px #C51321, 0 0 0 8px #FFEAEB;
    outline: none;
}
/* ---------------------------------------------
   BUTTONS
--------------------------------------------- */
.fg-buttons {
    display: flex;
    gap: 24px;
}

.fg-btn-primary {
    background: #281805;
    color: white;
    padding: 12px 24px;
    border-radius: 24px;
    border: none;
    font-size: 16px;
    cursor: pointer;
}

.fg-btn-text {
    background: none;
    border: none;
    color: #281805;
    font-size: 16px;
    cursor: pointer;
}

/* ---------------------------------------------
   RADIO BUTTONS
--------------------------------------------- */
/* Container styling */
.custom-radio-group {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 12px;
    width: fit-content;
}

/* Base List Item & Focus State (The Blue Box) */
.custom-radio-group li {
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s;
    border-radius: 0;
}

.custom-radio-group label {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    font-family: "Forever Forma Variable";
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #281805;
    word-wrap: break-word;
}

/* 1. FOCUS UNSELECTED (Blue Box + Underline) */
.custom-radio-group.interactive li:focus-within {
    /* background-color: #e8f0fe;  */
    border-color: #1a73e8;      /* Blue border from your image */
    border-radius: 4px;
	box-shadow: 0 0 0 2px var(--color-blue), 0 0 0 8px var(--color-focus);
}

/* Triggers underline when the hidden or visible input has focus */
.custom-radio-group.interactive li:focus-within label {
    text-decoration: underline;
}

/* 2. HOVER STATE (Underline) */
.custom-radio-group.interactive li:hover {
    text-decoration: underline;
    cursor: pointer;
}

/* 3. SELECTED STATE (Blue Text) */
/* Using ~ (tilde) ensures it works even if a span is present */
.custom-radio-group.interactive li input[type="radio"]:checked ~ label {
    /* color: #1a73e8; */
    font-weight: 600;
	text-decoration: underline;
}

/* Modern Radio Button Color */
.custom-radio-group.interactive li input[type="radio"] {
    accent-color: #0061F4; 
    width: 22px;
    height: 22px;
    cursor: pointer;
    margin: 0;
}

 .custom-radio-group:has(input:checked){ 
     outline: none; 
     box-shadow: none; 
     border-color: transparent; /* Adjust based on how your "blue box" is drawn */ 
} 



@media screen and (min-width: 375px) and (max-width: 600px) {
    .fg-fields {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding-bottom: 32px;
    }
    .fg-input-box {
        width: 80%;
        display: flex;
    }
}