@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

.cpi-input .form-control {
    padding-left: 0;
}

.cpi-input .form-control:focus,
.cpi-input .form-control:active {
    outline: none;
    box-shadow: unset;
}

.cpi-input .cpi-drop,
.cpi-input .cpi-drop:hover,
.cpi-input .cpi-drop:active,
.cpi-input .cpi-drop:focus {
    background-color: #f8f9fa;
    outline: none;
    box-shadow: unset;
    border: none;
}

.cpi-input-focus .input-group {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Submit button styling for member, supplier, and partner forms */
#member_signup_form button[type="submit"],
#supplier_signup_form button[type="submit"],
#partner_signup_form button[type="submit"],
#member_signup_form button[type="submit"].btn-primary,
#supplier_signup_form button[type="submit"].btn-primary,
#partner_signup_form button[type="submit"].btn-primary,
#search_address_button {
    background-color: #FF6F00;
    border-color: #FF6F00;
    font-family: Inter, sans-serif !important;
    font-weight: 600 !important;
    /* font-size: 14px !important; */
    line-height: 22px !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
    color: #FFFFFF !important;
}

#member_signup_form button[type="submit"]:hover,
#supplier_signup_form button[type="submit"]:hover,
#partner_signup_form button[type="submit"]:hover,
#member_signup_form button[type="submit"].btn-primary:hover,
#supplier_signup_form button[type="submit"].btn-primary:hover,
#partner_signup_form button[type="submit"].btn-primary:hover,
#search_address_button:hover {
    background-color: #E55F00;
    border-color: #E55F00;
    color: #FFFFFF !important;
}

#member_signup_form button[type="submit"]:active,
#supplier_signup_form button[type="submit"]:active,
#partner_signup_form button[type="submit"]:active,
#member_signup_form button[type="submit"]:focus,
#supplier_signup_form button[type="submit"]:focus,
#partner_signup_form button[type="submit"]:focus,
#search_address_button:active,
#search_address_button:focus,
#member_signup_form button[type="submit"].btn-primary:active,
#supplier_signup_form button[type="submit"].btn-primary:active,
#partner_signup_form button[type="submit"].btn-primary:active,
#member_signup_form button[type="submit"].btn-primary:focus,
#supplier_signup_form button[type="submit"].btn-primary:focus,
#partner_signup_form button[type="submit"].btn-primary:focus {
    background-color: #CC5500;
    border-color: #CC5500;
    box-shadow: 0 0 0 0.2rem rgba(255, 111, 0, 0.25);
    color: #FFFFFF !important;
}

/* Cancel button styling for member, supplier, and partner forms */
#member_signup_form .clear-form-btn,
#supplier_signup_form .clear-form-btn,
#partner_signup_form .clear-form-btn,
#member_signup_form button.clear-form-btn,
#supplier_signup_form button.clear-form-btn,
#partner_signup_form button.clear-form-btn {
    background-color: #F5F5F5;
    border-color: #F5F5F5;
    font-family: Inter, sans-serif !important;
    font-weight: 600 !important;
    /* font-size: 14px !important; */
    line-height: 22px !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
    color: #252525 !important;
}

#member_signup_form .clear-form-btn:hover,
#supplier_signup_form .clear-form-btn:hover,
#partner_signup_form .clear-form-btn:hover,
#member_signup_form button.clear-form-btn:hover,
#supplier_signup_form button.clear-form-btn:hover,
#partner_signup_form button.clear-form-btn:hover {
    background-color: #E5E5E5;
    border-color: #E5E5E5;
    color: #252525 !important;
}

#member_signup_form .clear-form-btn:active,
#supplier_signup_form .clear-form-btn:active,
#partner_signup_form .clear-form-btn:active,
#member_signup_form .clear-form-btn:focus,
#supplier_signup_form .clear-form-btn:focus,
#partner_signup_form .clear-form-btn:focus,
#member_signup_form button.clear-form-btn:active,
#supplier_signup_form button.clear-form-btn:active,
#partner_signup_form button.clear-form-btn:active,
#member_signup_form button.clear-form-btn:focus,
#supplier_signup_form button.clear-form-btn:focus,
#partner_signup_form button.clear-form-btn:focus {
    background-color: #D5D5D5;
    border-color: #D5D5D5;
    color: #252525 !important;
    box-shadow: 0 0 0 0.2rem rgba(245, 245, 245, 0.25);
}

