/* Sahanaz Pay v0.5.3 | Merchant UI consistency hotfix.
   Apply last; do not alter form submission, service-side filters or payment logic. */
.merchant-layout.merchant-video-reference .feature-page-panel .ref-filter,
.merchant-layout.merchant-video-reference .feature-page-panel .feature-filter{
  display:flex!important;flex-wrap:wrap!important;align-items:center!important;
  column-gap:12px!important;row-gap:10px!important;
  margin:0!important;padding:16px!important;min-width:0!important;
}
.merchant-layout.merchant-video-reference .ref-filter>label,
.merchant-layout.merchant-video-reference .feature-filter>label{
  display:flex!important;flex:1 1 156px!important;min-width:136px!important;
  width:auto!important;max-width:none!important;align-items:stretch!important;
  margin:0!important;padding:0!important;
}
.merchant-layout.merchant-video-reference .ref-filter>label:first-child{flex:1.15 1 166px!important}
.merchant-layout.merchant-video-reference .ref-filter :is(input[type="search"],input[type="date"],select),
.merchant-layout .pay-channel-page .pay-channel-filters :is(input[type="search"],select),
.merchant-layout.merchant-video-reference .ref-select-wrap>select.ref-select-native{
  appearance:none!important;-webkit-appearance:none!important;
  box-sizing:border-box!important;width:100%!important;min-width:0!important;
  height:36px!important;min-height:36px!important;max-height:36px!important;
  padding:0 12px!important;border:1px solid #dce3ed!important;
  border-radius:5px!important;background-color:#fff!important;
  color:#516079!important;line-height:34px!important;font-size:12px!important;
  box-shadow:none!important;letter-spacing:0!important;
}
.merchant-layout.merchant-video-reference .ref-filter select,
.merchant-layout .pay-channel-page .pay-channel-filters select{
  background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"%3E%3Cpath fill="none" stroke="%238592a6" stroke-width="1.4" d="m1 1 5 5 5-5"/%3E%3C/svg%3E')!important;
  background-size:12px 8px!important;background-repeat:no-repeat!important;
  background-position:right 12px center!important;padding-right:32px!important;
}
/* Native dates keep the browser calendar icon; select arrow is styled consistently. */
.merchant-layout.merchant-video-reference .ref-filter input[type="date"]{
  appearance:auto!important;-webkit-appearance:auto!important;line-height:normal!important;
}
.merchant-layout.merchant-video-reference .ref-filter input:focus-visible,
.merchant-layout.merchant-video-reference .ref-filter select:focus-visible,
.merchant-layout .pay-channel-page .pay-channel-filters :is(input,select):focus-visible{
  border-color:#6b86e9!important;outline:2px solid rgba(87,115,222,.17)!important;outline-offset:1px!important;
}
.merchant-layout.merchant-video-reference .ref-filter>.ref-date-range{
  display:flex!important;flex:2 1 304px!important;align-items:center!important;gap:8px!important;
  min-width:248px!important;max-width:none!important;margin:0!important;
}
.merchant-layout.merchant-video-reference .ref-filter>.ref-date-range label{
  flex:1 1 0!important;width:auto!important;min-width:0!important;max-width:none!important;margin:0!important;
}
.merchant-layout.merchant-video-reference .ref-filter>.ref-date-range>span{flex:none!important;line-height:36px!important}
.merchant-layout.merchant-video-reference .ref-filter>button[type="submit"],
.merchant-layout .pay-channel-page .pay-channel-actions .pay-channel-primary{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  flex:0 0 auto!important;min-width:88px!important;height:36px!important;min-height:36px!important;
  padding:0 15px!important;margin:0!important;border:1px solid #607be8!important;
  background:#617aea!important;color:#fff!important;border-radius:5px!important;
  font-size:12px!important;font-weight:600!important;box-shadow:none!important;white-space:nowrap!important;
}
/* The old custom dropdown falls below cards or overlaps the next toolbar. Use the
   native accessible select; no separate JS dropdown or invisible focus target. */
