/* ===================================================================
   MyRentBook — Модальные окна (SCOPED, без белых панелей)
   - Только внутри #myrb-modal
   - Окно (.myrb-modal__dlg) прозрачное: НЕТ фона, НЕТ бордера, НЕТ тени
   - Видимая «карточка» — только .myrb-ntf (пилюля) c тенью как в референсе
   - Полное отключение фокусов внутри
   =================================================================== */

/* Токены */
#myrb-modal{
  --clr-warm:  #F2E1D6; /* предупреждение */
  --clr-cool:  #C8D8CF; /* инфо и ошибка */
  --txt-main:  #1f2937;
  --txt-dim:   #475569;
  --radius:    14px;
  --pad:       14px;
}

/* Базовая раскладка */
#myrb-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  -webkit-tap-highlight-color: transparent;
}
#myrb-modal.is-open{ display:flex; }

#myrb-modal .myrb-modal__back{
  position:absolute; inset:0;
  background: rgba(0,0,0,.35);
}

/* Окно-обёртка — ПРОЗРАЧНОЕ */
#myrb-modal .myrb-modal__dlg{
  position: relative;
  max-width: 560px;
  width: calc(100% - 32px);
  padding: 0;                 /* без внутренних отступов */
  margin: 0;
  border: 0 !important;       /* никаких рамок */
  outline: none !important;   /* никаких контуров */
  background: transparent !important; /* НЕТ белого фона */
  border-radius: 0;           /* скругления не нужны — нет панели */
  box-shadow: none !important;/* и тени у окна нет */
  overflow: visible;
}

/* Если это нативный <dialog> */
#myrb-modal dialog.myrb-modal__dlg{
  margin: 0;
  padding: 0;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ====== Нотификация («пилюля») — единственная видимая карточка ====== */
#myrb-modal .myrb-ntf{
  display:flex; align-items:flex-start; gap:10px;
  background: var(--clr-cool);
  border-radius: var(--radius);
  padding: var(--pad);
  color: var(--txt-main);
  box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 6px 18px rgba(0,0,0,.08);
  position: relative;
}
#myrb-modal .myrb-ntf + .myrb-ntf{ margin-top:12px; }

/* Варианты */
#myrb-modal .myrb-ntf--info  { background: var(--clr-cool); }
#myrb-modal .myrb-ntf--warn  { background: var(--clr-warm); }
#myrb-modal .myrb-ntf--error { background: var(--clr-cool); }

/* Иконка */
#myrb-modal .myrb-ntf__icon{
  flex:0 0 28px; height:28px; width:28px; border-radius:999px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.65);
  color:#334155;
}
#myrb-modal .myrb-ntf--warn  .myrb-ntf__icon{ color:#b45309; }
#myrb-modal .myrb-ntf--error .myrb-ntf__icon{ color:#b91c1c; }
#myrb-modal .myrb-ntf__icon svg{ display:block; }

/* Текст */
#myrb-modal .myrb-ntf__body{ flex:1 1 auto; min-width:0; }
#myrb-modal .myrb-ntf__title{
  margin:0 24px 2px 0; font-weight:800; font-size:15px;
  letter-spacing:.2px; text-transform:uppercase;
}
#myrb-modal .myrb-ntf__text{
  margin:0; font-size:14px; color: var(--txt-dim); line-height:1.45;
}

/* Крестик */
#myrb-modal .myrb-ntf__x{
  position:absolute; top:8px; right:8px;
  border:0; background:transparent; cursor:pointer;
  width:28px; height:28px; border-radius:10px; color:#475569; font-size:18px; line-height:1;
}
#myrb-modal .myrb-ntf__x:hover{ background: rgba(0,0,0,.06); color:#0f172a; }

/* Полное отключение фокусов внутри модалки */
#myrb-modal *{ -webkit-tap-highlight-color: transparent; }
#myrb-modal :where(
  button,[type="button"],[type="submit"],[type="reset"],
  a,input,select,textarea,[role="button"],.myrb-ntf__x
){
  outline: none !important;
  box-shadow: none !important;
}
#myrb-modal :where(
  button,[type="button"],[type="submit"],[type="reset"],
  a,input,select,textarea,[role="button"],.myrb-ntf__x
):where(:focus,:focus-visible,:active){
  outline: none !important;
  box-shadow: none !important;
}

/* На всякий — и само «окно» без подсветки */
#myrb-modal .myrb-modal__dlg:where(:focus,:focus-visible,:active){
  outline:none !important;
  box-shadow:none !important;
}

/* Адаптив */
@media (max-width:480px){
  #myrb-modal .myrb-ntf{
    padding:12px; border-radius:12px;
  }
  #myrb-modal .myrb-ntf__title{ font-size:14px; }
  #myrb-modal .myrb-ntf__text { font-size:14px; }
}