/* "Bir teklif" on the promotion screen (frontend/src/views/promotion.tsx, kind corner): the free places, then the
   plans side by side, each with its own ways to pay. */

.corner-free {
  display: inline-flex; align-items: center; gap: 8px; margin: 6px auto 34px; padding: 7px 14px;
  border-radius: 100px; background: rgba(214, 33, 95, .1); color: var(--accent);
  font-size: 13.5px; font-weight: 600;
}
.corner-free--full { background: rgba(var(--ink-rgb), .05); color: var(--ink-2); font-weight: 500; }

.corner-plans {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  width: 100%; max-width: 680px; margin: 0 auto 32px;
}
.corner-plan {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding: 26px 18px 18px; border-radius: 20px;
  background: var(--white); box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), .1);
}
.corner-plan.is-best { box-shadow: inset 0 0 0 2px var(--accent), 0 18px 40px -24px rgba(214, 33, 95, .6); }
.corner-plan-tag {
  position: absolute; top: -11px; left: 50%; translate: -50% 0;
  padding: 4px 11px; border-radius: 100px; white-space: nowrap;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .01em;
}
.corner-plan-days { color: var(--ink-3); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.corner-plan-price {
  display: flex; align-items: baseline; gap: 4px; margin: 8px 0 6px;
  font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1;
}
.corner-plan-price small { font-size: 20px; color: var(--accent); letter-spacing: 0; }
.corner-plan-per {
  display: flex; align-items: center; gap: 6px; min-height: 20px; margin-bottom: 18px;
  color: var(--ink-3); font-size: 12.5px;
}
.corner-plan-per b {
  padding: 2px 6px; border-radius: 6px; background: rgba(34, 160, 90, .14); color: #22a05a;
  font-size: 11px; font-weight: 700;
}
.corner-plan form, .corner-plan > .btn { width: 100%; margin-top: auto; }
.corner-plan form + form { margin-top: 8px; }
.corner-plan .btn {
  width: 100%; height: 44px; padding: 0 12px; justify-content: center; gap: 6px;
  font-size: 14px; white-space: nowrap;
}

@media (max-width: 640px) {
  .corner-plans { grid-template-columns: 1fr; gap: 18px; max-width: 360px; }
  .corner-plan { padding: 24px 18px 18px; }
}