.merchant-layout .ref-filter .ref-select-wrap,
.merchant-layout .pay-channel-page .pay-channel-filters .ref-select-wrap{
  position:relative!important;display:block!important;width:100%!important;flex:1 1 auto!important;min-width:0!important;
}
.merchant-layout .ref-filter .ref-select-wrap>select.ref-select-native,
.merchant-layout .pay-channel-page .pay-channel-filters .ref-select-wrap>select.ref-select-native{
  display:block!important;position:relative!important;opacity:1!important;pointer-events:auto!important;
  width:100%!important;height:36px!important;min-height:36px!important;
}
.merchant-layout .ref-filter :is(.ref-select-trigger,.ref-select-pop),
.merchant-layout .pay-channel-page .pay-channel-filters :is(.ref-select-trigger,.ref-select-pop){display:none!important}
/* Channel search bar: one baseline for all fields and actions, with safe wrapping. */
.merchant-layout .pay-channel-page .pay-channel-filters{display:flex!important;align-items:center!important;gap:10px!important;padding:14px!important;flex-wrap:wrap!important}
.merchant-layout .pay-channel-page .pay-channel-filter-fields{display:flex!important;flex:1 1 460px!important;align-items:center!important;gap:10px!important;min-width:0!important;flex-wrap:wrap!important}
.merchant-layout .pay-channel-page .pay-channel-filter-fields>label{display:block!important;flex:1 1 144px!important;min-width:132px!important;max-width:none!important;width:auto!important;margin:0!important}
.merchant-layout .pay-channel-page .pay-channel-actions{display:flex!important;align-items:center!important;gap:8px!important;margin:0!important;flex-wrap:wrap!important}
.merchant-layout .pay-channel-page .pay-channel-actions .pay-channel-btn{min-height:36px!important;height:36px!important;border-radius:5px!important;padding:0 12px!important;box-shadow:none!important;white-space:nowrap!important}
/* The reference's controls live inside fixed-height white surfaces, not floating unevenly. */
.merchant-layout .pay-channel-page .pay-channel-toolbar,.merchant-layout.merchant-video-reference .feature-page-panel{overflow:visible!important}
.merchant-layout .pay-channel-page .pay-channel-toolbar-heading{box-sizing:border-box!important}
/* V1-only API: the secret is never present in the initial GET response. */
.merchant-video-reference .ref-api-head.ref-api-head-single{grid-template-columns:minmax(0,1fr)!important;max-width:760px!important}
.merchant-video-reference .ref-api-head.ref-api-head-single>div{padding:18px!important}
.merchant-video-reference .ref-api-head .ref-api-row{min-height:40px!important;gap:10px!important}
.merchant-video-reference .ref-api-secret-row{flex-wrap:wrap!important}
.merchant-video-reference .ref-api-secret-row .ref-secret-value{flex:1 1 220px!important;width:auto!important;min-width:0!important;max-width:100%!important;height:35px!important;padding:7px 9px!important;border:1px solid #d6dfea!important;border-radius:4px!important;background:#fff!important;font:12px ui-monospace,SFMono-Regular,Consolas,monospace!important}
.merchant-video-reference .ref-secret-form{border-top:1px solid #ecedf1!important;margin-top:15px!important;padding-top:15px!important;display:grid!important;gap:8px!important}
.merchant-video-reference .ref-secret-form>label{font-size:12px!important;color:#536177!important;font-weight:600!important}
.merchant-video-reference .ref-secret-fields{display:flex!important;gap:8px!important;flex-wrap:wrap!important}
.merchant-video-reference .ref-secret-fields input{flex:1 1 220px!important;min-width:0!important;height:36px!important;border-radius:5px!important;padding:0 11px!important;border:1px solid #dce3ed!important;background:white!important;color:#35465e!important;font-size:12px!important}
.merchant-video-reference .ref-secret-fields button{min-height:36px!important;height:36px!important;border:0!important;border-radius:5px!important;background:#617aea!important;color:white!important;padding:0 13px!important;cursor:pointer!important;font-size:12px!important}
.merchant-video-reference .ref-secret-form small,.merchant-video-reference .ref-secret-warning{font-size:11px!important;color:#8996a8!important;line-height:1.55!important;margin:0!important}
.merchant-video-reference .ref-api-error{padding:9px 11px!important;background:#fff1f1!important;border:1px solid #f2c5c5!important;color:#b12c32!important;border-radius:5px!important;font-size:12px!important}
@media(max-width:960px){
 .merchant-layout.merchant-video-reference .ref-filter>label{flex:1 1 180px!important}
 .merchant-layout.merchant-video-reference .ref-filter>.ref-date-range{flex:1 1 100%!important}
 .merchant-layout .pay-channel-page .pay-channel-filter-fields{flex:1 1 100%!important}
}
@media(max-width:560px){
 .merchant-layout.merchant-video-reference .ref-filter>label{flex:1 1 100%!important;min-width:0!important}
 .merchant-layout.merchant-video-reference .ref-filter>.ref-date-range{min-width:0!important;flex:1 1 100%!important}
 .merchant-layout.merchant-video-reference .ref-filter>button[type="submit"]{flex:1 1 100%!important}
 .merchant-layout .pay-channel-page .pay-channel-filter-fields>label{flex:1 1 100%!important;min-width:0!important}
 .merchant-layout .pay-channel-page .pay-channel-actions{width:100%!important}
 .merchant-layout .pay-channel-page .pay-channel-actions .pay-channel-btn{flex:1 1 auto!important}
 .merchant-video-reference .ref-secret-fields button{flex:1 1 100%!important}
}
/* v0.5.5 document entry on merchant API workspace */
.merchant-layout .ref-api-doc-link{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:15px;padding:14px 16px;margin:0 0 15px;background:#f6f8ff;border:1px solid #e2e9fa;border-radius:5px}
.merchant-layout .ref-api-doc-link strong{display:block;color:#334d89;font-size:12px}
.merchant-layout .ref-api-doc-link p{margin:3px 0 0;color:#8796af;font-size:11px}
.merchant-layout .ref-api-doc-link a{display:inline-flex;padding:7px 10px;border-radius:4px;background:#597ce8;color:#fff;font-size:11px;white-space:nowrap;text-decoration:none}