*{box-sizing:border-box;margin:0;padding:0}

:root{
  --bp-border:#ccc;
  --bp-text:#111;
  --bp-muted:#666;
  --bp-bg:#fff;

  --bp-focus:#1D9E75;
  --bp-focus-ring:rgba(29,158,117,0.18);

  --bp-error:#b42318;
  --bp-error-ring:rgba(180,35,24,0.16);
  --bp-error-bg:#fff5f4;

  --bp-valid:#027a48;
  --bp-valid-ring:rgba(2,122,72,0.16);
  --bp-valid-bg:#f6fef9;

  --bp-disabled-bg:#f5f5f5;
  --bp-disabled-text:#999;
}

/* wrapper unchanged */
.bp-wrap{
  width:100%;
  font-family:var(--font-sans, sans-serif);
  padding:1rem 0;
  outline:0;
  background: #1b1b1b;
  margin-top: 5px;
}

/* ===== FORM LAYOUT ===== */
.bp-form{
  display:grid;
  gap:12px;
  justify-content:center;
  margin:0 auto;
  padding:0 10px;
}

/* 3-field version */
.bp-form--3{
  grid-template-columns:repeat(3, 300px);
}

/* 4-field version */
.bp-form--4{
  grid-template-columns:repeat(4, 300px);
}

/* 4 → 2 columns */
@media (max-width:1260px){
  .bp-form--4{
    grid-template-columns:repeat(2, 300px);
  }
}

/* 3 → 1 column */
@media (max-width:948px){
  .bp-form--3{
    grid-template-columns:300px;
  }
}

/* 4 → 1 column */
@media (max-width:636px){
  .bp-form--4{
    grid-template-columns:300px;
  }

  .bp-form{
    gap:16px;
  }
}

/* ===== FIELDS ===== */
.bp-field{
  position:relative;
  width:min(300px, 100%);
}

.bp-field:focus-within{
  z-index:2;
}

.bp-field input,
.bp-field select{
  width:100%;
  height:36px;
  padding:0 10px;
  font-size:14px;
  font-family:inherit;
  border:1px solid var(--bp-border);
  border-radius:6px;
  background:var(--bp-bg);
  color:var(--bp-text);
  cursor:pointer;
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease;
}

.bp-field input:focus,
.bp-field select:focus{
  border-color:var(--bp-focus);
  box-shadow:0 0 0 3px var(--bp-focus-ring);
}

.bp-field 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 d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  padding-right:28px;
}

.bp-field input[readonly]{
  background:#fafafa;
  cursor:pointer;
}

/* invalid state */
.bp-field.is-invalid input,
.bp-field.is-invalid select{
  border-color:var(--bp-error);
  background:var(--bp-error-bg);
}

.bp-field.is-invalid input:focus,
.bp-field.is-invalid select:focus{
  border-color:var(--bp-error);
  box-shadow:0 0 0 3px var(--bp-error-ring);
}

/* valid state */
.bp-field.is-valid input,
.bp-field.is-valid select{
  border-color:var(--bp-valid);
  background:var(--bp-valid-bg);
}

.bp-field.is-valid input:focus,
.bp-field.is-valid select:focus{
  border-color:var(--bp-valid);
  box-shadow:0 0 0 3px var(--bp-valid-ring);
}

/* ===== FORM-LEVEL MESSAGE ===== */
.bp-form-message{
  grid-column:1 / -1;
  display:none;
  min-height:20px;
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:6px;
  font-size:13px;
  line-height:1.4;
  text-align:center;
}

.bp-form-message.is-visible{
  display:block;
}

.bp-form-message.is-error{
  color:var(--bp-error);
  background:var(--bp-error-bg);
  border-color:var(--bp-error);
}

.bp-form-message.is-success{
  color:var(--bp-valid);
  background:var(--bp-valid-bg);
  border-color:var(--bp-valid);
}

.bp-form-message.is-info{
  color:var(--bp-text);
  background:#f8f8f8;
  border-color:var(--bp-border);
}

/* ===== BUTTON ===== */
.bp-submit-wrap{
  grid-column:1 / -1;
  display:flex;
  justify-content:center;
}

.bp-submit{
  width:300px;
  max-width:100%;
  height:40px;
  border:1px solid var(--bp-border);
  border-radius:6px;
  background:#a31e22;
  color:#dad8da;
  font-size:14px;
  font-family:inherit;
  cursor:pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease;
}

.bp-submit:hover{background:#dad8da; color:#a31e22;}
.bp-submit:active{transform:scale(0.98)}

/* ===== DISABLED STATES ===== */
.bp-field input:disabled,
.bp-field select:disabled,
.bp-submit:disabled,
.bp-modal-close:disabled{
  background:var(--bp-disabled-bg);
  color:var(--bp-disabled-text);
  border-color:#ddd;
  cursor:not-allowed;
  box-shadow:none;
}

/* ===== SHARED FOCUSABLE CONTROLS ===== */
.bp-modal-close,
.cal-nav button,
.cal-day{
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease;
}

.bp-submit:focus,
.bp-modal-close:focus,
.cal-nav button:focus,
.cal-day:focus{
  outline:none;
  box-shadow:0 0 0 3px var(--bp-focus-ring);
  border-color:var(--bp-focus);
}

/* ===== CALENDAR ===== */
.cal-overlay{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  right:0;
  z-index:100;
  background:#fff;
  border:0.5px solid #ccc;
  border-radius:10px;
  padding:12px;
  display:none;
  min-width:280px;
}

.cal-overlay.open{display:block}

.cal-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

.cal-nav button{
  background:none;
  border:none;
  cursor:pointer;
  font-size:16px;
  color:#666;
  padding:4px 8px;
  border-radius:6px;
}

.cal-nav button:hover{background:#f5f5f5}

.cal-title{
  font-size:14px;
  font-weight:500;
  color:#111;
}

.cal-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:2px;
}

.cal-dow{
  font-size:11px;
  color:#aaa;
  text-align:center;
  padding:4px 0;
}

.cal-day{
  font-size:13px;
  text-align:center;
  padding:6px 2px;
  border-radius:6px;
  cursor:pointer;
  color:#111;
  border:none;
  background:none;
  font-family:inherit;
}

.cal-day:hover:not(.past):not(.empty){background:#f5f5f5}
.cal-day.selected{background:#1D9E75;color:#fff}
.cal-day.past{color:#ccc;cursor:not-allowed}
.cal-day.empty{cursor:default}
.cal-day.today{font-weight:500;border:0.5px solid #ccc}

/* ===== MODAL ===== */
.bp-modal-bg{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.45);
  z-index:999;
  align-items:center;
  justify-content:center;
}

.bp-modal-bg.open{display:flex}

.bp-modal-box{
  background:#fff;
  border-radius:10px;
  border:0.5px solid #ccc;
  padding:1.5rem;
  max-width:340px;
  width:90%;
  text-align:center;
}

.bp-modal-box h2{
  font-size:16px;
  font-weight:500;
  color:#111;
  margin-bottom:8px;
}

.bp-modal-box p{
  font-size:14px;
  color:#555;
  line-height:1.6;
  margin-bottom:1.25rem;
}

.bp-modal-close{
  height:36px;
  padding:0 20px;
  border:1px solid var(--bp-border);
  border-radius:6px;
  background:#fff;
  color:var(--bp-text);
  font-size:14px;
  font-family:inherit;
  cursor:pointer;
}

.bp-modal-close:hover{background:#f5f5f5}