/* ==========================================================================
   AVP Online — Manage Classrooms
   Drop-in stylesheet for the WooCommerce my-account "Manage Classrooms"
   endpoint. All selectors are prefixed .avp-cls- to avoid theme collisions.

   Brand values sampled from the live UI:
     teal   #0CBAB1   primary actions
     blue   #336699   secondary / informational
     red    #A20C15   destructive
     orange #C75C00   archive / caution
     gray   #666666   headings

   font-family is intentionally NOT set on the component root so it
   inherits the theme typeface (Poppins in the current theme).
   ========================================================================== */

:root {
  --avp-teal: #0cbab1;
  --avp-teal-dark: #09a29a;
  --avp-teal-tint: #e7f8f6;
  --avp-teal-ink: #07736d;
  --avp-blue: #336699;
  --avp-blue-dark: #2a5680;
  --avp-blue-tint: #eaf1f7;
  --avp-red: #a20c15;
  --avp-red-dark: #8a0a12;
  --avp-red-tint: #f9eaeb;
  --avp-orange: #c75c00;
  --avp-orange-dark: #a84e00;
  --avp-orange-tint: #fbf1e6;
  --avp-ink: #555555;
  --avp-heading: #666666;
  --avp-muted: #888888;
  --avp-border: #e3e3e3;
  --avp-surface: #ffffff;
  --avp-surface-alt: #fafafa;
  --avp-radius: 10px;
  --avp-radius-sm: 6px;
}

.avp-cls {
  color: var(--avp-ink);
  font-size: 15px;
  line-height: 1.6;
}

.avp-cls *,
.avp-cls *::before,
.avp-cls *::after {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Page header
   -------------------------------------------------------------------------- */

.avp-cls__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.avp-cls__title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: var(--avp-heading);
  line-height: 1.2;
}

.avp-cls__subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--avp-muted);
}

/* --------------------------------------------------------------------------
   Create classroom panel
   -------------------------------------------------------------------------- */

.avp-cls__create {
  background: var(--avp-surface);
  border: 1px solid var(--avp-border);
  border-radius: var(--avp-radius);
  margin-bottom: 24px;
}

.avp-cls__create-inner { padding: 22px; }

.avp-cls__create-title {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
  color: var(--avp-heading);
}

.avp-cls__create-sub {
  margin: 0 0 22px;
  font-size: 14px;
  color: var(--avp-muted);
}

/* Form fields --------------------------------------------------------------- */

.avp-field { margin-bottom: 22px; }

.avp-field__label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--avp-heading);
  margin-bottom: 6px;
}

.avp-field__label small {
  font-weight: 400;
  color: var(--avp-muted);
}

.avp-field__hint {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--avp-muted);
}

.avp-input {
  width: 100%;
  max-width: 420px;
  padding: 10px 14px;
  border: 1px solid var(--avp-border);
  border-radius: var(--avp-radius-sm);
  font: inherit;
  font-size: 15px;
  color: var(--avp-ink);
  background: var(--avp-surface);
}

.avp-input:focus {
  outline: none;
  border-color: var(--avp-teal);
  box-shadow: 0 0 0 3px rgba(12, 186, 177, 0.25);
}

/* Icon upload --------------------------------------------------------------- */

.avp-icon-upload { display: flex; align-items: center; gap: 14px; }

/* Cropped-image preview thumbnail (shown only after a crop). */
.avp-icon-upload__thumb {
  width: 56px !important;
  height: 56px !important;
  max-width: none !important;
  border-radius: 12px !important;
  border: 1px solid var(--avp-border) !important;
  object-fit: cover !important;
  flex: 0 0 auto !important;
  display: none;
}

/* Visually hide the native file input (with its theme "Browse" button) and
   trigger it through the "Choose image" label instead. !important beats the
   theme's own input[type=file] styling. */
