/* ==========================
   Light Theme (Default)
========================== */

:root,
[data-bs-theme="light"] {
  --bg: #ffffff;
  --bg-rgb: 255 255 255;
  --surface: #ffffff;
  --surface-soft: #f8f9fa;

  --text: #212529;
  --text-muted: #6c757d;

  --border: #e9ecef;

  --shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
  --shadow-small: 0 10px 25px rgba(0, 0, 0, 0.12);

  --input-bg: #ffffff;
  --input-border: #ced4da;

  --input-prefilled: #eef8ff;
  --input-prefilled-border: #86b7fe;

  --heart: #ff4d7e;

  --card-bg: #f8fafc;
  --card-border: #e9ecef;
}

/* ==========================
   Dark Theme
========================== */

[data-bs-theme="dark"] {
  --bg: #0d1526;
  --bg-rgb: 13 21 38;

  --surface: #15203a;
  --surface-soft: #1b2b4a;

  --text: #f8fafc;
  --text-muted: #9fb3d1;

  --border: #263b61;

  --shadow: 0 15px 40px rgba(0, 0, 0, 0.45);
  --shadow-small: 0 10px 25px rgba(0, 0, 0, 0.35);

  --input-bg: #1b2b4a;
  --input-border: #355282;

  --input-prefilled: #1f4d8b;
  --input-prefilled-border: #4d8de8;

  --heart: #ff5b8b;

  --card-bg: #15203a;
  --card-border: #263b61;
}

/* ==========================
   Global
========================== */

body {
  font-family: "Plus Jakarta Sans", sans-serif;
  min-height: 100vh;
  overflow-x: hidden;

  background: var(--bg);
  color: var(--text);

  transition:
    background 0.25s,
    color 0.25s;
}

.left-side {
  border-right: 1px solid var(--border);
}

.hero-title {
  font-size: 3.5rem;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -2px;
  margin-bottom: 1.25rem;
}

#hook {
  position: relative;
  z-index: 5;
  background: rgb(var(--bg-rgb) / 25%);
}

#heroToggle {
  transition: opacity 0.2s ease;
}

#paymentActionFixed {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: min(430px, calc(100% - 32px));
    z-index: 1050;
    animation: slideUp .25s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translate(-50%, 20px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@media (max-width: 767.98px) {
  .hero-description {
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .hero-description.show {
    max-height: 250px;
  }
}

.phone {
  position: relative;
  z-index: 2;

  width: 281px;
  height: 500px;
  border-radius: 28px;

  background: var(--surface);
  overflow: hidden;

  box-shadow: var(--shadow);
}

.phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.floating {
  position: absolute;

  background: var(--surface);
  border-radius: 20px;

  overflow: hidden;
  box-shadow: var(--shadow-small);
}

.card-mini {
  z-index: 3;
  width: 141px;
  height: 250px;
  left: -100px;
  bottom: 60px;
  overflow: hidden;
  border-radius: 25px;
}

.card-mini img,
.card-mini-2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-mini-2 {
  z-index: 1;
  width: 180px;
  height: 320px;
  left: -150px;
  top: 25px;
  overflow: hidden;
  border-radius: 25px;
}

.profile {
  position: absolute;
  z-index: 3;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 4px solid #1877f2;
  bottom: 25px;
  left: 10px;
}

.emoji {
  position: absolute;
  z-index: 3;
  top: 0;
  left: -55px;
  font-size: 34px;
}

.heart {
  position: absolute;
  z-index: 3;

  right: -20px;
  bottom: 65px;

  width: 55px;
  height: 55px;
  border-radius: 50%;

  background: var(--heart);
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 24px;

  box-shadow: var(--shadow-small);
}

.card {
  background: var(--card-bg);
  border-color: var(--card-border);
  color: var(--text);
}

.card-header,
.card-footer {
  background: var(--card-bg);
  border-color: var(--card-border);
  color: var(--text);
}

.card-body {
  color: var(--text);
}

.order-page {
  padding-bottom: 90px;
}

.list-group-item {
  background: var(--card-bg);
  color: var(--text);
  border-color: var(--card-border);
}

.dropdown-menu {
  background: var(--card-bg);
  border-color: var(--card-border);
}

.dropdown-item {
  color: var(--text);
}

.dropdown-item:hover {
  background: var(--surface-soft);
}

.modal-content {
  background: var(--card-bg);
  border-color: var(--card-border);
  color: var(--text);
}

.modal-header,
.modal-footer {
  border-color: var(--card-border);
}

.offcanvas {
  background: var(--card-bg);
  color: var(--text);
}

.table {
  color: var(--text);
}

.table > :not(caption) > * > * {
  background: var(--card-bg);
  border-color: var(--card-border);
}

.form-control {
  height: 58px;
  border-radius: 14px;

  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text);
}

.form-control:focus {
  background: var(--input-bg);
  color: var(--text);
}

.form-control.prefilled {
  background: var(--input-prefilled);
  border-color: var(--input-prefilled-border);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  border-radius: 50px;
}

footer {
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ==========================
   Responsive
========================== */

@media (max-width: 1199px) {
  .left-side {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 60px 0 !important;
  }

  .hero-title {
    font-size: 2.5rem;
  }

  .left-side > div {
    width: 50% !important;
  }
}

@media (max-width: 575px) {
  .left-side {
    flex-direction: column;
  }

  .left-side > div {
    width: 100% !important;
    padding: 2rem !important;
  }

  .hero-title {
    margin-top: 0 !important;
  }

  .hero {
    transform: scale(0.85);
  }
}