/* Modern application / viewing appointment UI */
.form-card{border-radius:20px;box-shadow:0 16px 45px rgba(15,23,42,.07);border-color:#e6eaf0}
.form-card>h1{font-size:32px;letter-spacing:-.025em;line-height:1.15;margin-bottom:8px}
.form-card>.lead{font-size:15px;line-height:1.65;max-width:760px}
.form-card form>.section-title{font-size:20px;letter-spacing:-.01em;margin:30px 0 16px;padding-top:4px}
.form-card form>.section-title+.slot-intro{margin-top:-8px}

.slot-intro{margin:0 0 16px;color:#667085;font-size:14px;line-height:1.65}
.appointment-calendar{display:grid;gap:16px;margin:16px 0}
.calendar-month{border:1px solid #e4e7ec;border-radius:16px;background:#fff;padding:16px;box-shadow:0 6px 20px rgba(15,23,42,.045)}
.calendar-month-title{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:17px;font-weight:800;letter-spacing:-.01em;color:#101828;margin-bottom:14px}
.calendar-month-title:after{content:"Freie Tage";font-size:11px;font-weight:700;letter-spacing:0;color:#667085;background:#f2f4f7;border-radius:999px;padding:5px 8px;white-space:nowrap}
.calendar-weekdays,.calendar-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.calendar-weekdays span{text-align:center;font-size:11px;font-weight:800;color:#98a2b3;padding:4px 0 6px}
.calendar-day-button{position:relative;min-height:52px;border:1px solid #edf0f4;border-radius:10px;background:#f8fafc;color:#98a2b3;font-size:14px;font-weight:750;cursor:default;transition:.16s ease}
.calendar-day-button.outside{opacity:.24}
.calendar-day-button.available{background:#f1f6ff;color:#175cd3;border-color:#cfe0ff;cursor:pointer}
.calendar-day-button.available:hover{background:#eaf2ff;border-color:#84adff}
.calendar-day-button.selected{background:#0b63e5;color:#fff;border-color:#0b63e5;box-shadow:0 5px 14px rgba(11,99,229,.2)}
.calendar-day-button small{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);min-width:20px;height:16px;padding:0 5px;border-radius:999px;display:grid;place-items:center;background:#d1fadf;color:#027a48;font-size:8px;font-weight:850;white-space:nowrap}
.calendar-day-button.selected small{background:rgba(255,255,255,.18);color:#fff}

.selected-day-slots{margin-top:12px}
.day-slot-panel{border:1px solid #dbe5f0;border-radius:16px;background:#fff;padding:16px;box-shadow:0 7px 22px rgba(15,23,42,.045)}
.day-slot-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid #eef1f5}
.day-slot-head strong{display:block;font-size:16px;line-height:1.35;color:#101828}
.day-slot-head span{display:block;margin-top:3px;font-size:11px;color:#667085}
.slot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.time-slot-card{display:grid;grid-template-columns:24px minmax(0,1fr);grid-template-rows:auto auto;column-gap:9px;align-items:center;border:1px solid #d8dee8;border-radius:12px;padding:12px;cursor:pointer;background:#fff;position:relative;transition:.16s ease;min-width:0}
.time-slot-card:before{content:"";grid-row:1/3;width:21px;height:21px;border:1.5px solid #c8d0dc;border-radius:50%;background:#fff;transition:.16s ease}
.time-slot-card:after{content:"✓";position:absolute;left:22px;top:50%;transform:translate(-50%,-50%) scale(.6);opacity:0;color:#fff;font-size:11px;font-weight:900;transition:.16s ease}
.time-slot-card input{position:absolute;opacity:0;pointer-events:none}
.time-slot-card:hover{border-color:#98bdf6;background:#fbfdff}
.time-slot-card:has(input:checked){border-color:#0b63e5;background:#f5f9ff;box-shadow:0 0 0 2px #eaf2ff}
.time-slot-card:has(input:checked):before{background:#0b63e5;border-color:#0b63e5}
.time-slot-card:has(input:checked):after{opacity:1;transform:translate(-50%,-50%) scale(1)}
.time-slot-time{font-size:14px;font-weight:800;color:#101828;white-space:nowrap}
.time-slot-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px;font-size:10px;color:#667085}
.time-slot-meta span{padding:3px 6px;border-radius:999px;background:#f2f4f7}

.address-lock-note{display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;row-gap:3px;padding:13px 14px;margin:16px 0 22px;border-radius:12px;background:#f8fafc;border:1px solid #e4e7ec;align-items:start}
.address-lock-note:before{content:"⌖";grid-column:1;grid-row:1/3;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:#eef4ff;color:#175cd3;font-weight:900;font-size:14px;line-height:1}
.address-lock-note>strong{grid-column:2;grid-row:1;display:block;font-size:13px;line-height:1.35;color:#101828;margin:0}
.address-lock-note>span{grid-column:2;grid-row:2;display:block;font-size:12px;line-height:1.55;color:#667085;min-width:0}

.question-box{border:1px solid #e4e7ec;border-radius:13px;background:#f8fafc;padding:16px 17px;font-size:13px;line-height:1.6;color:#475467}
.question-box strong{display:block;margin-bottom:3px;font-size:14px;color:#101828}
.control{min-height:46px;border-radius:10px;border-color:#cfd6df;padding-inline:13px;background:#fff}
textarea.control{min-height:112px;padding:12px 13px}
.control:hover{border-color:#aeb8c5}
.control:focus,textarea.control:focus{border-color:#5b9cf2;box-shadow:0 0 0 4px rgba(11,99,229,.09)}
.checkbox{padding:12px 13px;border-radius:11px;background:#fbfcfe;border:1px solid #eef1f5;margin:10px 0;font-size:14px;line-height:1.55}
.checkbox input{margin-top:3px}
.form-actions{margin-top:18px;padding-top:20px}
.form-actions .btn-primary{min-height:48px;padding-inline:24px;border-radius:10px;font-size:15px;font-weight:750;box-shadow:0 8px 18px rgba(11,99,229,.18)}

@media (max-width:760px){
  .form-card>h1{font-size:27px}
  .calendar-month{padding:13px;border-radius:14px}
  .calendar-weekdays,.calendar-days{gap:4px}
  .calendar-day-button{min-height:48px;font-size:13px}
  .slot-grid{grid-template-columns:1fr}
  .day-slot-panel{padding:14px;border-radius:14px}
  .time-slot-card{padding:12px 13px}
  .calendar-month-title:after{display:none}
}