.avp-icon-upload input[type="file"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.avp-icon-upload input[type="file"]:focus-visible + label {
  outline: 3px solid var(--avp-blue);
  outline-offset: 2px;
}

/* Province (book picker) accordion ------------------------------------------ */

.avp-province {
  border: 1px solid var(--avp-border);
  border-radius: var(--avp-radius-sm);
  margin-bottom: 10px;
  overflow: hidden;
}

/* button selector + !important reclaims our look from the theme's button
   styling (uppercase, text-shadow, gradient background, borders, etc.). */
button.avp-province__toggle {
  width: 100% !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px !important;
  background: var(--avp-surface-alt) !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  font: inherit !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.25 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  color: var(--avp-heading) !important;
  cursor: pointer;
}

button.avp-province__toggle:hover { background: #f3f3f3 !important; }

.avp-province__toggle:focus-visible {
  outline: 3px solid var(--avp-blue);
  outline-offset: -3px;
}

.avp-province__count {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--avp-muted);
  margin-left: auto;
}

.avp-province__chevron {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--avp-blue);
  transition: transform 0.2s ease;
}

.avp-province__toggle[aria-expanded="true"] .avp-province__chevron {
  transform: rotate(180deg);
}

.avp-province__body { padding: 16px; }
.avp-province__body[hidden] { display: none; }

/* Book cards ---------------------------------------------------------------- */

.avp-books {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 12px !important;
}

.avp-book { position: relative !important; }

/* Hide the native radio; the label is the clickable card. Selection still
   works via the label's "for", and the radio stays keyboard-focusable.
   Extra specificity (.avp-books .avp-book) + the redundant opacity/appearance/
   clip-path declarations beat the theme's own radio styling. */
.avp-books .avp-book input[type="radio"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  pointer-events: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.avp-book label {
  display: block !important;
  border: 2px solid var(--avp-border) !important;
  border-radius: var(--avp-radius) !important;
  padding: 10px 10px 12px !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: var(--avp-ink) !important;
  text-transform: none !important;
  text-shadow: none !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.avp-book label:hover { border-color: var(--avp-teal) !important; }

.avp-book input:checked + label {
  border-color: var(--avp-teal) !important;
  background: var(--avp-teal-tint) !important;
  color: var(--avp-teal-ink) !important;
}

.avp-book input:focus-visible + label {
  outline: 3px solid var(--avp-blue) !important;
  outline-offset: 2px !important;
}

.avp-book__cover {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  aspect-ratio: 3 / 4 !important;
  width: 100% !important;
  border-radius: var(--avp-radius-sm) !important;
  background: #2c2c2c !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 0 !important;
  margin-bottom: 10px !important;
  object-fit: cover !important;
}

.avp-book__selected {
  display: none !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--avp-teal-ink) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-top: 6px !important;
}

.avp-book input:checked + label .avp-book__selected { display: block !important; }

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

.avp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 2px solid transparent;
  border-radius: var(--avp-radius-sm);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease;
}

.avp-btn:focus-visible {
  outline: 3px solid var(--avp-blue);
  outline-offset: 2px;
}

.avp-btn--primary {
  background: var(--avp-teal);
  color: #ffffff;
}

.avp-btn--primary:hover {
  background: var(--avp-teal-dark);
}

.avp-btn--secondary {
  background: var(--avp-surface);
  border-color: var(--avp-blue);
  color: var(--avp-blue);
}

.avp-btn--secondary:hover {
  background: var(--avp-blue-tint);
  color: var(--avp-blue-dark);
}

/* Same outline treatment as --secondary, but in the teal/green brand colour. */
.avp-btn--primary-outline {
  background: var(--avp-surface);
  border-color: var(--avp-teal);
  color: var(--avp-teal-ink);
}

.avp-btn--primary-outline:hover {
  background: var(--avp-teal-tint);
  color: var(--avp-teal-ink);
}

.avp-btn--archive {
  background: var(--avp-surface);
  border-color: var(--avp-orange);
  color: var(--avp-orange);
}

.avp-btn--archive:hover {
  background: var(--avp-orange-tint);
  color: var(--avp-orange-dark);
}

.avp-btn--danger {
  background: var(--avp-surface);
  border-color: var(--avp-red);
  color: var(--avp-red);
}

.avp-btn--danger:hover {
  background: var(--avp-red-tint);
  color: var(--avp-red-dark);
}

