/*
 * The shop's own screens.
 *
 * Written against the theme's custom properties with a fallback on every one,
 * so it inherits the site's palette when the Sokocode theme is active and
 * still looks deliberate under any other theme. That is the whole reason
 * these are var(--x, #hex) rather than the hex alone.
 */

.sokocode-auth,
.sokocode-checkout,
.sokocode-licences {
	--sb-ink: var(--ink, #062A40);
	--sb-soft: var(--soft, #2F5B72);
	--sb-dim: var(--dim, #5A8299);
	--sb-rule: var(--rule, #BEE3F0);
	--sb-acc: var(--acc, #0891B2);
	--sb-panel: var(--panel, #fff);
	max-width: 62rem;
	margin-inline: auto;
	color: var(--sb-soft);
}

/* ---- the two columns, which become one on a phone ---------------------- */
.sokocode-auth-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: 1rem;
	align-items: start;
}

.sokocode-auth-card,
.sokocode-checkout {
	background: var(--sb-panel);
	border: 1px solid var(--sb-rule);
	border-radius: 14px;
	padding: 1.4rem 1.5rem;
}

.sokocode-auth-card h2,
.sokocode-checkout h2 {
	margin: 0 0 .9rem;
	font-size: 1.15rem;
	color: var(--sb-ink);
	letter-spacing: -.02em;
}

.sokocode-auth-said {
	background: var(--goodsoft, #CCFBEF);
	color: var(--good, #047857);
	border-radius: 11px;
	padding: .9rem 1.1rem;
	margin: 0 0 1.1rem;
	font-size: .92rem;
}

.sokocode-auth-small {
	font-size: .85rem;
	color: var(--sb-dim);
	line-height: 1.5;
}

.sokocode-auth-small a { color: var(--sb-acc); }

/* ---- fields ------------------------------------------------------------ */
.sokocode-auth label,
.sokocode-checkout label {
	display: block;
	font-size: .82rem;
	font-weight: 650;
	color: var(--sb-ink);
	margin-bottom: .3rem;
}

.sokocode-auth input[type="text"],
.sokocode-auth input[type="email"],
.sokocode-auth input[type="password"],
.sokocode-checkout input[type="email"] {
	width: 100%;
	box-sizing: border-box;
	/* 16px minimum: anything smaller and iOS Safari zooms the page in on
	   focus, which on a payment form reads as something going wrong. */
	font-size: 1rem;
	padding: .7rem .8rem;
	border: 1px solid var(--sb-rule);
	border-radius: 9px;
	background: #fff;
	color: var(--sb-ink);
	/* 44px of thumb, the same floor the rest of the site uses. */
	min-height: 44px;
}

.sokocode-auth input:focus,
.sokocode-checkout input:focus {
	outline: 2px solid var(--sb-acc);
	outline-offset: 1px;
	border-color: var(--sb-acc);
}

/* ---- buttons ----------------------------------------------------------- */
.sokocode-auth button,
.sokocode-auth input[type="submit"],
.sokocode-checkout button,
.sokocode-licences button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: .7rem 1.2rem;
	border: 0;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--cyan, #06B6D4), var(--acc2, #2563EB));
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.sokocode-auth button:hover,
.sokocode-auth input[type="submit"]:hover,
.sokocode-checkout button:hover { filter: brightness(1.06); }

/* The release button is destructive and should not look like the one that
   takes money. */
.sokocode-licences button {
	background: none;
	border: 1px solid var(--sb-rule);
	color: var(--bad, #BE123C);
	font-weight: 650;
	padding: .5rem .9rem;
	min-height: 40px;
}

/* ---- checkout ---------------------------------------------------------- */
.sokocode-checkout-price {
	font-size: 1.05rem;
	color: var(--sb-soft);
	margin: 0 0 .2rem;
}

.sokocode-checkout-price strong {
	font-size: 2rem;
	color: var(--sb-ink);
	letter-spacing: -.03em;
	margin-right: .4rem;
}

.sokocode-checkout-note,
.sokocode-checkout-terms {
	font-size: .85rem;
	color: var(--sb-dim);
	line-height: 1.5;
}

.sokocode-checkout-terms {
	border-top: 1px dashed var(--rule2, #89C9E0);
	margin-top: 1.1rem;
	padding-top: .9rem;
}

.sokocode-subscribe { display: grid; gap: .7rem; margin: 1.1rem 0 0; }

/* ---- the licence list -------------------------------------------------- */
.sokocode-licence {
	background: var(--sb-panel);
	border: 1px solid var(--sb-rule);
	border-radius: 13px;
	padding: 1.2rem 1.3rem;
	margin-bottom: .8rem;
}

.sokocode-licence h3 {
	margin: 0 0 .5rem;
	font-size: 1.02rem;
	color: var(--sb-ink);
}

.sokocode-licence code {
	font-size: .9rem;
	background: var(--accsoft, #CFF4FC);
	color: var(--navy, #06375A);
	padding: .2rem .45rem;
	border-radius: 6px;
}