:root {
  --brand-navy: #00203d;
  --brand-blue: #0056a3;
  --brand-blue-dark: #004494;
  --brand-gold: #d4a628;
  --brand-gradient: linear-gradient(270deg, var(--brand-navy) 0%, var(--brand-blue) 100%);
}

* {
  box-sizing: border-box;
}

/* Hidden off-screen until keyboard focus lands on it - lets keyboard/screen
   reader users jump past the repeated header/nav straight to page content
   (WCAG 2.4.1 bypass blocks) without affecting the visual layout for
   everyone else. */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  z-index: 1000;
  background: var(--brand-navy);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 6px 6px;
  text-decoration: none;
  font-weight: 600;
}

.skip-link:focus {
  top: 0;
}

/* Honeypot bot-trap: genuinely off-screen (not display:none/visibility:hidden,
   which some crawlers skip filling precisely because they're easy to detect
   as hidden) and out of the tab order, so it's invisible to real users but
   still a normal fillable field to a naive automated form-filler. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.captcha-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.captcha-image {
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  line-height: 0;
}

.captcha-image svg {
  display: block;
}

.captcha-refresh {
  font-size: 22px;
  line-height: 1;
  text-decoration: none;
  color: var(--brand-blue);
  padding: 4px;
}

.captcha-refresh:hover {
  color: var(--brand-blue-dark);
}

/* Native browser focus rings are already visible (no outline:none is used
   anywhere in this stylesheet), but interactive elements get a clearer,
   on-brand indicator here (WCAG 2.4.7). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--brand-gold);
  outline-offset: 2px;
}

html,
body {
  height: 100%;
}

body {
  font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  color: #333;
  margin: 0;
  /* Sticky footer: body is a full-height column, the page's main content
     block (.hero or .page-content) grows to fill leftover space, and the
     footer - never growing - lands at the bottom of the viewport on short
     pages instead of floating up under the content. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-header-wrap,
.top-header,
header.site-header,
footer.site-footer {
  flex-shrink: 0;
  min-width: 0;
}

.hero,
.page-content {
  flex: 1 0 auto;
  min-width: 0;
}

/* The <main> landmark added for the skip-link target sits between
   .site-header-wrap and footer.site-footer in the DOM, but body's flex
   layout above needs .hero/.page-content to be direct flex children to
   grow and fill the viewport ahead of the fixed footer. display:contents
   removes <main> from the box tree (so it doesn't break that flex chain)
   while keeping it in the DOM/accessibility tree as a landmark. */
main {
  display: contents;
}

a {
  color: var(--brand-blue);
}

.container {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
  min-width: 0;
}

/* Keeps the logo bar + Manage Booking button (or admin nav) on screen while
   the page scrolls, instead of scrolling away with the rest of the content.
   Applies on both the villager-facing site and the admin panel. */
.site-header-wrap {
  position: sticky;
  top: 0;
  z-index: 900;
  background: #ffffff;
}

/* Pinned to the bottom of the viewport instead of scrolling away with page
   content - also shared by both the villager site and the admin panel.
   Fixed rather than sticky: sticky computes its "stuck" position from the
   current scroll offset alone, so on any page taller than the viewport it
   renders pinned over the bottom of the screen from the very first paint
   (before any scrolling), overlapping real content like the Manage Booking
   action buttons. Fixed always pins at the same screen position, and
   .page-content/.hero reserve matching bottom padding so nothing ever
   flows underneath it. */
footer.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
}

/* Top utility bar */
.top-header {
  background: var(--brand-gradient);
  padding: 6px 0;
}

.top-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  color: #e1f5fe;
  font-size: 12px;
  font-family: "Roboto", sans-serif;
}

/* Header */
header.site-header {
  padding: 14px 0;
  border-bottom: 3px solid var(--brand-gold);
}

.header-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  min-width: 0;
}

.header-row .logo img {
  height: 60px;
}

.site-title {
  font-family: "Roboto", sans-serif;
  font-size: 24px;
  color: var(--brand-navy);
  font-weight: 700;
  flex: 1 0 auto;
  min-width: 150px;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--brand-gradient);
  color: #fff;
  padding: 8px 14px;
  border-radius: 10px;
  white-space: nowrap;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}

.pill:hover {
  filter: brightness(1.1);
  color: #fff;
}

