/* 青龙防水 · 立即预约页 */

.od-crumb-bar{background:#fff;border-bottom:1px solid var(--line)}
.od-crumb{display:flex;align-items:center;gap:9px;max-width:var(--wrap);margin:0 auto;padding:0 28px;height:52px;font-size:13px;color:var(--gray-l)}
.od-crumb a{color:var(--gray);transition:color .2s}
.od-crumb a:hover{color:var(--brand)}
.od-crumb i{font-style:normal;color:#b9c6d4}
.od-crumb b{font-weight:500;color:var(--ink)}

.od-main{padding:40px 0 70px;background:#fff}
.od-title{max-width:1180px;margin:0 auto;padding:0 28px}
.od-title h1{font-size:clamp(25px,2.4vw,31px);line-height:1.3;color:var(--ink);letter-spacing:.01em}
.od-grid{display:grid;grid-template-columns:332px minmax(0,1fr);gap:28px;align-items:start;max-width:1180px;margin:26px auto 0;padding:0 28px}
.od-side{position:sticky;top:calc(var(--hd-h) + 18px)}

.od-qr-card{padding:30px 26px 26px;border:1px solid #dfe9f4;border-radius:12px;background:var(--brand-50);text-align:center}
.od-qr-tag{margin:0 0 10px;font-size:11px;font-weight:600;letter-spacing:.26em;color:var(--accent)}
.od-qr-card h2{margin:0 0 18px;font-size:19px;line-height:1.4;color:var(--brand-700)}
.od-qr{display:flex;align-items:center;justify-content:center;padding:10px;border:1px solid #e2ebf5;border-radius:10px;background:#fff}
.od-qr img{width:100%;max-width:224px;height:auto}
.od-qr-tip{margin:18px 0 0;font-size:13px;line-height:1.9;color:var(--gray);text-align:left}

.od-form-card{padding:34px 36px 36px;border:1px solid #e4ecf5;border-radius:12px;background:#fff;box-shadow:0 10px 34px rgba(13,43,76,.06)}
.od-form{display:grid;grid-template-columns:1fr 1fr;gap:20px 22px}
.od-full{grid-column:1/-1}
.od-field{display:block;min-width:0}
.od-k{display:block;margin-bottom:9px;font-size:13.5px;font-weight:600;line-height:1.6;color:var(--ink-2)}
.od-k i{font-style:normal;margin-left:3px;color:#d9480f}
.od-field input,.od-field select,.od-field textarea{width:100%;height:48px;padding:0 14px;border:1px solid #dbe3eb;border-radius:7px;outline:0;background:#fff;font-size:14.5px;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.od-field textarea{height:auto;padding:13px 14px;line-height:1.9;resize:vertical}
.od-field select{padding-right:36px;-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,#7890a5 50%),linear-gradient(135deg,#7890a5 50%,transparent 50%);background-position:calc(100% - 18px) 22px,calc(100% - 13px) 22px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.od-field select:disabled{background-color:#f5f7fa;color:#9aabb9;cursor:not-allowed}
.od-field input:focus,.od-field select:focus,.od-field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,64,152,.09)}
.od-field input::placeholder,.od-field textarea::placeholder{color:#9aaaba}
.od-region{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}

.od-foot{grid-column:1/-1;display:flex;align-items:center;gap:20px;margin-top:6px}
.od-submit{flex:0 0 auto;min-width:200px;height:52px;padding:0 34px;border:0;border-radius:7px;background:var(--brand);font-size:15.5px;font-weight:600;color:#fff;cursor:pointer;transition:background .2s}
.od-submit:hover{background:#0a5ab8}
.od-submit:disabled{opacity:.66;cursor:default}
.od-privacy{margin:0;font-size:11.5px;line-height:1.8;color:var(--gray-l)}
.od-status{grid-column:1/-1;display:none;margin:0;padding:14px 16px;border-radius:7px;background:#f2f7fc;font-size:13px;line-height:1.85;color:var(--ink-2)}
.od-status.on{display:block}
.od-status.err{background:#fdf3f1;color:#a3341a}
.od-status a{color:var(--brand);font-weight:600}
.od-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media (max-width:1200px){
  .od-grid{grid-template-columns:300px minmax(0,1fr);gap:24px}
  .od-form-card{padding:28px 28px 30px}
  .od-region{gap:18px}
}
@media (max-width:900px){
  .od-main{padding:28px 0 46px}
  .od-grid{grid-template-columns:1fr;gap:20px}
  .od-side{position:static;order:2}
  .od-qr-card{display:grid;grid-template-columns:190px minmax(0,1fr);gap:0 22px;text-align:left;align-items:center}
  .od-qr-tag,.od-qr-card h2,.od-qr-tip{grid-column:2}
  .od-qr-tag{margin:0 0 8px}
  .od-qr-card h2{margin:0 0 10px}
  .od-qr{grid-column:1;grid-row:1/4}
  .od-qr img{max-width:100%}
  .od-form{gap:17px}
}
@media (max-width:768px){
  .od-crumb{padding:0 18px;height:46px;font-size:12.5px}
  .od-title{padding:0 18px}
  .od-title h1{font-size:23px}
  .od-grid{padding:0 18px}
  .od-form-card{padding:24px 18px 26px}
  .od-form{grid-template-columns:1fr;gap:16px}
  .od-region{grid-template-columns:1fr;gap:16px}
  .od-foot{flex-direction:column;align-items:stretch;gap:12px}
  .od-submit{width:100%}
  .od-qr-card{grid-template-columns:150px minmax(0,1fr);gap:0 16px;padding:20px 18px}
  .od-qr-tip{font-size:12.5px}
}
@media (max-width:520px){
  .od-qr-card{grid-template-columns:1fr;text-align:center}
  .od-qr-tag,.od-qr-card h2,.od-qr-tip{grid-column:1}
  .od-qr{grid-row:auto;margin-bottom:14px}
  .od-qr img{max-width:190px;margin:0 auto}
  .od-qr-tip{text-align:center}
}