/**
 * tlgtraining booking widget — baseline look & feel.
 *
 * All rules are scoped under .tlgtraining-widget so they never leak into the
 * host theme. They also override the Bootstrap-y class names the template
 * happens to use (.alert, .btn, .form-control, .form-group, .card, .row,
 * .col-*) inside that scope, so the widget renders consistently whether the
 * theme ships Bootstrap or not.
 */

/* On a page with a form[data-tlg-open-booking] trigger (e.g. a "Confirmar
   inscripción" block), the widget stays hidden until that form is submitted.
   See booking_form.js. Not applied inside the Elementor editor preview, whose
   <body> gets .elementor-editor-active, so the widget stays editable there. */
body:not(.elementor-editor-active):has(form[data-tlg-open-booking]) .tlgtraining-widget:not(.tlgtraining-widget--open) {
  display: none;
}

/* -------- Modal (automatic mode) -------- */

.tlgtraining-modal {
  width: min(760px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.tlgtraining-modal::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.tlgtraining-modal__body {
  position: relative;
  padding: 40px 24px 24px;
  background: #ffffff;
}

.tlgtraining-modal__close {
  position: absolute;
  top: 8px;
  right: 12px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: #6b7177;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.tlgtraining-modal__close:hover,
.tlgtraining-modal__close:focus {
  color: #2b2f33;
}

/* Elementor editor: show the modal content inline so the widget can be seen and edited. */
.elementor-editor-active .tlgtraining-modal {
  display: block;
  position: static;
  width: auto;
  max-height: none;
  margin: 0;
  box-shadow: none;
}

.elementor-editor-active .tlgtraining-modal__close {
  display: none;
}

/* Elementor editor: static placeholder rendered instead of the real form. */
.tlgtraining-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 24px 16px;
  border: 2px dashed #b9c0c7;
  border-radius: 8px;
  background: #f7f8fa;
  color: #2b2f33;
  text-align: center;
}

.tlgtraining-preview__title {
  color: #7d3b72;
  font-size: 18px;
}

.tlgtraining-preview__note {
  color: #6b7177;
}

.tlgtraining-widget {
  --tlg-text: #2b2f33;
  --tlg-muted: #6b7177;
  --tlg-border: #d8dde2;
  --tlg-border-strong: #b9c0c7;
  --tlg-bg: #ffffff;
  --tlg-bg-subtle: #f7f8fa;
  --tlg-primary: #2563eb;
  --tlg-primary-hover: #1d4ed8;
  --tlg-primary-text: #ffffff;
  --tlg-brand: #7d3b72; /* SkinClinic purple: title and booking button, matches the site's buttons */
  --tlg-danger: #b91c1c;
  --tlg-danger-bg: #fee2e2;
  --tlg-danger-border: #fca5a5;
  --tlg-success: #166534;
  --tlg-success-bg: #dcfce7;
  --tlg-success-border: #86efac;
  --tlg-warning-bg: #fef3c7;
  --tlg-warning-border: #fcd34d;
  --tlg-info-bg: #dbeafe;
  --tlg-info-border: #93c5fd;
  --tlg-radius: 6px;
  --tlg-radius-sm: 4px;
  --tlg-gap: 12px;
  --tlg-gap-lg: 20px;

  color: var(--tlg-text);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.45;
  max-width: 100%;
  box-sizing: border-box;
}

.tlgtraining-widget *,
.tlgtraining-widget *::before,
.tlgtraining-widget *::after {
  box-sizing: inherit;
}

/* -------- Header -------- */

.tlgtraining-widget .tlgtraining-header {
  margin: 0 0 var(--tlg-gap-lg);
  padding-bottom: var(--tlg-gap);
  border-bottom: 1px solid var(--tlg-border);
}
.tlgtraining-widget .tlgtraining-header h2,
.tlgtraining-widget .tlgtraining-header .h3 {
  margin: 0 0 8px;
  font-size: 1.4em;
  font-weight: 600;
  color: var(--tlg-brand);
}
.tlgtraining-widget .tlgtraining-header p {
  margin: 2px 0;
  font-size: 0.95em;
  color: var(--tlg-muted);
}
.tlgtraining-widget .tlgtraining-header strong {
  color: var(--tlg-text);
  font-weight: 600;
}
.tlgtraining-widget .tlgtraining-header .material-icons {
  font-size: 1.1em;
  vertical-align: -2px;
  margin-right: 4px;
}

/* -------- Alerts (feedback area + server-side flash) -------- */

.tlgtraining-widget .alert {
  padding: 10px 14px;
  margin: 0 0 var(--tlg-gap);
  border: 1px solid transparent;
  border-radius: var(--tlg-radius);
  background: var(--tlg-bg-subtle);
  color: var(--tlg-text);
}
.tlgtraining-widget .alert ul {
  margin: 0;
  padding-left: 18px;
}
.tlgtraining-widget .alert-success {
  background: var(--tlg-success-bg);
  border-color: var(--tlg-success-border);
  color: var(--tlg-success);
}
.tlgtraining-widget .alert-danger {
  background: var(--tlg-danger-bg);
  border-color: var(--tlg-danger-border);
  color: var(--tlg-danger);
}
.tlgtraining-widget .alert-warning {
  background: var(--tlg-warning-bg);
  border-color: var(--tlg-warning-border);
  color: #854d0e;
}
.tlgtraining-widget .alert-info {
  background: var(--tlg-info-bg);
  border-color: var(--tlg-info-border);
  color: #1e40af;
}

.tlgtraining-widget .tlgtraining-feedback:empty {
  display: none;
}

/* -------- Form layout -------- */

.tlgtraining-widget .tlgtraining-booking-form {
  display: block;
  margin: 0;
}

.tlgtraining-widget .form-group {
  margin-bottom: var(--tlg-gap);
}

.tlgtraining-widget label {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
  font-size: 0.95em;
  color: var(--tlg-text);
}

.tlgtraining-widget .form-text,
.tlgtraining-widget small {
  display: block;
  margin-top: 4px;
  font-size: 0.85em;
  color: var(--tlg-muted);
}

.tlgtraining-widget .form-control,
.tlgtraining-widget input[type="text"],
.tlgtraining-widget input[type="email"],
.tlgtraining-widget input[type="number"],
.tlgtraining-widget input[type="tel"],
.tlgtraining-widget select,
.tlgtraining-widget textarea {
  display: block;
  width: 100%;
  padding: 8px 10px;
  font-size: 0.95em;
  line-height: 1.4;
  color: var(--tlg-text);
  background: var(--tlg-bg);
  border: 1px solid var(--tlg-border);
  border-radius: var(--tlg-radius-sm);
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  font-family: inherit;
}

.tlgtraining-widget .form-control:focus,
.tlgtraining-widget input:focus,
.tlgtraining-widget select:focus,
.tlgtraining-widget textarea:focus {
  border-color: var(--tlg-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.tlgtraining-widget input[disabled],
.tlgtraining-widget select[disabled],
.tlgtraining-widget textarea[disabled] {
  background: var(--tlg-bg-subtle);
  color: var(--tlg-muted);
  cursor: not-allowed;
}

.tlgtraining-widget textarea {
  min-height: 70px;
  resize: vertical;
}

/* -------- Row / column override (handles .row .col-md-6, .col-12) -------- */

.tlgtraining-widget .row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tlg-gap);
  margin: 0;
}
.tlgtraining-widget .row > [class^="col-"],
.tlgtraining-widget .row > [class*=" col-"] {
  flex: 1 1 calc(50% - var(--tlg-gap));
  min-width: 220px;
  padding: 0;
  max-width: 100%;
}
.tlgtraining-widget .row > .col-12 {
  flex: 1 1 100%;
  min-width: 100%;
}

/* -------- Attendee fieldsets (card-styled) -------- */

.tlgtraining-widget .tlgtraining-attendees {
  margin-top: var(--tlg-gap);
}

.tlgtraining-widget .tlgtraining-attendee {
  border: 1px solid var(--tlg-border);
  border-radius: var(--tlg-radius);
  background: var(--tlg-bg);
  margin: 0 0 var(--tlg-gap);
  padding: 0;
}
.tlgtraining-widget .tlgtraining-attendee .card-body {
  padding: var(--tlg-gap);
}
.tlgtraining-widget .tlgtraining-attendee legend,
.tlgtraining-widget .tlgtraining-attendee .h5 {
  width: auto;
  margin: 0 0 var(--tlg-gap);
  padding: 0;
  border: 0;
  font-size: 1.05em;
  font-weight: 600;
  color: var(--tlg-text);
}

/* Selects inherit the same look as inputs (override browser arrow lightly) */
.tlgtraining-widget select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--tlg-muted) 50%),
    linear-gradient(135deg, var(--tlg-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 11px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}

/* -------- Buttons -------- */

.tlgtraining-widget .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  font-size: 0.95em;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--tlg-radius-sm);
  background: var(--tlg-bg);
  color: var(--tlg-text);
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  font-family: inherit;
}
.tlgtraining-widget .btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}
.tlgtraining-widget .btn:disabled,
.tlgtraining-widget .btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.tlgtraining-widget .btn-primary {
  background: #ffffff;
  border-color: var(--tlg-brand);
  color: var(--tlg-brand);
}
.tlgtraining-widget .btn-primary:hover:not(:disabled) {
  background: var(--tlg-brand);
  border-color: var(--tlg-brand);
  color: #ffffff;
}

.tlgtraining-widget .btn-outline-danger,
.tlgtraining-widget .tlgtraining-cancel-btn {
  background: transparent;
  border-color: var(--tlg-danger);
  color: var(--tlg-danger);
}
.tlgtraining-widget .btn-outline-danger:hover:not(:disabled),
.tlgtraining-widget .tlgtraining-cancel-btn:hover:not(:disabled) {
  background: var(--tlg-danger);
  color: #ffffff;
}

/* Button row inside .form-group.d-flex */
.tlgtraining-widget .d-flex {
  display: flex;
  gap: var(--tlg-gap);
  flex-wrap: wrap;
  align-items: center;
}
.tlgtraining-widget .ml-2 {
  margin-left: 0; /* gap on flex container handles spacing */
}

/* -------- Responsive -------- */

@media (max-width: 540px) {
  .tlgtraining-widget {
    font-size: 14px;
  }
  .tlgtraining-widget .row > [class^="col-"],
  .tlgtraining-widget .row > [class*=" col-"] {
    flex: 1 1 100%;
    min-width: 100%;
  }
}