:root {
  --text-color: #000000;
  --color-primary: #ffd400;
  --color-secondary: #000000;
  --filter-primary: invert(75%) sepia(47%) saturate(863%) hue-rotate(358deg)
    brightness(104%) contrast(108%);
  --filter-secondary: none;

  --color-black: #000000;
  --color-white: #ffffff;
  --color-red: #e70606;
  --color-light-red: #fff5f5;
  --color-green: #05b359;
  --color-light-green: #f1fff8;
  --color-blue: #2d96f0;
  --color-light-blue: #f6fbff;
  --color-gray: #f8f7f4;
  --color-light-gray: #f8f7f4;
  --color-middle-gray: #e6e5e2;
  --color-dark-gray: #98958d;
  --color-blue-green: #00a2bf;
  --color-orange: #ff8900;
  --color-light-orange: #fff6eb;

  --color-input-error: #ff0000;
  --color-input-error-background: #fff4f4;

  --color-message: #000;
  --color-message-background: #fff;
  --color-message-border: #ebebeb;

  --color-message-success: #05b359;
  --color-message-success-background: #effdf6;
  --color-message-success-border: #05b359;
  --filter-message-success: invert(69%) sepia(55%) saturate(6571%)
    hue-rotate(116deg) brightness(93%) contrast(96%);

  --color-message-error: #ff0000;
  --color-message-error-background: #fff4f4;
  --color-message-error-border: #ff0000;
  --filter-message-error: invert(12%) sepia(100%) saturate(6154%)
    hue-rotate(358deg) brightness(93%) contrast(122%);

  --color-message-warning: #e8a203;
  --color-message-warning-background: #fff5e6;
  --color-message-warning-border: #e8a203;
  --filter-message-warning: invert(57%) sepia(77%) saturate(1027%)
    hue-rotate(7deg) brightness(101%) contrast(98%);

  --color-message-info: #279fe8;
  --color-message-info-background: #f4faff;
  --color-message-info-border: #279fe8;
  --filter-message-info: invert(48%) sepia(84%) saturate(417%)
    hue-rotate(158deg) brightness(97%) contrast(104%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: auto;
}

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  font-family: "Lato", serif;
  color: var(--text-color);
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  margin-bottom: 60px;
  background-color: var(--color-light-gray);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--color-primary);
}

.card {
  background-color: var(--color-white);
  border-radius: 8px;
  border: 1px solid var(--color-middle-gray);
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--color-dark-gray);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.btn-primary {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  border-radius: 28px;
  transition: all 0.2s ease;
  min-width: 54px;
  height: 54px;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
}

.btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: transparent;
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.btn-primary:focus {
  box-shadow: 0 0 0 0.1rem var(--color-white),
    0 0 0 0.25rem var(--color-primary);
}

.btn-primary:active {
  transform: translateY(0);
}

/* Info Box Styles */
.info-box {
  background-color: var(--color-gray);
  border-radius: 8px;
  padding: 16px;
}

.info-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-dark-gray);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.info-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-black);
  margin-bottom: 4px;
}

.info-email {
  font-size: 0.95rem;
  color: var(--color-black);
}

/* Payment Details */
.payment-details {
  padding: 0;
}

.payment-details span {
  color: var(--color-dark-gray);
}

.payment-details .fw-bold {
  color: var(--color-black);
}

/* Alert Styles */
.alert-success {
  color: var(--color-message-success);
  background-color: var(--color-message-success-background);
  border-color: var(--color-message-success-border);
}

.alert-danger,
.alert-error {
  color: var(--color-message-error);
  background-color: var(--color-message-error-background);
  border-color: var(--color-message-error-border);
}

/* Icon Circle */
.icon-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-color);
  font-weight: 900;
}

h1 {
  font-size: 32px;
  line-height: 48px;
  text-transform: uppercase;
}

@media (max-width: 991px) {
  h1 {
    font-size: 22px;
    line-height: 32px;
  }
}

h2 {
  font-size: 22px;
  line-height: 32px;
  text-transform: uppercase;
}

h3 {
  font-size: 16px;
  line-height: 22px;
  text-transform: uppercase;
}

/* Links */
a {
  color: var(--text-color);
  text-decoration: underline;
}

a:hover {
  color: var(--text-color);
  text-decoration: underline;
}