/* Shared by .admin-nav-strip and .status-filters: a single-line row of pills
   that scrolls horizontally instead of wrapping to a new row once space
   runs out - the scrollbar only appears when it's actually needed, since a
   row that already fits has nothing to overflow. */
.admin-nav-strip,
.status-filters {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.admin-nav-strip::-webkit-scrollbar,
.status-filters::-webkit-scrollbar {
  height: 6px;
}

.admin-nav-strip::-webkit-scrollbar-thumb,
.status-filters::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

.admin-nav-strip {
  padding: 10px 0;
}

.status-filters {
  margin-bottom: 16px;
  padding-bottom: 12px;
}

.page-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.page-heading-row h1 {
  margin: 0;
}

/* Public homepage header: toll-free number reads as information (a ghost
   link, no background) while Manage Booking stays a real action (a small
   pill) - both share one slim row instead of two stacked full-width pills. */
.site-utility-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.utility-link {
  color: var(--brand-blue);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}

.utility-link:hover {
  text-decoration: underline;
}

/* Hero */
.hero {
  background: var(--brand-gradient);
  border-top: 6px solid var(--brand-gold);
  border-bottom: 6px solid var(--brand-gold);
  padding: 60px 0;
}

.search-card {
  max-width: 380px;
  margin: 0 auto;
  border: 3px solid var(--brand-blue);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.search-card h2 {
  background: var(--brand-gradient);
  color: #fff;
  text-align: center;
  padding: 10px;
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  border-radius: 7px 7px 0 0;
}

.search-card .form-body {
  padding: 18px;
}

.form-block {
  margin-bottom: 12px;
}

.fields,
.date-input,
.text-input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}

.price-select {
  position: relative;
  font-size: 14px;
}

.price-select__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.price-select__toggle:hover {
  border-color: var(--brand-blue);
}

.price-select__toggle-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.price-select__arrow {
  flex-shrink: 0;
  color: var(--brand-blue);
  font-size: 12px;
}

.price-select__list {
  position: absolute;
  z-index: 950;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.price-select__option {
  padding: 10px 12px;
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.4;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.price-select__option:last-child {
  border-bottom: none;
}

.price-select__option:hover {
  background: var(--brand-gradient);
  color: #fff;
}

.price-select__option.is-active {
  background: #eef3f8;
  font-weight: 600;
}

.price-select__option.is-active:hover {
  background: var(--brand-gradient);
  font-weight: 600;
}

.avail-datepicker {
  position: relative;
}

.avail-calendar {
  position: absolute;
  z-index: 950;
  top: calc(100% + 4px);
  left: 0;
  width: 280px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  padding: 10px;
}

.avail-calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--brand-navy);
}

.avail-calendar__nav {
  border: none;
  background: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--brand-blue);
  padding: 2px 8px;
  border-radius: 4px;
}

.avail-calendar__nav:hover:not(:disabled) {
  background: #eef3f8;
}

.avail-calendar__nav:disabled {
  color: #ccc;
  cursor: default;
}

.avail-calendar__weekdays,
.avail-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}

.avail-calendar__weekdays span {
  font-size: 11px;
  color: #888;
  padding: 4px 0;
}

.avail-calendar__day {
  border: none;
  background: none;
  padding: 6px 0;
  font-size: 13px;
  font-family: inherit;
  border-radius: 4px;
  cursor: pointer;
}

.avail-calendar__day:hover:not(:disabled):not(.avail-calendar__day--empty) {
  background: #eef3f8;
}

.avail-calendar__day--empty {
  cursor: default;
}

.avail-calendar__day--disabled {
  color: #ccc;
  cursor: not-allowed;
}

.avail-calendar__day--available {
  background: #d4edda;
  color: #047857;
}

.avail-calendar__day--available:hover {
  background: #b9e3c4;
}

.avail-calendar__day--booked {
  background: #fdecea;
  color: #c0392b;
  font-weight: 600;
  cursor: not-allowed;
}

.avail-calendar__day--today {
  outline: 1px solid var(--brand-gold);
  outline-offset: -1px;
}

.avail-calendar__day--selected {
  background: var(--brand-blue);
  color: #fff;
}

.avail-calendar__day--range-start,
.avail-calendar__day--range-end {
  background: var(--brand-blue);
  color: #fff;
  font-weight: 600;
}

.avail-calendar__day--in-range {
  background: #cfe2f3;
  color: var(--brand-navy);
  border-radius: 0;
}

