/* GasPriceIQ Notifications + shared station search */
.notification-panel,.otp-panel{max-width:1120px}
.notification-toolbar,.section-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}
.notification-toolbar{margin-bottom:22px}
.notification-toolbar h2,.section-title-row h3,.otp-panel h2{margin:0 0 6px;color:#0a2b4b}
.notification-toolbar p,.section-title-row p,.otp-panel p{margin:0;color:var(--muted,#66768d)}
.notification-section{border-top:1px solid #e7edf3;padding:24px 0}
.notification-section:first-of-type{border-top:0;padding-top:0}

.station-search-grid{display:grid;grid-template-columns:minmax(0,1fr) 170px auto;gap:14px;align-items:end;margin-top:16px}
.notification-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.notification-field>span,.notification-search-action>span{color:#243b55;font-size:14px;font-weight:750}
.notification-field>span small{color:#76869a;font-weight:500}
.notification-field input,.notification-field select,.otp-row input{
  box-sizing:border-box;min-height:46px;width:100%;border:1px solid #ced8e4;border-radius:9px;
  padding:10px 12px;background:#fff;color:#17334f;font:inherit
}
.notification-field input:focus,.notification-field select:focus,.otp-row input:focus{
  outline:3px solid rgba(23,105,232,.12);border-color:#1769e8
}
.notification-field>small{color:#78879a;line-height:1.4}
.notification-search-action{display:flex;flex-direction:column;gap:7px}
.nickname-field{max-width:520px;margin-top:18px}
.inline-message{min-height:20px;margin-top:8px;color:#65768a;font-size:13px;font-weight:650}
.inline-message.error,.form-message.error{color:#c62828}
.inline-message.success,.form-message.success{color:#118447}


.notification-link,.link-button{color:#1769e8;font-weight:750;text-decoration:none}
.link-button{appearance:none;border:0;padding:0;background:none;font:inherit;cursor:pointer}
.bulk-actions{display:flex;align-items:center;gap:8px;white-space:nowrap}
.station-list-summary{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:15px 0 10px;color:#6b7d90;font-size:13px;font-weight:650}
.competitor-list{border:1px solid #e0e7ef;border-radius:11px;overflow:hidden;background:#fff}
.competitor-option{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px 15px;border-top:1px solid #edf1f5;cursor:pointer}
.competitor-option:first-child{border-top:0}
.competitor-option:hover{background:#f8fbff}
.competitor-option input{width:18px;height:18px}
.competitor-main{min-width:0}
.competitor-main strong{display:block;color:#17334f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.competitor-main small{display:block;margin-top:3px;color:#748396;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.competitor-distance{color:#617389;font-size:13px;font-weight:750;white-space:nowrap}
.empty-list{padding:18px;color:#7b8999}

.choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.choice-card{display:flex;align-items:flex-start;gap:10px;min-width:0;padding:15px;border:1px solid #dce5ee;border-radius:11px;background:#fff;cursor:pointer}
.choice-card:has(input:checked){border-color:#1769e8;background:#f8fbff;box-shadow:0 0 0 3px rgba(23,105,232,.08)}
.choice-card input{margin-top:3px}
.choice-card b{display:block;margin-bottom:4px;color:#17334f}
.choice-card small{color:#6d7e90;line-height:1.35}
.grade-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}
.grade-option{display:flex;align-items:center;gap:9px;padding:13px 14px;border:1px solid #dce5ee;border-radius:9px;color:#243b55;font-weight:650;background:#fff}
.settings-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:18px}
.notification-footer{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding-top:8px}
.form-message{color:#65768a;font-size:14px;font-weight:650}

.otp-row{display:grid;grid-template-columns:minmax(190px,260px) auto;gap:12px;align-items:center;margin-top:18px}
.otp-row input{font-size:22px;letter-spacing:7px;text-align:center;font-weight:800}

@media(max-width:850px){
  .station-search-grid,.choice-grid,.settings-grid{grid-template-columns:1fr}
  .grade-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .notification-toolbar,.section-title-row{flex-direction:column;align-items:flex-start}
  .grade-grid{grid-template-columns:1fr}
  .competitor-option{grid-template-columns:auto minmax(0,1fr)}
  .competitor-distance{grid-column:2}
  .notification-footer .btn,.otp-row .btn{width:100%}
  .otp-row{grid-template-columns:1fr}
}
/* Force Code Sent button to look disabled */
#sendOtpButton:disabled,
#sendOtpButton.btn-primary:disabled {
  background: #a8b0bd !important;
  border-color: #a8b0bd !important;
  color: #ffffff !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

/* Embedded Price Alerts on the Comparison page */
.compare-alert-shell{max-width:none;margin-top:20px}
.compare-alert-summary{display:flex;align-items:center;gap:18px}
.compare-alert-icon{flex:0 0 58px;width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:#eef5ff;font-size:28px}
.compare-alert-intro{flex:1;min-width:0}
.compare-alert-intro h2{margin:0 0 5px;color:#0a2b4b}
.compare-alert-intro p{margin:0 0 7px;color:var(--muted,#66768d)}
.compare-alert-intro span{color:#1769e8;font-size:13px;font-weight:750}
.compare-alert-toggle{flex:0 0 auto;min-width:190px}
.compare-alert-toggle::after{content:"";display:inline-block;width:.62em;height:.62em;margin-left:9px;border-right:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(45deg) translateY(-.12em);transform-origin:center}
.compare-alert-toggle[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-.06em)}
.compare-alert-toggle:disabled{opacity:.55;cursor:not-allowed}
.compare-alert-content{border-top:1px solid #e7edf3;margin-top:20px;padding-top:4px}
.compare-alert-content[hidden]{display:none!important}
.minimum-change-wrap{margin-top:16px;width:calc((100% - 24px)/3)}
.minimum-change-wrap .notification-field{width:100%}
.compare-otp-panel{max-width:none;margin:22px 0 0;background:#f8fbff}
@media(max-width:850px){.minimum-change-wrap{width:100%}}
@media(max-width:600px){
  .compare-alert-summary{align-items:flex-start;flex-wrap:wrap}
  .compare-alert-icon{flex-basis:48px;width:48px;height:48px;font-size:23px}
  .compare-alert-intro{flex-basis:calc(100% - 66px)}
  .compare-alert-toggle{width:100%;min-width:0}
}