/* h4 tag styling */
h4,
.card-body h4,
#member_signup_form h4,
#supplier_signup_form h4,
#partner_signup_form h4,
h4.fw-bold,
h4.text-center {
    font-family: Inter, sans-serif !important;
    font-weight: 700 !important;
    line-height: 26px !important;
    letter-spacing: 0 !important;
    vertical-align: middle !important;
    color: #252525 !important;
}

/* Label styling */
label,
.control-label,
#member_signup_form label,
#supplier_signup_form label,
#partner_signup_form label,
.card-body label,
.form-group label {
    font-family: Inter, sans-serif !important;
    line-height: 18px !important;
    letter-spacing: 0 !important;
    vertical-align: middle !important;
    color: #252525 !important;
}

/* Placeholder styling */
input::placeholder,
input::-webkit-input-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder,
textarea::placeholder,
textarea::-webkit-input-placeholder,
textarea::-moz-placeholder,
textarea:-ms-input-placeholder,
#member_signup_form input::placeholder,
#supplier_signup_form input::placeholder,
#partner_signup_form input::placeholder,
.form-control::placeholder {
    font-family: Inter, sans-serif !important;
    font-weight: 400 !important;
    line-height: 22px !important;
    letter-spacing: 0 !important;
    vertical-align: middle !important;
    color: #666666 !important;
    opacity: 1 !important;
}

/* Error text styling */
.error-message,
.text-danger,
.alert-danger,
.alert-danger *,
#member_signup_form .error-message,
#supplier_signup_form .error-message,
#partner_signup_form .error-message,
#member_signup_form .text-danger,
#supplier_signup_form .text-danger,
#partner_signup_form .text-danger,
.card-body .error-message,
.card-body .text-danger {
    font-family: Inter, sans-serif !important;
    font-weight: 400 !important;
    line-height: 18px !important;
    letter-spacing: 0 !important;
    vertical-align: middle !important;
    color: #EC2A5F !important;
}

/* Checkbox styling */
input[type="checkbox"] {
    accent-color: #FF6F00 !important;
    cursor: pointer;
    box-shadow: none !important;
}

input[type="checkbox"]:checked {
    background-color: #FF6F00 !important;
    border-color: #FF6F00 !important;
    box-shadow: none !important;
}

input[type="checkbox"]:focus,
input[type="checkbox"]:active {
    outline: none !important;
    box-shadow: none !important;
}

/* Align checkbox and label nicely in form-check rows */
.form-check {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Override Bootstrap's top offset so it centers with the label */
.form-check .form-check-input {
    margin-top: 0 !important;
    margin-right: 0 !important; /* we'll use gap instead */
    float: none; /* cancel Bootstrap float */
    position: static; /* cancel Bootstrap absolute-ish offsets */
    vertical-align:middle !important;
    width: 18px;
    height: 18px;
    transform: translateY(-1px); /* optical centering with 18px label line-height */
}

.form-check .form-check-label {
    margin-bottom: 0; /* prevent baseline misalignment */
    margin-left: 0 !important; /* cancel Bootstrap left offset for floated inputs */
    line-height: 18px; /* align with checkbox height */
}

/* Signup Success Page Styling */
.signup-success-container {
    padding: 40px 20px;
    font-family: Inter, sans-serif;
}

.success-icon-circle {
    width: 80px;
    height: 80px;
    background-color: #FF6F00;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
}

.success-checkmark {
    width: 40px;
    height: 40px;
}

.success-title {
    font-family: Inter, sans-serif !important;
    font-weight: 700 !important;
    font-size: 28px !important;
    line-height: 34px !important;
    color: #252525 !important;
    margin-bottom: 15px !important;
}

.success-divider {
    width: 100%;
    border: none;
    border-top: 1px solid #252525;
    margin: 15px 0 20px 0;
    opacity: 0.3;
}

.success-message-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 15px;
}

.success-checkmark-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background-color: #FF6F00;
    color: white;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    flex-shrink: 0;
}

.success-message {
    font-family: Inter, sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: #252525 !important;
    margin: 0 !important;
}

.success-submessage {
    font-family: Inter, sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: #666666 !important;
    margin: 0 !important;
}

/* Story image container to prevent overflow */
.story-image-container {
    max-width: 400px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.story-image-container img,
.story-image-container .o_field_image {
    max-width: 400px;
    max-height: 300px;
    width: auto;
    height: auto;
    object-fit: contain;
}