/* grani.css — лёгкая замена Bootstrap.
   Реализует только те классы, что реально используются в шаблонах,
   вместо bootstrap.min.css (220 КБ) + bootstrap.js + popper.
   Значения повторяют Bootstrap 5.3, чтобы вёрстка не менялась. */

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;font-weight:400;line-height:1.5;color:#212529;
  text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;
  -webkit-user-select:none;user-select:none;background-color:transparent;
  border:1px solid transparent;padding:.375rem .75rem;font-size:1rem;border-radius:.375rem;
  transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn:hover{color:#212529}
.btn:focus{outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}
.btn-primary{color:#fff;background-color:#0d6efd;border-color:#0d6efd}
.btn-primary:hover{color:#fff;background-color:#0b5ed7;border-color:#0a58ca}
.btn-secondary{color:#fff;background-color:#6c757d;border-color:#6c757d}
.btn-secondary:hover{color:#fff;background-color:#5c636a;border-color:#565e64}
.btn-close{
  box-sizing:content-box;width:1em;height:1em;padding:.25em;color:#000;border:0;
  border-radius:.375rem;opacity:.5;cursor:pointer;
  background:transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}
.btn-close:hover{opacity:.75}

/* ---------- Forms ---------- */
.form-control{
  display:block;width:100%;padding:.375rem .75rem;font-size:1rem;font-weight:400;
  line-height:1.5;color:#212529;background-color:#fff;background-clip:padding-box;
  border:1px solid #ced4da;border-radius:.375rem;appearance:none;
  transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.form-control:focus{
  color:#212529;background-color:#fff;border-color:#86b7fe;outline:0;
  box-shadow:0 0 0 .25rem rgba(13,110,253,.25);
}
.input-group{display:flex;flex-wrap:wrap;align-items:stretch;width:100%}
.input-group>.form-control{position:relative;flex:1 1 auto;width:1%;min-width:0}

/* ---------- Tables ---------- */
.table{width:100%;margin-bottom:1rem;color:#212529;border-collapse:collapse;vertical-align:top}
.table>:not(caption)>*>*{padding:.5rem .5rem;border-bottom:1px solid #dee2e6}
.table-warning{background-color:#fff3cd}
.table-warning td,.table-warning th{background-color:#fff3cd}
.table-hover tr:hover{background-color:rgba(0,0,0,.04)}

/* ---------- Layout / utilities ---------- */
.container{width:100%;padding-right:.75rem;padding-left:.75rem;margin-right:auto;margin-left:auto;max-width:1140px}
.row{display:flex;flex-wrap:wrap;margin-right:-.75rem;margin-left:-.75rem}
.col{flex:1 0 0%;padding-right:.75rem;padding-left:.75rem}
.mb-3{margin-bottom:1rem!important}
.fs-5{font-size:1.25rem!important}

/* ---------- Badge ---------- */
.badge{
  display:inline-block;padding:.35em .65em;font-size:.75em;font-weight:700;line-height:1;
  color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;
  background-color:#6c757d;border-radius:.375rem;
}

/* ---------- Card ---------- */
.card{
  position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;
  background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:.375rem;
}

/* ---------- Modal (Bootstrap-совместимая разметка) ----------
   Голый .modal здесь стилизуется по-умолчанию скрытым; страницы с
   собственными модалками (index/coffee_rave/grani_family3) переопределяют
   .modal своим inline-CSS ниже по каскаду — конфликта нет. */
.modal{
  position:fixed;top:0;left:0;z-index:1055;display:none;width:100%;height:100%;
  overflow-x:hidden;overflow-y:auto;outline:0;
}
.modal.show{display:block}
.modal-dialog{position:relative;width:auto;margin:1.75rem auto;max-width:500px;pointer-events:none}
.modal-content{
  position:relative;display:flex;flex-direction:column;width:100%;pointer-events:auto;
  background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);
  border-radius:.5rem;outline:0;box-shadow:0 .5rem 1rem rgba(0,0,0,.15);
}
.modal-header{
  display:flex;flex-shrink:0;align-items:center;justify-content:space-between;
  padding:1rem;border-bottom:1px solid #dee2e6;
  border-top-left-radius:.5rem;border-top-right-radius:.5rem;
}
.modal-title{margin:0;line-height:1.5}
.modal-body{position:relative;flex:1 1 auto;padding:1rem}
.modal-footer{
  display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:flex-end;
  padding:.75rem;border-top:1px solid #dee2e6;gap:.5rem;
}
.modal-backdrop{position:fixed;top:0;left:0;z-index:1050;width:100vw;height:100vh;background-color:#000;opacity:.5}
body.modal-open{overflow:hidden}