/* ==========================================================================
   Kamal Hydrotech - custom.css
   Site-wide custom styles / overrides (loaded after theme CSS)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Product Inquiry modal (#modalContactForm) - redesign
   -------------------------------------------------------------------------- */
#modalContactForm .modal-dialog { max-width: 560px; }
#modalContactForm .modal-content { border: none; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 70px rgba(15, 27, 45, .35); }

#modalContactForm .modal-header { background: linear-gradient(135deg, #c0392b 0%, #9c1f12 100%); border: none; padding: 20px 26px; align-items: center; position: relative; }
#modalContactForm .modal-title { color: #fff; font-size: 21px; font-weight: 800; letter-spacing: .3px; }
#modalContactForm .modal-header .close { color: #fff; opacity: .85; text-shadow: none; font-size: 30px; font-weight: 400; line-height: 1; margin: 0; padding: 0; position: absolute; right: 20px; top: 16px; transition: transform .2s, opacity .2s; }
#modalContactForm .modal-header .close:hover { opacity: 1; transform: rotate(90deg); }

#modalContactForm .modal-body { padding: 24px 26px 8px; }
#modalContactForm .modal-body .row { margin-left: -8px; margin-right: -8px; }
#modalContactForm .modal-body .row > [class*="col-"] { padding-left: 8px; padding-right: 8px; }

/* label above input (theme's floating-label JS is not initialised) */
#modalContactForm .md-form { display: flex; flex-direction: column-reverse; margin: 0 0 16px; position: relative; }
#modalContactForm .md-form .prefix { display: none; }
#modalContactForm .md-form label { position: static; transform: none !important; transition: none; margin: 0 0 6px; color: #334155; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

#modalContactForm .form-control,
#modalContactForm .md-textarea { width: 100%; height: auto; border: 1px solid #d7dee7; border-radius: 9px; padding: 11px 14px; font-size: 14px; color: #0f1b2d; background: #fff; box-shadow: none; transition: border-color .15s, box-shadow .15s; }
#modalContactForm .form-control::placeholder { color: #9aa6b2; }
#modalContactForm .form-control:focus,
#modalContactForm .md-textarea:focus { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192, 57, 43, .13); outline: none; }
#modalContactForm .form-control[readonly] { background: #f3f5f8; color: #64748b; cursor: not-allowed; }
#modalContactForm .md-textarea { min-height: 116px; resize: vertical; }

/* consent row (direct child of .modal-content) */
#modalContactForm .modal-content > .col-md-12 { padding: 6px 26px 2px !important; }
#modalContactForm .modal-content > .col-md-12 label { color: #475569; }
#modalContactForm .modal-content > .col-md-12 a { color: #c0392b; font-weight: 600; }

#modalContactForm .modal-footer { border-top: 1px solid #eef1f5; padding: 16px 26px 22px; }
#modalContactForm .btn-unique { background: linear-gradient(135deg, #c0392b 0%, #9c1f12 100%); color: #fff; border: none; border-radius: 9px; padding: 12px 40px; font-weight: 700; font-size: 15px; letter-spacing: .3px; box-shadow: 0 8px 20px rgba(192, 57, 43, .32); transition: transform .15s, filter .15s, box-shadow .15s; }
#modalContactForm .btn-unique:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(192, 57, 43, .4); }
#modalContactForm .btn-unique:active { transform: translateY(0); }

@media (max-width: 575px) {
  #modalContactForm .modal-body { padding: 18px 18px 4px; }
  #modalContactForm .modal-header,
  #modalContactForm .modal-footer { padding-left: 18px; padding-right: 18px; }
  #modalContactForm .modal-content > .col-md-12 { padding-left: 18px !important; padding-right: 18px !important; }
}