.avp-btn--danger-solid {
  background: var(--avp-red);
  color: #ffffff;
}

.avp-btn--danger-solid:hover {
  background: var(--avp-red-dark);
}

.avp-btn--sm {
  padding: 7px 14px;
  font-size: 14px;
}

.avp-btn[disabled],
.avp-btn[aria-disabled="true"] {
  background: var(--avp-surface-alt);
  border-color: var(--avp-border);
  color: #aaaaaa;
  cursor: not-allowed;
}

.avp-btn__icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Seat usage panel
   -------------------------------------------------------------------------- */

.avp-cls__seats {
  background: var(--avp-surface);
  border: 1px solid var(--avp-border);
  border-radius: var(--avp-radius);
  padding: 16px 20px;
  margin-bottom: 24px;
}

.avp-cls__seats-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}

.avp-cls__seats-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--avp-heading);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.avp-cls__seats-count {
  font-size: 15px;
  font-weight: 700;
  color: var(--avp-teal-ink);
}

.avp-cls__meter {
  height: 8px;
  border-radius: 4px;
  background: #efefef;
  overflow: hidden;
}

.avp-cls__meter-fill {
  height: 100%;
  background: var(--avp-teal);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.avp-cls__seats-hint {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--avp-muted);
}

/* --------------------------------------------------------------------------
   Classroom cards
   -------------------------------------------------------------------------- */

.avp-cls__list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.avp-cls-card {
  background: var(--avp-surface);
  border: 1px solid var(--avp-border);
  border-radius: var(--avp-radius);
  overflow: hidden;
}

.avp-cls-card__header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px 0;
  cursor: pointer;
  user-select: none;
}

.avp-cls-card__header:hover .avp-cls-card__toggle {
  background: var(--avp-blue-tint);
  border-color: var(--avp-blue);
}

.avp-cls-card__toggle {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--avp-surface);
  border: 1px solid var(--avp-border);
  border-radius: var(--avp-radius-sm);
  color: var(--avp-blue);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.avp-cls-card__toggle:hover {
  background: var(--avp-blue-tint);
  border-color: var(--avp-blue);
}

.avp-cls-card__toggle:focus-visible {
  outline: 3px solid var(--avp-blue);
  outline-offset: 2px;
}

.avp-cls-card__chevron {
  width: 18px;
  height: 18px;
  transform: rotate(180deg); /* collapsed: chevron points up */
  transition: transform 0.2s ease;
}

.avp-cls-card__toggle[aria-expanded="true"] .avp-cls-card__chevron {
  transform: rotate(0deg); /* expanded: chevron points down */
}

.avp-cls-card__heading {
  flex: 1 1 auto;
  min-width: 0;
}

.avp-cls-card__name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.avp-cls-card__name {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--avp-heading);
  line-height: 1.25;
}

.avp-cls-card__book {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--avp-muted);
}

.avp-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.avp-badge--students {
  background: var(--avp-teal-tint);
  color: var(--avp-teal-ink);
}

.avp-badge--empty {
  background: #f1f1f1;
  color: var(--avp-muted);
}

.avp-badge--archived {
  background: var(--avp-orange-tint);
  color: var(--avp-orange-dark);
}

.avp-cls-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 20px 0 70px;
}

.avp-cls-card__hint {
  margin: 0;
  padding: 8px 20px 18px 70px;
  font-size: 13px;
  color: var(--avp-muted);
}

.avp-cls-card__hint:empty {
  padding-bottom: 18px;
}

/* Collapsible body ---------------------------------------------------------- */

.avp-cls-card__body {
  border-top: 1px solid var(--avp-border);
  background: var(--avp-surface-alt);
  padding: 16px 20px 20px 70px;
}

.avp-cls-card__body[hidden] {
  display: none;
}

.avp-cls-card__students {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 14px;
  font-size: 14px;
}

.avp-cls-card__students th {
  text-align: left !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.25 !important;
  color: var(--avp-heading) !important;
  background: none !important;
  text-shadow: none !important;
  padding: 0 0 8px !important;
  border-bottom: 1px solid var(--avp-border);
}

