/* * Bhopal Bakers (pId 67625) — brand override styles. * Auto-loaded by base.php for this brand. Ports the CI3 * assets/themes/ue_override/bhopalbakers/bhopalbakers-style.css * (only the classes the bulk-order page uses). * * CI3 used --main-bg-color / --secondary-bg-color; CI4 injects * --brand-primary / --brand-secondary at runtime in , so we * alias them here instead of hardcoding hexes. */ :root { --main-bg-color: var(--brand-primary, #8b1a1a); --secondary-bg-color: var(--brand-secondary, #ffffff); } /* ── Layout / shared ────────────────────────────────────────────── */ .common-spacing { padding: 30px 0; } /* ── Contact / bulk-order form shell ────────────────────────────── */ .contact-form { background-color: #fff; width: 100%; max-width: 550px; padding: 20px; border-radius: 20px; margin: 20px auto 0; box-shadow: 0 0 10px #00000029; border: 1px solid #cccccc; } .contact-form p { font-size: 14px; max-width: 410px; margin: 0 auto; } .contact-form-bg .common-heading { font-size: 24px; position: relative; margin-bottom: 25px; } .common-heading { font-size: 30px; font-weight: 600; } .common-heading:after { position: absolute; content: ""; bottom: -16px; left: 50%; transform: translate(-50%, -50%); width: 70px; height: 3px; background-color: var(--main-bg-color); } /* ── Form fields ────────────────────────────────────────────────── */ .form-outer { max-width: 700px; margin: auto; padding: 0 10px; } .form-divs { margin-bottom: 18px; } .label-form { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: #555; margin-bottom: 8px; } .form_f { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; } .form_f input[type="text"], .form_f input[type="number"] { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; box-sizing: border-box; color: #333; background: #fff; } .form_f input[type="text"]::placeholder, .form_f input[type="number"]::placeholder { color: #bbb; } /* ── Radio / checkbox options ───────────────────────────────────── */ #bhopal-bulk-form .radio-outer, #bhopal-bulk-form .checkbox-outer { display: inline-flex; align-items: center; margin: 0 10px 6px 0; cursor: pointer; } #bhopal-bulk-form .radio-outer [type="radio"]:checked + label, #bhopal-bulk-form .radio-outer [type="radio"]:not(:checked) + label, #bhopal-bulk-form .checkbox-outer [type="checkbox"]:checked + label, #bhopal-bulk-form .checkbox-outer [type="checkbox"]:not(:checked) + label { padding-left: 26px; padding-right: 0; width: auto; font-size: 13px; } #bhopal-bulk-form .radio-outer [type="radio"]:checked + label:before, #bhopal-bulk-form .radio-outer [type="radio"]:not(:checked) + label:before { right: auto; left: 0; top: 50%; transform: translateY(-50%); } .radio-outer [type="radio"]:not(:checked) + label:before { border: 2px solid #707070; } .radio-outer [type="radio"]:checked + label:before { border-color: var(--main-bg-color); } #bhopal-bulk-form .radio-outer [type="radio"]:checked + label:after, #bhopal-bulk-form .radio-outer [type="radio"]:not(:checked) + label:after { right: auto; left: 4px; top: 50%; transform: translateY(-50%); } #bhopal-bulk-form .radio-outer [type="radio"]:not(:checked) + label:after { opacity: 0; transform: scale(0) translateY(-50%); } #bhopal-bulk-form .radio-outer [type="radio"]:checked + label:after { opacity: 1; transform: translateY(-50%) scale(1); } .checkbox-outer [type="checkbox"]:checked + label:before { border: 2px solid var(--main-bg-color); } #bhopal-bulk-form .checkbox-outer [type="checkbox"]:checked + label:before, #bhopal-bulk-form .checkbox-outer [type="checkbox"]:not(:checked) + label:before { right: auto; left: 0; top: 50%; transform: translateY(-50%); } #bhopal-bulk-form .checkbox-outer [type="checkbox"]:checked + label:before { content: ""; display: block; position: absolute; top: 3px; left: 7px; width: 5px; height: 13px; border: solid var(--secondary-bg-color); border-width: 0 2px 2px 0; transform: rotate(45deg); z-index: 2; } #bhopal-bulk-form .checkbox-outer [type="checkbox"]:checked + label:after, #bhopal-bulk-form .checkbox-outer [type="checkbox"]:not(:checked) + label:after { right: auto; left: 1px; top: 50%; transform: translateY(-50%); border: 2px solid var(--main-bg-color); } #bhopal-bulk-form .checkbox-outer [type="checkbox"]:not(:checked) + label:after { opacity: 0; transform: scale(0) translateY(-50%); } #bhopal-bulk-form .checkbox-outer [type="checkbox"]:checked + label:after { opacity: 1; transform: translateY(-50%) scale(1); } /* ── Submit button ──────────────────────────────────────────────── */ .submitBtn { margin-top: 24px; } #bhopal-bulk-form .submitBtn input[type="submit"] { background: var(--main-bg-color); box-shadow: 0 0 20px #00000029; border-radius: 5px; color: var(--secondary-bg-color); padding: 14px 25px; display: inline-block; border: none; font-size: 15px; margin-top: 10px; } @media only screen and (max-width: 767px) { .common-spacing { padding: 25px 0; } .common-heading { font-size: 22px; } .contact-form { padding: 20px 15px; } }