:root{
  --sf-iban-bg:#f7c9b8;
  --sf-iban-card:rgba(255,255,255,.28);
  --sf-iban-line:rgba(32,16,10,.13);
  --sf-iban-text:#070707;
}

html:has(body.page-template-page-iban){
  background:var(--sf-iban-bg);
}

body.page-template-page-iban{
  margin:0;
  background:var(--sf-iban-bg)!important;
  color:var(--sf-iban-text);
  font-family:var(--sf-font-sans)!important;
}

body.page-template-page-iban *{
  font-family:var(--sf-font-sans)!important;
}

body.page-template-page-iban header,
body.page-template-page-iban .site-header,
body.page-template-page-iban .sf-site-header,
body.page-template-page-iban footer,
body.page-template-page-iban .site-footer{
  display:none!important;
}

.sf-iban-page{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:28px;
  padding:24px;
  direction:rtl;
  position:relative;
  background:var(--sf-iban-bg);
}

.sf-iban-card{
  width:min(1040px, 100%);
  overflow:hidden;
  border-radius:28px;
  background:var(--sf-iban-card);
  border:1px solid rgba(255,255,255,.26);
  box-shadow:0 24px 70px rgba(63,24,10,.10);
}

.sf-iban-top{
  direction:ltr;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:22px 24px;
  border-bottom:4px solid var(--sf-iban-line);
}

.sf-iban-bank{
  flex:0 0 auto;
  width:150px;
  height:70px;
  border-radius:16px;
  background:#071b2a;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  overflow:hidden;
  font-weight:900;
  font-size:18px;
}

.sf-iban-bank img{
  max-width:130px;
  max-height:46px;
  width:auto;
  height:auto;
  display:block;
  object-fit:contain;
}

.sf-iban-name{
  min-width:0;
  direction:ltr;
  text-align:right;
  font-size:clamp(29px, 4vw, 47px);
  letter-spacing:.045em;
  font-weight:500;
  white-space:nowrap;
}

.sf-iban-number{
  appearance:none;
  border:0;
  cursor:pointer;
  width:100%;
  display:block;
  background:transparent;
  color:#000;
  direction:ltr;
  text-align:center;
  padding:28px 28px 31px;
  font:inherit;
  font-size:clamp(28px, 5vw, 54px);
  line-height:1.05;
  letter-spacing:.04em;
  font-weight:500;
  white-space:nowrap;
  overflow:auto hidden;
  user-select:all;
  scrollbar-width:none;
}
.sf-iban-number::-webkit-scrollbar{display:none}
.sf-iban-number.is-copied{background:rgba(255,255,255,.18)}

.sf-iban-copy-btn{
  appearance:none;
  border:0;
  cursor:pointer;
  min-width:min(310px, 80vw);
  min-height:56px;
  border-radius:999px;
  background:var(--sf-orange, #fd5a16);
  color:#000;
  font:inherit;
  font-size:22px;
  font-weight:900;
  line-height:1;
  padding:14px 28px;
  box-shadow:0 16px 40px rgba(253,90,22,.17);
  transition:transform .18s ease, filter .18s ease;
}
.sf-iban-copy-btn:hover{transform:translateY(-2px);filter:brightness(1.02)}
.sf-iban-copy-btn:active{transform:translateY(0) scale(.99)}

.sf-iban-msg{
  position:fixed;
  left:50%;
  bottom:28px;
  z-index:50;
  transform:translate(-50%, 12px);
  opacity:0;
  pointer-events:none;
  min-width:220px;
  text-align:center;
  padding:13px 18px;
  border-radius:999px;
  background:#070707;
  color:#fff;
  font-size:15px;
  font-weight:900;
  box-shadow:0 12px 40px rgba(0,0,0,.18);
  transition:.18s ease;
}
.sf-iban-msg.is-visible{opacity:1;transform:translate(-50%, 0)}
.sf-iban-msg-success,
.sf-iban-msg-fail{display:none}
.sf-iban-msg.is-success .sf-iban-msg-success{display:inline}
.sf-iban-msg.is-fail .sf-iban-msg-fail{display:inline}

@media(max-width:760px){
  .sf-iban-page{
    padding:18px;
    justify-content:center;
    gap:18px;
  }
  .sf-iban-card{
    width:100%;
    border-radius:22px;
    background:rgba(255,255,255,.82);
  }
  .sf-iban-top{
    padding:16px;
    gap:12px;
    border-bottom:2px solid var(--sf-iban-line);
  }
  .sf-iban-bank{
    width:106px;
    height:54px;
    border-radius:14px;
    padding:9px 12px;
  }
  .sf-iban-bank img{
    max-width:84px;
    max-height:34px;
  }
  .sf-iban-name{
    flex:1 1 auto;
    font-size:clamp(24px, 8.2vw, 38px);
    letter-spacing:.035em;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .sf-iban-number{
    padding:22px 12px 24px;
    font-size:clamp(19px, 5.15vw, 30px);
    letter-spacing:.025em;
    white-space:nowrap;
    overflow:auto hidden;
  }
  .sf-iban-copy-btn{
    width:min(320px, 86vw);
    min-width:0;
    min-height:52px;
    font-size:20px;
  }
  .sf-iban-msg{
    bottom:18px;
    font-size:14px;
  }
}

@media(max-width:390px){
  .sf-iban-page{padding:14px;gap:16px}
  .sf-iban-top{padding:13px;gap:10px}
  .sf-iban-bank{width:92px;height:50px}
  .sf-iban-name{font-size:22px}
  .sf-iban-number{font-size:18px;padding-inline:8px;letter-spacing:.01em}
}