/* --------------------------------------------------------------------------- Medaad styling for the shared enquiry form (form.js renders .st-form). Only visual - no fields, names or behaviour are touched. form.js injects its own base CSS as the first thing in , so this file (loaded normally in the page) always wins. --------------------------------------------------------------------------- */ /* Brand tokens the shared form reads, mapped to Medaad's palette + Poppins. */ :root{ --st-font-sans:"Poppins", system-ui, -apple-system, sans-serif; --st-radius:9px; --st-blue-500:#2f66c4; --st-blue-700:#0f2a5c; --st-gray-800:#434343; --st-gray-400:#6b6b6b; --st-gray-300:#d0d5dd; --st-white:#ffffff; } /* The form sits in a clean card so the column reads as one tidy block. */ .st-form{ max-width:none; background:#ffffff; border:1px solid #e6e9ef; border-radius:16px; padding:22px 22px 24px; box-shadow:0 12px 34px rgba(15,42,92,.07); } /* Every field full width, one per row (matches the Medaad form design). With the labels hidden this stays compact, and the phone number has full room. */ .st-form__row--2col{grid-template-columns:1fr !important} .st-form__field{margin-bottom:12px} /* Placeholder-only layout: the visible labels are hidden, but kept in the DOM (screen readers still read them, so the form stays accessible). The field purpose is carried by the placeholder instead. */ .st-form__label{ position:absolute !important; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .st-form__input, .st-form__textarea{ font-family:var(--st-font-sans); font-size:.95rem; color:#434343; background:#f8fafc; border:1.5px solid #d7dce4; border-radius:9px; padding:.82rem .95rem; transition:border-color .18s ease, box-shadow .18s ease, background .18s ease; } .st-form__input::placeholder, .st-form__textarea::placeholder{color:#98a2b3} .st-form__input:focus, .st-form__textarea:focus{ background:#ffffff; border-color:#2f66c4; box-shadow:0 0 0 3px rgba(47,102,196,.14); outline:none; } .st-form__textarea{min-height:120px} /* Phone dial-code box lines up with the rounded inputs. */ .sbc-tel__code{ background:#eef1f5; border:1.5px solid #d7dce4; border-right:0; border-radius:9px 0 0 9px; color:#434343; } .sbc-tel.has-code > input{border-top-left-radius:0;border-bottom-left-radius:0} /* Submit button in Medaad blue. */ .st-form__submit, .st-btn--primary{ font-family:var(--st-font-sans); background:#2f66c4; border:1.5px solid #2f66c4; border-radius:9px; color:#fff; font-weight:600; font-size:.95rem; padding:.95rem 2.1rem; box-shadow:0 8px 20px rgba(47,102,196,.22); transition:background .18s ease, box-shadow .18s ease, transform .05s ease; } .st-form__submit:hover, .st-btn--primary:hover{background:#0f2a5c;border-color:#0f2a5c} .st-form__submit:active{transform:translateY(1px)} .st-form__actions{margin-top:18px} /* Success / error line. */ .st-form__status{border-radius:9px;font-family:var(--st-font-sans)} /* ---- Enquiry modal (holds the same shared form) ---- */ .mdd-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:18px} .mdd-modal[hidden]{display:none !important} .mdd-modal__bg{position:absolute;inset:0;background:rgba(15,42,92,.45);backdrop-filter:saturate(120%) blur(1px)} .mdd-modal__box{ position:relative;background:#fff;border-radius:16px; max-width:860px;width:100%;max-height:92vh;overflow:hidden; display:flex;box-shadow:0 30px 80px rgba(15,42,92,.35); animation:mddModalIn .18s ease; } @keyframes mddModalIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* Left: product image, exactly like the old popup. */ .mdd-modal__img{ flex:0 0 44%; background:#0f2a5c url("/wp-content/uploads/2023/08/Drums-on-pallets-steel-silver-activated-alumina-molecular-sieve-in-stock-store.webp") center/cover no-repeat; } /* Right: the form panel (this is what scrolls if the form is tall). */ .mdd-modal__panel{flex:1 1 auto;padding:30px 28px 26px;overflow:auto;max-height:92vh} .mdd-modal__x{ position:absolute;top:12px;right:14px;width:32px;height:32px;z-index:2; background:none;border:0;font-size:26px;line-height:1;color:#98a2b3;cursor:pointer;border-radius:8px; } .mdd-modal__x:hover{color:#434343;background:#f2f4f7} .mdd-modal__t{ font-family:"Poppins",system-ui,sans-serif;font-size:1.5rem;font-weight:700; color:#0f2a5c;margin:0 0 18px;line-height:1.2; } /* Inside the modal the form is already framed, so drop its own card. */ .mdd-modal .st-form{background:none;border:0;box-shadow:none;padding:0} /* On small screens the image would crush the form, so stack to form-only. */ @media (max-width:640px){ .mdd-modal__box{display:block;max-width:460px} .mdd-modal__img{display:none} .mdd-modal__panel{max-height:88vh} }