.avp-cls-card__students td {
  padding: 9px 0;
  border-bottom: 1px solid var(--avp-border);
  color: var(--avp-ink);
}

.avp-cls-card__students td:last-child,
.avp-cls-card__students th:last-child {
  text-align: right;
  color: var(--avp-muted);
  white-space: nowrap;
}

/* Per-row student actions (read / remove), styled to match the card buttons. */
.avp-cls-card__student-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-left: 6px;
  padding: 0;
  border: 1px solid var(--avp-border);
  border-radius: var(--avp-radius-sm);
  background: var(--avp-surface);
  color: var(--avp-blue);
  font: inherit;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease;
}

.avp-cls-card__student-action:hover {
  background: var(--avp-blue-tint);
  border-color: var(--avp-blue);
}

.avp-cls-card__student-action:focus-visible {
  outline: 3px solid var(--avp-blue);
  outline-offset: 2px;
}

.avp-cls-card__student-action--danger {
  color: var(--avp-red);
}

.avp-cls-card__student-action--danger:hover {
  background: var(--avp-red-tint);
  border-color: var(--avp-red);
}

.avp-cls-card__student-action--muted {
  color: var(--avp-muted);
  cursor: default;
}

.avp-cls-card__student-action--muted:hover {
  background: var(--avp-surface);
  border-color: var(--avp-border);
}

.avp-cls-card__empty {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--avp-muted);
}

/* --------------------------------------------------------------------------
   Archive vs delete explainer
   -------------------------------------------------------------------------- */

.avp-cls__explainer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.avp-cls__explainer-card {
  border: 1px solid var(--avp-border);
  border-radius: var(--avp-radius);
  padding: 14px 18px;
  background: var(--avp-surface);
}

.avp-cls__explainer-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--avp-heading);
}

.avp-cls__explainer-card p {
  margin: 0;
  font-size: 13.5px;
  color: var(--avp-muted);
  line-height: 1.6;
}

.avp-cls__explainer-card--archive h3 svg {
  color: var(--avp-orange);
}

.avp-cls__explainer-card--delete h3 svg {
  color: var(--avp-red);
}

/* --------------------------------------------------------------------------
   Confirmation modal
   -------------------------------------------------------------------------- */

.avp-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(34, 34, 34, 0.55);
}

.avp-modal[hidden] {
  display: none;
}

.avp-modal__dialog {
  background: var(--avp-surface);
  border-radius: var(--avp-radius);
  max-width: 440px;
  width: 100%;
  padding: 24px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
}

.avp-modal__title {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 700;
  color: var(--avp-heading);
}

.avp-modal__body {
  margin: 0 0 20px;
  font-size: 14.5px;
  color: var(--avp-ink);
}

.avp-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.avp-btn--ghost {
  background: var(--avp-surface);
  border-color: var(--avp-border);
  color: var(--avp-ink);
}

.avp-btn--ghost:hover {
  background: var(--avp-surface-alt);
}

.avp-cls__create-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

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