.avail-calendar__hint {
  font-size: 11px;
  color: #666;
  margin-top: 6px;
  text-align: center;
}

.avail-calendar__legend {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  font-size: 11px;
  color: #666;
}

.avail-calendar__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

.avail-calendar__dot--available {
  background: #d4edda;
  border: 1px solid #047857;
}

.avail-calendar__dot--booked {
  background: #fdecea;
  border: 1px solid #c0392b;
}

.password-field {
  position: relative;
}

.password-field .fields,
.password-field .text-input {
  padding-right: 38px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #888;
  display: flex;
  align-items: center;
}

.password-toggle:hover {
  color: #333;
}

.password-toggle.is-visible {
  color: var(--brand-blue);
}

.btn-search {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(270deg, #ff8c00 0%, #ff3614 100%);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.btn-search:hover {
  transform: translateY(-1px);
}

.error-msg {
  color: #c0392b;
  font-size: 13px;
  margin-bottom: 10px;
}

.info-tooltip {
  display: inline-block;
  color: var(--brand-blue);
  cursor: help;
  font-size: 14px;
}

/* Footer */
footer.site-footer {
  background: var(--brand-navy);
  color: #fff;
  padding: 14px 0;
}

.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
}

.footer-row a {
  color: #fff;
  text-decoration: none;
}

.footer-row a:hover {
  text-decoration: underline;
}

/* Generic content page */
.page-content {
  /* Extra bottom padding reserves room for the sticky footer, which can
     render pinned to the viewport bottom from first paint whenever the
     page is taller than the viewport - without this, it overlaps the last
     bit of content (e.g. the Download PDF button on Manage Booking). */
  padding: 30px 0 130px;
  min-height: 300px;
}

.page-content h1 {
  font-family: "Roboto", sans-serif;
  color: var(--brand-navy);
  font-size: 24px;
}

/* Results / booking */
.hall-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin: 20px 0;
}

.hall-card {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 16px;
}

.hall-card h3 {
  margin-top: 0;
  font-family: "Roboto", sans-serif;
  color: var(--brand-navy);
}

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.badge.available {
  background: #d4edda;
  color: #047857;
}

.badge.booked {
  background: #fdecea;
  color: #c0392b;
}

.btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--brand-gradient);
  color: #fff;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

.btn:hover {
  filter: brightness(1.1);
  color: #fff;
}

.btn.disabled {
  background: #aaa;
  pointer-events: none;
}

/* Real <button disabled> elements (e.g. "Submit for Refund" before the
   refund window opens, "Update Date" before a reschedule change is made) -
   distinct from .btn.disabled above, which is a CSS class used on <a> links
   that can't carry the disabled attribute at all. Without this, a disabled
   button rendered no differently from an enabled one, since it never
   matched that class-based rule. */
.btn:disabled {
  background: #aaa;
  cursor: not-allowed;
  filter: none;
}

.btn--danger {
  background: #c0392b;
}

.btn--danger:hover {
  background: #a5281c;
  filter: none;
}

.btn--small {
  padding: 5px 12px;
  font-size: 12px;
  border-radius: 8px;
}

/* Manage Booking action row: PDF download + change-date form + cancel form,
   all aligned on one consistent row that wraps cleanly on narrow screens. */
.booking-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0;
}

.booking-actions__form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.booking-actions__label {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}

.form-row {
  margin-bottom: 14px;
}

.form-row label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}

.confirmation-box {
  border: 2px solid #047857;
  background: #d4edda;
  border-radius: 10px;
  padding: 20px;
  margin: 20px 0;
}

.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.detail-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}

.detail-table td {
  padding: 8px;
  border-bottom: 1px solid #eee;
}

.detail-table td:first-child {
  font-weight: 600;
  width: 200px;
}

/* Manage Booking summary card */
.booking-summary__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid #eee;
  margin-bottom: 4px;
}

.booking-summary__header-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.booking-summary__header-actions form {
  margin: 0;
}

.booking-summary__order-id {
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--brand-navy);
}

.booking-summary__venue {
  font-size: 13px;
  color: #666;
  margin-top: 2px;
}

.badge--pending-verification {
  background: #fff3cd;
  color: #8a6500;
}

.badge--verified {
  background: #dbeafe;
  color: #1d4ed8;
}

.badge--confirmed {
  background: #d4edda;
  color: #047857;
}

.badge--rejected {
  background: #fdecea;
  color: #c0392b;
}

