/* Login Register New Css */

.chgs-wrap { max-width: 1080px !important; margin: 0 auto !important; padding: 32px 20px 60px 20px !important; font-family: inherit !important; color: #1F2933 !important; text-align: center !important; }
.chgs-title-line { margin-bottom: 24px !important; text-align:center; }
.chgs-title-line h1 { font-size: 24px !important; font-weight: 800 !important; color: #1F2933 !important; margin: 0 !important; }
.chgs-title-login { display: none !important; }
#chgs-mode-login:checked ~ .chgs-title-line .chgs-title-signup { display: none !important; }
#chgs-mode-login:checked ~ .chgs-title-line .chgs-title-login { display: block !important; }
.chgs-title-line p { font-size: 16px; margin-top: 10px; }

@media (max-width: 640px) {
    .chgs-title-line h1 { font-size: 20px !important; }
}

.chgs-mode-input { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; }

.chgs-toggle { display: inline-flex !important; background: #f1f2f4 !important; border-radius: 999px !important; padding: 4px !important; margin-bottom: 40px !important; }
.chgs-toggle-btn { margin: 0; display: inline-block !important; padding: 10px 28px !important; border-radius: 999px !important; font-weight: 700 !important; font-size: 14.5px !important; color: #6B7280 !important; cursor: pointer !important; transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important; }
#chgs-mode-signup:checked ~ .chgs-toggle label[for="chgs-mode-signup"],
#chgs-mode-login:checked ~ .chgs-toggle label[for="chgs-mode-login"] { background: #ffffff !important; color: #008489 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important; }

.chgs-panel-login { display: none !important; }
#chgs-mode-login:checked ~ .chgs-panel-signup { display: none !important; }
#chgs-mode-login:checked ~ .chgs-panel-login { display: block !important; }

.chgs-inline-link { border: none !important; background: transparent !important;font-size: 14px !important; display: inline; color: #008489 !important; font-weight: 700 !important; cursor: pointer !important; text-decoration: none !important; }
.chgs-inline-link:hover { text-decoration: underline !important; }

.chgs-cards { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; margin-bottom: 28px !important; }

.chgs-card { position: relative !important; display: block !important; text-align: left !important; background: #ffffff !important; border: 2px solid #e5e7eb !important; border-radius: 18px !important; padding: 32px 28px !important; cursor: pointer !important; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease !important; }
.chgs-card:hover { transform: translateY(-4px) !important; box-shadow: 0 14px 30px rgba(0,0,0,0.08) !important; }

.chgs-radio-input { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; }
.chgs-radio-dot { position: absolute !important; top: 24px !important; right: 24px !important; width: 24px !important; height: 24px !important; border-radius: 50% !important; border: 2px solid #d1d5db !important; background: #ffffff !important; transition: border-color 0.2s ease, background-color 0.2s ease !important; }
.chgs-radio-dot::after { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 10px !important; height: 10px !important; border-radius: 50% !important; background: #ffffff !important; transform: translate(-50%, -50%) scale(0) !important; transition: transform 0.15s ease !important; }
.chgs-radio-input:checked ~ .chgs-radio-dot::after { transform: translate(-50%, -50%) scale(1) !important; }

.chgs-icon { width: 56px !important; height: 56px !important; border-radius: 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 14px !important; color: #ffffff !important; }

.chgs-eyebrow { font-size: 11px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; margin-bottom: 6px !important; }
.chgs-card h3 { font-size: 19px !important; font-weight: 800 !important; color: #1F2933 !important; margin: 0 0 10px 0 !important; }
.chgs-desc { font-size: 14px !important; color: #6B7280 !important; line-height: 1.55 !important; margin: 0 0 20px 0 !important; min-height: 84px !important; }

.chgs-list { list-style: none !important; margin: 0 0 22px 0 !important; padding: 0 !important; }
.chgs-list li { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 14px !important; color: #374151 !important; margin-bottom: 11px !important; }
.chgs-check { width: 20px !important; height: 20px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }

.chgs-learn { font-size: 13.5px !important; font-weight: 700 !important; text-decoration: none !important; }

.chgs-card-teal .chgs-icon { background: linear-gradient(135deg, #008489, #00a8b5) !important; }
.chgs-card-teal .chgs-eyebrow { color: #008489 !important; }
.chgs-card-teal .chgs-check { background: #e6f5f5 !important; color: #008489 !important; }
.chgs-card-teal .chgs-learn { color: #008489 !important; }
.chgs-card-teal:hover { border-color: #008489 !important; }
.chgs-card-teal .chgs-radio-input:checked ~ .chgs-radio-dot { border-color: #008489 !important; background: #008489 !important; }
.chgs-card-teal:has(.chgs-radio-input:checked) { border-color: #008489 !important; background: #f4fbfb !important; box-shadow: 0 10px 26px rgba(0,132,137,0.16) !important; }

.chgs-card-amber .chgs-icon { background: linear-gradient(135deg, #f5b942, #e08e2d) !important; }
.chgs-card-amber .chgs-eyebrow { color: #b8790a !important; }
.chgs-card-amber .chgs-check { background: #fff3da !important; color: #b8790a !important; }
.chgs-card-amber .chgs-learn { color: #b8790a !important; }
.chgs-card-amber:hover { border-color: #f5b942 !important; }
.chgs-card-amber .chgs-radio-input:checked ~ .chgs-radio-dot { border-color: #f5b942 !important; background: #f5b942 !important; }
.chgs-card-amber:has(.chgs-radio-input:checked) { border-color: #f5b942 !important; background: #fffaf0 !important; box-shadow: 0 10px 26px rgba(245,185,66,0.20) !important; }

.chgs-card-hostpro .chgs-icon { background: linear-gradient(135deg, #7c5ce0, #e0539a) !important; }
.chgs-card-hostpro .chgs-eyebrow { color: #9b3fae !important; }
.chgs-card-hostpro .chgs-check { background: #f5eefb !important; color: #9b3fae !important; }
.chgs-card-hostpro .chgs-learn { color: #9b3fae !important; }
.chgs-card-hostpro:hover { border-color: #b06bd6 !important; }
.chgs-card-hostpro .chgs-radio-input:checked ~ .chgs-radio-dot { border-color: #9b3fae !important; background: linear-gradient(135deg, #7c5ce0, #e0539a) !important; }
.chgs-card-hostpro:has(.chgs-radio-input:checked) { border-color: #b06bd6 !important; background: #fbf6fd !important; box-shadow: 0 10px 26px rgba(155,63,174,0.16) !important; }

.chgs-confirm { font-size: 14.5px !important; margin: 0 0 20px 0 !important; padding: 10px 18px !important; border-radius: 999px !important; display: none; }
.chgs-confirm strong { font-weight: 800 !important; }
.chgs-cards:has(#homeowner:checked) ~ .chgs-confirm-wrap .chgs-confirm-teal { display: inline-block !important; background: #e6f5f5 !important; color: #006c70 !important; }
.chgs-cards:has(#local-expert:checked) ~ .chgs-confirm-wrap .chgs-confirm-amber { display: inline-block !important; background: #fff3da !important; color: #935e08 !important; }
.chgs-cards:has(#global-expert:checked) ~ .chgs-confirm-wrap .chgs-confirm-hostpro { display: inline-block !important; background: #f5eefb !important; color: #82339a !important; }

.chgs-create-btn { background: #008489 !important; color: #ffffff !important; border: none !important; padding: 16px 56px !important; border-radius: 10px !important; font-weight: 800 !important; font-size: 16px !important; cursor: pointer !important; transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important; width: 100% !important; }
.chgs-create-btn:hover { background: #008489 !important; color: #ffffff !important; transform: translateY(-2px) !important; box-shadow: 0 10px 24px rgba(0,132,137,0.3) !important; filter: brightness(1.04) !important; }
.chgs-create-btn#createAccountBtn {
    max-width: 340px !important;
}

.chgs-login-link { text-align: center; font-size: 14px !important; color: #6B7280 !important; margin-top: 18px !important; }

.chgs-login-form { max-width: 420px !important; margin: 0 auto !important; text-align: left !important; }
.chgs-field-label { display: block !important; font-size: 13.5px !important; font-weight: 700 !important; color: #1F2933 !important; margin: 0 0 8px 0 !important; }
.chgs-field-input { display: block !important; width: 100% !important; padding: 13px 16px !important; border: 1.5px solid #e5e7eb !important; border-radius: 10px !important; font-size: 14.5px !important; color: #1F2933 !important; margin-bottom: 20px !important; background: #ffffff !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; box-sizing: border-box !important; }
.chgs-field-input:focus { outline: none !important; border-color: #008489 !important; box-shadow: 0 0 0 3px rgba(0,132,137,0.12) !important; }

.chgs-password-wrap { position: relative !important; }
.chgs-password-wrap .chgs-field-input { padding-right: 60px !important; }
.chgs-show-btn { position: absolute !important; right: 14px !important; top: 13px !important; background: none !important; border: none !important; color: #008489 !important; font-size: 13px !important; font-weight: 700 !important; cursor: pointer !important; padding: 0 !important; }

.chgs-remember { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 14px !important; color: #374151 !important; cursor: pointer !important; margin-bottom: 26px !important; user-select: none !important; }
.chgs-remember-input { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; }
.chgs-remember-box { width: 19px !important; height: 19px !important; border: 1.5px solid #d1d5db !important; border-radius: 5px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: background-color 0.2s ease, border-color 0.2s ease !important; flex-shrink: 0 !important; }
.chgs-remember-input:checked ~ .chgs-remember-box { background: #008489 !important; border-color: #008489 !important; }
.chgs-remember-input:checked ~ .chgs-remember-box::after { content: "" !important; width: 5px !important; height: 9px !important; border-right: 2px solid #ffffff !important; border-bottom: 2px solid #ffffff !important; transform: rotate(45deg) translate(-1px, -1px) !important; }

.chgs-signin-btn { max-width: none !important; margin-bottom: 26px !important; }

.chgs-divider { position: relative !important; text-align: center !important; margin: 0 0 22px 0 !important; }
.chgs-divider::before { content: "" !important; position: absolute !important; top: 50% !important; left: 0 !important; right: 0 !important; height: 1px !important; background: #e5e7eb !important; }
.chgs-divider span { position: relative !important; background: #ffffff !important; padding: 0 14px !important; font-size: 13px !important; color: #9CA3AF !important; }

.chgs-social-btn { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: 100% !important; padding: 12px !important; border: 1.5px solid #e5e7eb !important; border-radius: 10px !important; font-size: 14.5px !important; font-weight: 700 !important; color: #1F2933 !important; text-decoration: none !important; margin-bottom: 12px !important; box-sizing: border-box !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; }
.chgs-social-btn:hover { border-color: #008489 !important; box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important; }
.chgs-divider { margin: 8px 0 24px 0 !important; }

.chgs-forgot { text-align: center !important; margin: 6px 0 18px 0 !important; }
.chgs-forgot a { font-size: 14px !important; color: #008489 !important; font-weight: 700 !important; text-decoration: none !important; }
.chgs-forgot a:hover { text-decoration: underline !important; }
.chgs-login-form .chgs-login-link { text-align: center !important; }
.chgs-wrap .responce-text-info:empty {
    display: none;
}
.chgs-signup-form input[type=tel]#signup-phone {
    padding-left: 77px !important;
    margin-bottom: 20px !important;
}
.chgs-signup-form .error-message {
    text-align: center;
    font-size: 14px !important;
    margin-top: 18px;
    display: block;
}
.chgs-signup-form { max-width: 420px !important; margin: 0 auto !important; text-align: left !important; display:none; }
.chgs-signup-form .intl-tel-input {
    display: block !important;
}


@media (max-width: 900px) {
      .chgs-cards { grid-template-columns: 1fr !important; 
      }
}

#forgotPassword .modal-dialog {
    background: #fff;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    border-radius: 16px;
}
#forgotPassword .modal-dialog .modal-content {
    padding: 0;
    border-radius: 16px;
    box-shadow: none;
    overflow: hidden;
}
#forgotPassword .modal-header:after, 
#forgotPassword .modal-header:before {
    display: none;
}
#forgotPassword .modal-header {
    position: relative;
    z-index: 1;
}
#forgotPassword .modal-header button.close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 0 !important;
    border-radius: 50%;
    background: transparent;
    color: #6f6a62;
    font-size: 28px !important;
    line-height: 30px;
    cursor: pointer;
    opacity: 1;
}
#forgotPassword .modal-dialog .modal-body {
    margin: 0;
    padding: 0;
}
#forgotPassword .modal-dialog .modal-body form {
    max-width: 440px;
    margin: auto;
    padding: 28px 36px;
}
#forgotPassword .signUpIn h3 {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    margin-top: 0;
    color: #1a1712;
}
#forgotPassword .resetPassDesc {
    font-size: 14px;
    color: #6f6a62;
    margin: 5px 0 15px 0;
}

#forgotPassword #forgot_pass_success:empty, 
#forgotPassword #forgot_pass_error:empty {
    margin: 0;
}
#forgotPassword .image_box input {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 10px;
    padding: 12px 14px;
    border: 1px solid #e2e0d8;
    border-radius: 10px;
    outline: none;
    background: #fff;
    color: #26211c;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
#forgotPassword .image_box i.fa {
    display: none !important;
}
#forgotPassword .remember {
    margin-bottom: 0;
}
#forgotPassword .remember .right .submitBtn1 {
    color: #008489;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.5;
    background-color: transparent;
    border: none;
    margin: 0;
    padding: 0;
}

div.responce-text-info {
    padding: 10px 0 10px 10px;
    margin: 30px 0;
    border-radius: 10px;
    font-size: 12px;
    font-style: italic;
    font-weight: 500;
}
div.responce-text-info.text-error {
    background-color: #ffd6d6;
    color: red;
}

/* Loading state */
.chgs-wrap {
    position: relative;
}

.chgs-wrap.loading {
    pointer-events: none;
}

/* Loading overlay */
.chgs-wrap.loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.75);
    z-index: 999;
}

/* Spinner */
.chgs-wrap.loading::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 42px;
    height: 42px;
    margin-top: -21px;
    margin-left: -21px;

    border: 4px solid #e5e7eb;
    border-top-color: #00a6b2;
    border-radius: 50%;

    animation: chgs-loading-spin 0.8s linear infinite;

    z-index: 1000;
}

@keyframes chgs-loading-spin {
    to {
        transform: rotate(360deg);
    }
}