@media (max-width: 640px) {
  .avp-cls-card__actions,
  .avp-cls-card__hint,
  .avp-cls-card__body {
    padding-left: 20px;
  }

  .avp-cls-card__actions .avp-btn {
    flex: 1 1 calc(50% - 5px);
    justify-content: center;
  }

  .avp-cls__title {
    font-size: 24px;
  }

  .avp-cls-card__name {
    font-size: 19px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .avp-cls *,
  .avp-cls *::before,
  .avp-cls *::after {
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   Theme override for type="submit" buttons
   The active (WooCommerce my-account) theme styles submit buttons with higher
   specificity than our single-class rules. That is why the type="button"
   controls (e.g. "Rename / change book") pick up our styling, but the student
   "remove" (trash) button and the "Add student" submit button kept the theme
   styling. These !important rules reclaim our look for those submit buttons.
   -------------------------------------------------------------------------- */

button.avp-btn {
  width: auto !important;
  font: inherit !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-shadow: none !important;
  box-shadow: none !important;
  background-image: none !important;
  border-style: solid !important;
  border-width: 2px !important;
  border-radius: var(--avp-radius-sm) !important;
}

button.avp-btn--sm {
  padding: 7px 14px !important;
}

button.avp-btn--primary-outline {
  background-color: var(--avp-surface) !important;
  border-color: var(--avp-teal) !important;
  color: var(--avp-teal-ink) !important;
}

button.avp-btn--primary-outline:hover {
  background-color: var(--avp-teal-tint) !important;
  color: var(--avp-teal-ink) !important;
}

button.avp-btn--ghost {
  background-color: var(--avp-surface) !important;
  border-color: var(--avp-border) !important;
  color: var(--avp-ink) !important;
}

button.avp-btn--ghost:hover {
  background-color: var(--avp-surface-alt) !important;
  color: var(--avp-ink) !important;
}

/* The theme resets the border on type="submit" buttons with enough weight to
   beat the rules above (0,1,1). The primary-outline submit buttons (Add student,
   Edit classroom, Create classroom) are all also --sm; that three-class selector
   is specificity 0,3,1 and works regardless of a .avp-cls ancestor (the create
   form is not inside .avp-cls). */
button.avp-btn.avp-btn--primary-outline.avp-btn--sm {
  border: 2px solid var(--avp-teal) !important;
}

button.avp-cls-card__student-action {
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  font: inherit !important;
  line-height: 1 !important;
  text-transform: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  background-image: none !important;
  background-color: var(--avp-surface) !important;
  border: 1px solid var(--avp-border) !important;
  border-radius: var(--avp-radius-sm) !important;
  color: var(--avp-blue) !important;
}

button.avp-cls-card__student-action:hover {
  background-color: var(--avp-blue-tint) !important;
  border-color: var(--avp-blue) !important;
}

button.avp-cls-card__student-action--danger {
  color: var(--avp-red) !important;
  border-color: var(--avp-border) !important;
}

button.avp-cls-card__student-action--danger:hover {
  background-color: var(--avp-red-tint) !important;
  border-color: var(--avp-red) !important;
}

/* --------------------------------------------------------------------------
   Icon-upload "Browse..." button
   The native file-selector button is styled solid blue by avpforms.css at
   higher specificity, so this needs !important. Restyled to the small outline
   look of the form buttons, in blue. Two separate rules: an unknown
   pseudo-element would invalidate a whole selector list.
   -------------------------------------------------------------------------- */

.avp-file-input::file-selector-button {
  margin-right: 12px !important;
  padding: 7px 14px !important;
  border: 2px solid var(--avp-blue) !important;
  border-radius: var(--avp-radius-sm) !important;
  background: var(--avp-surface) !important;
  color: var(--avp-blue) !important;
  font: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease;
}

.avp-file-input::file-selector-button:hover {
  background: var(--avp-blue-tint) !important;
  color: var(--avp-blue-dark) !important;
}

.avp-file-input::-webkit-file-upload-button {
  margin-right: 12px !important;
  padding: 7px 14px !important;
  border: 2px solid var(--avp-blue) !important;
  border-radius: var(--avp-radius-sm) !important;
  background: var(--avp-surface) !important;
  color: var(--avp-blue) !important;
  font: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  cursor: pointer;
}

.avp-file-input::-webkit-file-upload-button:hover {
  background: var(--avp-blue-tint) !important;
  color: var(--avp-blue-dark) !important;
}

/* --------------------------------------------------------------------------
   Region accordion chevrons (create-classroom form)
   These .avp-cls-card__toggle buttons live inside the create <form>, so the
   theme's form/submit-button styling overrides the class. Reassert the bordered
   icon box. NB: 'color' is intentionally omitted so the inline per-region
   chevron colour (Alberta / British Columbia) still applies.
   -------------------------------------------------------------------------- */

button.avp-cls-card__toggle {
  width: 36px !important;
  height: 36px !important;
  min-width: 0 !important;
  padding: 0 !important;
  background-color: var(--avp-surface) !important;
  background-image: none !important;
  border: 1px solid var(--avp-border) !important;
  border-radius: var(--avp-radius-sm) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}