.badge--cancelled {
  background: #e5e7eb;
  color: #4b5563;
}

.payment-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  background: #fff8e6;
  border-left: 4px solid var(--brand-gold);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 14px 0;
}

.payment-alert__amount {
  font-weight: 700;
  color: var(--brand-navy);
}

.payment-alert__deadline {
  font-size: 13px;
  color: #8a6500;
}

.alert-box {
  border-radius: 6px;
  padding: 12px 14px;
  margin: 14px 0;
  font-size: 14px;
}

.alert-box--danger {
  background: #fdecea;
  border-left: 4px solid #c0392b;
  color: #922016;
}

/* Modal */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.open {
  display: flex;
}

.modal-box {
  background: #fff;
  border-radius: 10px;
  max-width: 700px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 24px;
  position: relative;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.modal-box h2 {
  font-family: "Roboto", sans-serif;
  color: var(--brand-navy);
  margin-top: 0;
  padding-right: 30px;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #666;
}

.terms-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 13px;
}

.terms-table th,
.terms-table td {
  border: 1px solid #ccc;
  padding: 6px 10px;
  text-align: left;
}

.terms-table th {
  background: #eef3f8;
  color: var(--brand-navy);
  font-weight: 600;
}

.modal-close:hover {
  color: #000;
}

.link-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--brand-blue);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}

/* Global admin search: one bar in the header (every admin page), searching
   bookings/centres/holidays at once and showing a single grouped dropdown of
   links - results only navigate, they don't filter a list in place. */
.admin-global-search {
  width: 100%;
  margin: 16px 0 18px;
}

.admin-global-search .text-input {
  padding: 12px 14px;
  font-size: 15px;
}

.admin-search {
  position: relative;
}

.admin-search__results {
  position: absolute;
  z-index: 950;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  max-height: 360px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.admin-search__group-label {
  padding: 8px 12px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #888;
  background: #f7f9fb;
}

.admin-search__item {
  display: block;
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
  text-decoration: none;
  color: #333;
}

.admin-search__item:last-child {
  border-bottom: none;
}

.admin-search__item:hover {
  background: var(--brand-gradient);
  color: #fff;
}

.admin-search__item:hover .admin-search__item-meta {
  color: #eee;
}

.admin-search__item-order {
  font-weight: 700;
  color: var(--brand-navy);
}

.admin-search__item:hover .admin-search__item-order {
  color: #fff;
}

/* Briefly highlights whichever centre card or holiday row a global search
   result linked to, via the URL fragment - :target needs no JS at all. */
.centre-card:target,
.holiday-row:target {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
}

.holiday-row:target td {
  background: #fff8e6;
}

.admin-search__item-meta {
  font-size: 12px;
  color: #777;
  margin-top: 2px;
}

.admin-search__empty {
  padding: 10px 12px;
  color: #777;
  font-size: 13px;
}

/* ==========================================================================
   Responsive breakpoints
   768px = tablets / small laptops, 480px = phones. Mobile-first values live
   above as the desktop defaults; these narrow the layout progressively.
   ========================================================================== */

@media (max-width: 768px) {
  .hero {
    padding: 36px 0;
  }

  .site-title {
    font-size: 19px;
  }

  .header-row .logo img {
    height: 48px;
  }

  .page-content h1 {
    font-size: 20px;
  }

  .search-card {
    max-width: 100%;
  }

  .detail-table td:first-child {
    width: 140px;
  }

  .modal-box {
    padding: 18px;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 14px;
  }

  .hero {
    padding: 24px 0;
  }

  .top-header-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 11px;
  }

  .site-title {
    font-size: 17px;
  }

  .search-card h2 {
    font-size: 17px;
  }

  .detail-table td:first-child {
    width: 42%;
    font-size: 13px;
  }

  .detail-table td {
    padding: 6px;
    font-size: 13px;
  }

  .hall-card,
  .confirmation-box,
  .modal-box {
    padding: 14px;
  }

  .footer-row {
    justify-content: center;
    text-align: center;
    font-size: 12px;
  }
}

/* "Saved" confirmation toast, shown after a successful form action on
   either the admin panel or the villager-facing site. */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  animation: toast-in 0.25s ease;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast--success {
  background: #047857;
}

.toast__icon {
  font-size: 16px;
}

.toast--hide {
  opacity: 0;
  transform: translateY(10px);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}