/* The shop pages (/buy/ and /key/), in the game page's look. That page keeps its styles inline, and the shop's security
   policy forbids inline styles here, so this file carries the few of its rules the shop needs as well as its own. */

@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("/islandgolf/fonts/fredoka.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/islandgolf/fonts/nunito.woff2") format("woff2"); }

:root {
  --deep: #0b2e4d;
  --sea: #1b5f8f;
  --sand: #f2dda0;
  --grass-deep: #3f7424;
  --paper: #fbf7ec;
  --paper-line: #e7dcc3;
  --flag: #e0453a;
  --flag-deep: #c23328;
  --ink: #1d2b36;
  --muted: #5a6670;
  --display: "Fredoka", "Segoe UI", system-ui, sans-serif;
  --body: "Nunito", "Segoe UI", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.65; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--sea); }
:focus-visible { outline: 3px solid var(--sea); outline-offset: 3px; }
.wrap { width: min(760px, 100% - 32px); margin: 0 auto; }

h1, h2 { font-family: var(--display); font-weight: 600; line-height: 1.12; margin: 0 0 .5em; }
h1 { font-size: clamp(2.2rem, 6vw, 3.2rem); color: var(--deep); }
h2 { font-size: 1.6rem; color: var(--deep); margin-top: 1.6em; }
.flag { color: var(--flag); }
.kicker { margin: 0 0 6px; font-family: var(--display); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .9rem; color: var(--grass-deep); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer;
  font-family: var(--display); font-weight: 600; font-size: 1.05rem; line-height: 1;
  padding: 13px 22px; border-radius: 999px;
  background: var(--flag); color: #fff; text-decoration: none;
  box-shadow: 0 3px 0 var(--flag-deep);
}
.btn:hover { background: var(--flag-deep); }
.btn.small { font-size: .95rem; padding: 9px 16px; }
.btn.ghost { background: transparent; color: var(--deep); box-shadow: inset 0 0 0 2px var(--deep); }
.btn.ghost:hover { background: rgba(11, 46, 77, .06); }

.shop-bar { background: var(--deep); }
.shop-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.shop-bar .name { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 600; font-size: 1.3rem; color: #fff; text-decoration: none; }
.shop-bar .name img { width: 34px; height: 34px; }
.shop-bar .btn { font-size: .98rem; padding: 10px 18px; }

.shop { flex: 1; padding: 40px 0 56px; }
.lede { font-size: 1.15rem; }
.shop ol, .shop ul { padding-left: 1.3em; }
.shop li { margin: 6px 0; }

.shop-card { background: #fff; border: 1px solid var(--paper-line); border-top: 4px solid var(--flag); border-radius: 14px; padding: clamp(20px, 4vw, 34px); margin: 12px 0; }
.shop-price { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.shop-price .amount { font-family: var(--display); font-weight: 600; font-size: clamp(2.5rem, 7vw, 3.5rem); color: var(--deep); }
.shop-price .per { color: var(--muted); font-size: .95rem; }
.shop-price .was { color: var(--muted); font-size: 1.4rem; font-family: var(--display); }
.shop-price .was[hidden] { display: none; }
.shop-sale { color: var(--flag-deep); font-family: var(--display); font-weight: 600; font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; }
.shop-sale:empty { display: none; }
.shop .shop-gets { margin: 6px 0 22px; }

/* PayPal draws its own button into this; the width keeps it from stretching across a wide card. */
.shop-paypal { max-width: 420px; }
.shop-paypal[hidden] { display: none; }

.shop-status { margin: 0 0 18px; padding: 12px 16px; border-radius: 10px; border: 1px solid #d9b95b; background: #fdf4d3; }
.shop-status.error { border-color: var(--flag); background: #fde7e4; }
.shop-status[hidden], .shop-key[hidden] { display: none; }

.shop-key { margin-top: 6px; padding: 18px 20px; border: 2px dashed var(--grass-deep); border-radius: 10px; }
.shop-key-label { font-family: var(--display); font-weight: 600; letter-spacing: .1em; color: var(--muted); margin: 0 0 4px; font-size: .85rem; text-transform: uppercase; }
.shop-key code { font-size: clamp(1.1rem, 4.4vw, 1.7rem); letter-spacing: .06em; word-break: break-all; user-select: all; }
.shop-key-note { margin-bottom: 0; }

.shop-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 18px 0 8px; }
.shop-form label { position: absolute; left: -9999px; }
.shop-form input { min-width: 0; font-family: var(--body); color: var(--ink); background: #fff; border: 1px solid #b8ad93; border-radius: 10px; }
.shop-form input:focus { outline: 2px solid var(--sea); border-color: var(--sea); }
.shop-form input[type="email"] { flex: 1 1 260px; padding: 12px 14px; font-size: 1rem; }

/* The discount code box: small, above the button. */
.shop-code { margin: 0 0 16px; max-width: 420px; }
.shop-code[hidden] { display: none; }
.shop-code input[type="text"] { flex: 1 1 160px; padding: 9px 12px; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; }
.shop-code input::placeholder { text-transform: none; letter-spacing: 0; }
.shop-final { font-size: .95rem; margin: 0 0 16px; }
.shop-small { color: var(--muted); font-size: .9rem; }

.foot { background: #071f35; color: #9fb8c8; font-size: .95rem; padding: 26px 0; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between; }
.foot a { color: #dbe9f2; text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot ul { display: flex; flex-wrap: wrap; gap: 4px 20px; list-style: none; margin: 0; padding: 0; }