/* ROOM65 Zelle instructions and manual payment verification. This file is scoped to Zelle UI. */
.zelle-checkout-choice{border:1px solid #c0ddcd;background:#f4fbf4;border-radius:10px;padding:18px;margin:20px 0;color:#18482e}
.zelle-checkout-choice .zelle-choice-heading{display:flex;gap:13px;align-items:start;margin-bottom:12px}
.zelle-choice-heading>.icon{width:27px;height:27px;flex:none;color:#1e7646}
.zelle-choice-heading strong{font-weight:700;font-size:15px;display:block;margin-bottom:3px}
.zelle-choice-heading p,.zelle-checkout-choice p{font-size:13px;line-height:1.6;margin:5px 0}
.zelle-disclaimer{font-size:12px;line-height:1.6;color:#427a5b}
.zelle-checkout-choice .zelle-disclaimer{margin-top:12px;border-top:1px solid #deece4;padding-top:11px}
.zelle-confirmation .confirmation-meta{margin-bottom:25px}
.zelle-instructions{border:1px solid #dee9e3;background:#fff;border-radius:15px;box-shadow:0 15px 45px rgba(16,60,36,.06);margin:34px auto 35px;padding:clamp(19px,3vw,35px);text-align:left;max-width:1000px}
.zelle-heading-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.zelle-heading-row h2{font:500 clamp(24px,3vw,35px)/1.25 Georgia,serif;margin:6px 0 0;color:#144129}
.zelle-status{display:inline-flex;align-items:center;border-radius:99px;background:#fff2d5;border:1px solid #f4dca6;padding:7px 12px;color:#76500d;font:600 12px/1.4 Arial,sans-serif;white-space:normal}
.zelle-status.is-confirmed{color:#17653a;background:#e3f5e9;border-color:#a9e1bc}
.zelle-payment-facts{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.1fr);gap:14px;margin-bottom:24px}
.zelle-payment-facts>div{padding:18px 15px;background:#f0f8f1;border:1px solid #e2f0e8;border-radius:10px;min-width:0}
.zelle-payment-facts small{display:block;font:700 10px/1.3 Arial,sans-serif;letter-spacing:.06em;color:#478563;margin-bottom:9px}
.zelle-payment-facts strong{display:block;overflow-wrap:anywhere;font-size:16px;color:#14482b}
.zelle-payment-facts .zelle-pay-amount{font-size:24px;color:#1d7745}
.zelle-steps{list-style:decimal;padding-left:22px;margin:5px 0 25px;color:#254e38}
.zelle-steps li{line-height:1.65;font-size:14px;margin:9px 0;padding-left:4px}
.zelle-submit-form{border:1px solid #e0ede6;border-radius:12px;background:#f8fcfa;padding:clamp(17px,3vw,26px);margin:25px 0;text-align:left}
.zelle-submit-form h3{font-size:23px;line-height:1.3;color:#18422b;margin:0 0 7px}
.zelle-submit-form p{font-size:13px;line-height:1.6;color:#447e5e;margin:0 0 18px}
.zelle-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px}
.zelle-submit-form .form-field{margin-bottom:10px;min-width:0}
.zelle-submit-form .form-field label{display:block;font-weight:600;font-size:13px;color:#235238;margin-bottom:7px}
.zelle-submit-form .form-field input{width:100%;max-width:100%;background:#fff;color:#1a3f2b;box-sizing:border-box;border:1px solid #c9e0d3;border-radius:6px;padding:12px;font-size:14px;min-height:45px}
.zelle-submit-form .form-field input:focus{border-color:#087b43;outline:2px solid #d2eadd;outline-offset:1px}
.zelle-submit-form .btn{margin-top:14px}
.zelle-submit-form>small{display:block;margin-top:13px;color:#478563;line-height:1.5;font-size:12px}
.zelle-validation-errors{background:#fff4f2;color:#a02f2f;border:1px solid #f5b9b9;padding:12px;border-radius:8px;margin:12px 0}
.zelle-validation-errors ul{padding-left:18px;margin:0}
.zelle-waiting-note,.zelle-confirmed-message{display:flex;align-items:flex-start;gap:12px;border:1px solid #cae4d6;border-radius:9px;background:#f0f8f1;padding:17px;margin:14px 0;color:#286c47;line-height:1.6;font-size:14px}
.zelle-waiting-note .icon,.zelle-confirmed-message .icon{width:22px;height:22px;flex:none}
.zelle-confirmed-message{border-color:#b8dfc0;background:#e9f8ed;color:#205c38}
.zelle-confirmed-message p{margin:0}
.zelle-standalone-page{padding-top:65px;padding-bottom:90px;max-width:900px}
.zelle-standalone-page h1{font:500 clamp(33px,4vw,48px)/1.2 Georgia,serif;margin:10px 0 12px}
.zelle-standalone-page>p{color:#3f7557;line-height:1.7}
.zelle-standalone-page>p a,.zelle-tracking-status a{color:#1e7646;text-decoration:underline}
.zelle-tracking-status{border-left:4px solid #237b4b;padding:15px 19px;background:#f0f8f1;border-radius:5px;margin:20px 0;color:#235137;font-size:14px;line-height:1.6}
.zelle-tracking-status strong{display:block;margin-bottom:5px}
.zelle-tracking-status p{margin:6px 0 0}
/* Admin */
.zelle-admin-summary{display:flex;align-items:center;gap:12px;margin:0 0 22px;padding:16px 21px;border-radius:10px;background:#f3f9f6;color:#195c37;border:1px solid #d2e5db}
.zelle-admin-summary .icon{width:24px;height:24px;color:#087b43}
.zelle-admin-summary strong{font-size:27px}
.zelle-admin-summary span{font-size:14px}
.zelle-admin-toggle{display:flex;gap:10px;align-items:flex-start;color:#235339;font-size:13px;line-height:1.5;margin:14px 0;cursor:pointer}
.zelle-admin-toggle input{width:18px;height:18px;flex:none;margin:1px 0 0;accent-color:#227c4b}
.zelle-admin-review-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px}
.zelle-admin-review-grid>form{border:1px solid #ddeae3;background:#fafdfb;border-radius:10px;padding:19px;min-width:0}
.zelle-admin-review-grid>form h3{font-size:17px;color:#1a4f32;margin:0 0 15px}
.zelle-admin-review-grid .zelle-admin-reject{background:#fffaf9;border-color:#f0d3cd}
.zelle-admin-review-grid textarea{width:100%;box-sizing:border-box}
.zelle-admin-review-grid .admin-btn{margin-top:9px}
.zelle-dashboard-link>a{display:flex;align-items:center;gap:12px;border-radius:10px;padding:15px 20px;margin-bottom:22px;border:1px solid #c3e0d0;background:#f4faf7;color:#1e7546;text-decoration:none}
.zelle-dashboard-link .icon{width:22px;height:22px}
.zelle-dashboard-link span{margin-left:auto}
@media(max-width:760px){
  .zelle-payment-facts{grid-template-columns:1fr}
  .zelle-form-grid,.zelle-admin-review-grid{grid-template-columns:1fr}
  .zelle-instructions{margin:22px auto;padding:18px}
  .zelle-dashboard-link>a{flex-wrap:wrap}
  .zelle-dashboard-link span{margin-left:0}
}
/* The customer Zelle journey is a self-contained, mobile-friendly extension. */
.zelle-instruction-page{max-width:1120px;padding-top:55px;padding-bottom:95px}
.zelle-return-link{display:inline-flex;align-items:center;gap:8px;color:#276d46;text-decoration:none;font-size:13px;font-weight:700;margin-bottom:25px}
.zelle-return-link .icon{width:16px;height:16px}
.zelle-instruction-heading{text-align:center;max-width:720px;margin:0 auto 32px}
.zelle-instruction-heading h1{font:500 clamp(31px,4.1vw,49px)/1.15 Georgia,serif;color:#103e25;margin:10px 0 15px}
.zelle-instruction-heading h1 span{color:#226e48}
.zelle-instruction-heading p{font-size:15px;line-height:1.7;color:#427a5b;margin:0}
.zelle-instruction-top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:#eef5f2;border:1px solid #cfe1d6;border-radius:12px;margin-bottom:29px}
.zelle-instruction-top>div{min-width:0;padding:21px 25px;display:flex;flex-direction:column;gap:6px}
.zelle-instruction-top>div+div{border-left:1px solid #cfe1d6}
.zelle-instruction-top small{font:700 10px/1.3 Arial,sans-serif;letter-spacing:.075em;color:#5b7466}
.zelle-instruction-top strong{font:700 clamp(14px,1.7vw,20px)/1.25 Arial,sans-serif;color:#183e2c;overflow-wrap:anywhere}
.zelle-flow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:26px 0 0;padding:0}
.zelle-flow-step{min-width:0;padding:16px 9px 14px;display:flex;flex-direction:column;gap:9px;align-items:center;text-align:center;border:1px solid #dfe9e3;border-radius:10px;background:#f8fbf9;color:#5a9675}
.zelle-flow-mark{width:30px;height:30px;border:1px solid #c7ddd1;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;font:700 12px Arial,sans-serif}
.zelle-flow-mark .icon{width:16px;height:16px}
.zelle-flow-label{font:600 12px/1.4 Arial,sans-serif}
.zelle-flow-step.is-done{background:#e8f7ee;border-color:#b7dcc5;color:#205c40}
.zelle-flow-step.is-done .zelle-flow-mark{background:#23764d;color:#fff;border-color:#23764d}
.zelle-flow-step.is-current{background:#fff6e1;border-color:#e8cc88;color:#79551b}
.zelle-flow-step.is-current .zelle-flow-mark{background:#eec66d;border-color:#eec66d;color:#593b08}
.zelle-flow-message{background:#f6fbf8;border:1px solid #e0ede6;color:#316b4b;padding:12px 17px;border-radius:9px;font-size:13px;line-height:1.5;margin:11px 0 27px}
.zelle-flow-message.is-warning{background:#fff9ed;border-color:#efdba8;color:#785b20}
.zelle-flow-message.is-confirmed{background:#eaf8ef;border-color:#bee3ca;color:#255b38}
.zelle-flow-message.is-error{background:#fff0ed;border-color:#ecc2b9;color:#a23b30}
.zelle-instruction-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:22px;margin:23px 0 28px;align-items:start}
.zelle-instruction-box{border:1px solid #e0ebe5;border-radius:13px;background:#fff;padding:clamp(20px,3vw,30px);box-shadow:0 9px 25px rgba(15,68,39,.045);min-width:0}
.zelle-instruction-box h2,.zelle-next-action h2,.zelle-lookup-form h2,.zelle-standalone-help h2{font:500 clamp(22px,2.5vw,29px)/1.25 Georgia,serif;color:#17472c;margin:0 0 12px}
.zelle-instruction-box>p,.zelle-next-action p{font-size:14px;line-height:1.65;color:#3f7557;margin:0 0 17px}
.zelle-payment-facts-stacked{display:grid;grid-template-columns:1fr;gap:11px;margin:22px 0}
.zelle-payment-facts-stacked>div{position:relative;padding:16px 90px 16px 16px}
.zelle-payment-facts-stacked .zelle-pay-amount{color:#176b44}
.zelle-copy{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#174d39;background:#e0f0e7;border:1px solid #a9d6bb;border-radius:5px;font:700 11px Arial,sans-serif;cursor:pointer;padding:8px 10px;white-space:nowrap}
.zelle-copy:hover,.zelle-copy:focus-visible{background:#c7e4d4}
.zelle-instruction-box .zelle-submit-form{margin:0;background:#f8fbf9}
.zelle-instruction-box .zelle-form-grid{grid-template-columns:1fr}
.zelle-instruction-box .zelle-steps{margin:18px 0}
.zelle-instruction-box .zelle-disclaimer{margin-top:20px}
.zelle-reference-received{font-size:13px;color:#2f5842;padding-top:14px;overflow-wrap:anywhere}
.zelle-after-instructions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:22px 0 0}
.zelle-next-action{text-align:center;max-width:740px;margin:24px auto 32px;padding:27px;background:#f9fcfa;border:1px solid #e3efe8;border-radius:12px}
.zelle-next-action .btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;margin-top:5px}
.zelle-next-action .icon{width:17px;height:17px}
.zelle-step-number{font-size:11px;letter-spacing:.12em;color:#226b4d;font-weight:800;display:block;margin-bottom:7px}
.zelle-lookup-form{border:1px solid #deebe4;background:#fafcfb;border-radius:12px;padding:28px;margin:24px 0 34px}
.zelle-lookup-form .form-field{min-width:0}
.zelle-lookup-form .form-field label{display:block;margin-bottom:8px;font-weight:650;font-size:13px}
.zelle-lookup-form .form-field input{display:block;max-width:100%;width:100%;min-height:46px;box-sizing:border-box;border:1px solid #c9e0d3;border-radius:6px;padding:10px 12px;background:#fff}
.zelle-lookup-form .btn{margin-top:20px}
.zelle-standalone-help{margin-top:35px}
.zelle-standalone-help>p{font-size:14px;color:#3f7658;line-height:1.6}
.zelle-admin-filters{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.zelle-admin-filters input[type=search]{padding:10px 12px;min-width:220px;min-height:41px;border-radius:6px;border:1px solid #cfe2d8;background:#fff}
.zelle-resend-confirmation-form{background:#fff9ee;border:1px solid #ecd7a5;padding:19px;margin:20px 0;border-radius:9px}
@media(max-width:900px){.zelle-flow{grid-template-columns:repeat(3,minmax(0,1fr))}.zelle-instruction-grid{grid-template-columns:1fr}.zelle-instruction-box .zelle-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:580px){.zelle-instruction-page{padding-top:27px;padding-bottom:50px}.zelle-instruction-top{grid-template-columns:1fr}.zelle-instruction-top>div{padding:15px 20px}.zelle-instruction-top>div+div{border-left:0;border-top:1px solid #cfe1d6}.zelle-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.zelle-flow-step{padding:11px 5px}.zelle-instruction-box .zelle-form-grid{grid-template-columns:1fr}.zelle-payment-facts-stacked>div{padding-right:76px}.zelle-copy{right:7px;padding:7px}.zelle-lookup-form{padding:18px}.zelle-lookup-form .zelle-form-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.zelle-copy,.zelle-flow-step{transition:none}}