/* Member login / sign-up / change-password pop-ups on the home page. Modern black + gold card; ids and handlers are unchanged. */
:is(#UserLoginModal, #exampleModalPropertySignup, #ModalChangePassword) .modal-dialog { max-width: 430px; }
:is(#UserLoginModal, #exampleModalPropertySignup, #ModalChangePassword) .modal-content { border: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); font-family: "Montserrat", "Inter", "Segoe UI", system-ui, sans-serif; background: #fff; }
:is(#UserLoginModal, #exampleModalPropertySignup, #ModalChangePassword) .modal-header { background: #0b0b0b; border: 0; border-bottom: 3px solid #ffb400; padding: 20px 24px 16px; position: relative; }
:is(#UserLoginModal, #exampleModalPropertySignup, #ModalChangePassword) .modal-title { color: #fff; font-size: 1.2rem; font-weight: 800; margin: 0; letter-spacing: .01em; }
:is(#UserLoginModal, #exampleModalPropertySignup, #ModalChangePassword) .btn-close { filter: invert(1) grayscale(1) brightness(2); opacity: .85; margin: 0; }
:is(#UserLoginModal, #exampleModalPropertySignup, #ModalChangePassword) .btn-close:hover { opacity: 1; }
:is(#UserLoginModal, #exampleModalPropertySignup, #ModalChangePassword) .modal-body { padding: 24px 26px 26px; }
:is(#UserLoginModal, #exampleModalPropertySignup, #ModalChangePassword) .zm-sub { margin: 0 0 18px; font-size: .84rem; color: #6c675a; line-height: 1.55; }

/* fields */
:is(#UserLoginModal, #exampleModalPropertySignup, #ModalChangePassword) .input-group { flex-wrap: nowrap; position: relative; }
:is(#UserLoginModal, #exampleModalPropertySignup, #ModalChangePassword) .input-group-text { width: 48px; justify-content: center; background: #0b0b0b; color: #ffb400; border: 1px solid #0b0b0b; border-radius: 10px 0 0 10px; font-size: 1.05rem; }
:is(#UserLoginModal, #exampleModalPropertySignup, #ModalChangePassword) .form-control { height: 48px; border: 1px solid #e3dcc4; border-left: 0; border-radius: 0 10px 10px 0; font-size: .9rem; color: #151515; background: #fff; }
:is(#UserLoginModal, #exampleModalPropertySignup, #ModalChangePassword) .form-control:focus { border-color: #ffb400; box-shadow: 0 0 0 3px rgba(255, 180, 0, .2); }
:is(#UserLoginModal, #exampleModalPropertySignup, #ModalChangePassword) .form-control::placeholder { color: #9a9582; }
:is(#UserLoginModal, #exampleModalPropertySignup, #ModalChangePassword) .password-wrapper .form-control { padding-right: 44px; border-radius: 0 10px 10px 0 !important; }
:is(#UserLoginModal, #exampleModalPropertySignup, #ModalChangePassword) .password-wrapper .eye-icon { position: absolute !important; right: 14px; top: 50%; transform: translateY(-50%); margin: 0 !important; cursor: pointer; color: #6c675a; z-index: 5; line-height: 1; }
:is(#UserLoginModal, #exampleModalPropertySignup, #ModalChangePassword) .password-wrapper .eye-icon:hover { color: #111; }

/* buttons: black with gold text (always readable), gold on hover */
:is(#UserLoginModal, #exampleModalPropertySignup, #ModalChangePassword) .btn.btn-primary,
:is(#UserLoginModal, #exampleModalPropertySignup, #ModalChangePassword) .modal-body .btn-primary { width: 100%; height: 48px; border: 2px solid #0b0b0b !important; border-radius: 10px; background: #0b0b0b !important; color: #ffb400 !important; font-weight: 800; font-size: .86rem; letter-spacing: .08em; text-transform: uppercase; opacity: 1 !important; transition: background .15s, color .15s, transform .12s; }
:is(#UserLoginModal, #exampleModalPropertySignup, #ModalChangePassword) .btn.btn-primary:hover,
:is(#UserLoginModal, #exampleModalPropertySignup, #ModalChangePassword) .btn.btn-primary:focus { background: #ffb400 !important; border-color: #ffb400 !important; color: #111 !important; transform: translateY(-1px); }
:is(#UserLoginModal, #exampleModalPropertySignup, #ModalChangePassword) .btn.btn-primary:disabled { opacity: .55 !important; transform: none; }
:is(#UserLoginModal, #exampleModalPropertySignup, #ModalChangePassword) .d-flex.justify-content-center { display: block !important; }

/* footer links */
:is(#UserLoginModal, #exampleModalPropertySignup, #ModalChangePassword) hr { border: 0; border-top: 1px solid #ece6d2; opacity: 1; margin: 20px 0 6px; }
:is(#UserLoginModal, #exampleModalPropertySignup, #ModalChangePassword) label small { font-size: .8rem; color: #6c675a; }
:is(#UserLoginModal, #exampleModalPropertySignup, #ModalChangePassword) a { color: #b87900; font-weight: 700; text-decoration: none; }
:is(#UserLoginModal, #exampleModalPropertySignup, #ModalChangePassword) a:hover { color: #7a5000; text-decoration: underline; }
:is(#UserLoginModal, #exampleModalPropertySignup, #ModalChangePassword) .my-3.d-flex { justify-content: center; text-align: center; }
:is(#UserLoginModal, #exampleModalPropertySignup, #ModalChangePassword) .my-3 label small + small { margin: 0 6px; }
@media (max-width: 480px) { :is(#UserLoginModal, #exampleModalPropertySignup, #ModalChangePassword) .modal-body { padding: 20px 18px 22px; } }

/* the older template pads .modal-content: header must run edge to edge; keep the link row on one line */
:is(#UserLoginModal, #exampleModalPropertySignup, #ModalChangePassword) .modal-content { padding: 0 !important; }
:is(#UserLoginModal, #exampleModalPropertySignup, #ModalChangePassword) .modal-header { margin: 0 !important; border-radius: 0; }
:is(#UserLoginModal, #exampleModalPropertySignup, #ModalChangePassword) .modal-dialog { max-width: 440px; }
:is(#UserLoginModal, #exampleModalPropertySignup, #ModalChangePassword) .my-3 label { display: block; text-align: center; margin: 0; }
:is(#UserLoginModal, #exampleModalPropertySignup, #ModalChangePassword) .my-3 label small { display: inline-block; font-size: .78rem; margin: 2px 0; }
:is(#UserLoginModal, #exampleModalPropertySignup, #ModalChangePassword) .my-3 label small + small { margin: 2px 4px; }