/* The Contact pop-up (shared/contact.js): opens on any link to #contact. */
.ct-back { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(43, 38, 32, 0.45); opacity: 0; transition: opacity 0.2s; }
.ct-back.open { opacity: 1; }
.ct-box { position: relative; width: 100%; max-width: 30rem; max-height: calc(100vh - 2rem); overflow-y: auto; background: #fffaf0; border: 2.5px solid #2b2620; border-radius: 22px; box-shadow: 0 6px 0 #2b2620; padding: 1.5rem 1.5rem 1.3rem; font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #2b2620; transform: translateY(12px) scale(0.98); transition: transform 0.2s; }
.ct-back.open .ct-box { transform: none; }
.ct-x { position: absolute; top: 0.7rem; right: 0.8rem; width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%; background: transparent; font-size: 1.5rem; line-height: 1; cursor: pointer; color: #2b2620; }
.ct-x:hover { background: rgba(245, 197, 24, 0.3); }
.ct-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.9rem; padding-right: 2rem; }
.ct-head img { width: 56px; height: 56px; flex: none; }
.ct-head h2 { margin: 0; font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 1.5rem; line-height: 1.15; }
.ct-head p { margin: 0.15rem 0 0; font-size: 0.92rem; color: #6b6355; }
.ct-box label { display: block; margin: 0.7rem 0 0.25rem; font-weight: 800; font-size: 0.92rem; }
.ct-box input, .ct-box textarea { width: 100%; box-sizing: border-box; padding: 0.6rem 0.8rem; border: 2px solid #e2d3ad; border-radius: 12px; background: #fff; font: inherit; font-size: 1rem; color: inherit; }
.ct-box textarea { min-height: 7.5rem; resize: vertical; }
.ct-box input:focus, .ct-box textarea:focus { outline: none; border-color: #d9960f; box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.3); }
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ct-send { display: block; width: 100%; margin-top: 1rem; padding: 0.7rem 1rem; border: 2.5px solid #2b2620; border-radius: 999px; background: linear-gradient(135deg, #f5c518, #d9960f); box-shadow: 0 4px 0 #2b2620; font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 1.15rem; color: #2b2620; cursor: pointer; }
.ct-send:active { transform: translateY(3px); box-shadow: 0 1px 0 #2b2620; }
.ct-send:disabled { opacity: 0.6; cursor: wait; }
.ct-err { margin: 0.7rem 0 0; color: #b3261e; font-weight: 700; font-size: 0.92rem; }
.ct-err:empty { display: none; }
.ct-done { text-align: center; padding: 0.5rem 0 0.3rem; }
.ct-done img { width: 96px; height: 96px; }
.ct-done h2 { margin: 0.4rem 0 0.3rem; font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 1.5rem; }
.ct-done p { margin: 0 0 1rem; color: #6b6355; }
@media (prefers-reduced-motion: reduce) { .ct-back, .ct-box { transition: none; } }
/* Email and Phone side by side (one under the other on small screens) */
.ct-two { display: grid; grid-template-columns: 1fr 1.2fr; gap: 0 0.8rem; }
.ct-two > div { display: grid; min-width: 0; }
@media (max-width: 520px) { .ct-two { grid-template-columns: 1fr; } }
/* Phone: a small country box (flag and code; the real list opens from an invisible select over it), then the number */
.ct-tel { display: flex; gap: 0.4rem; min-width: 0; }
.ct-tel input { flex: 1; min-width: 0; }
.ct-cc { position: relative; flex: none; display: flex; align-items: center; padding: 0 1.4rem 0 0.6rem; border: 2px solid #e2d3ad; border-radius: 12px; background: #fff; font-weight: 700; white-space: nowrap; }
.ct-cc::after { content: ""; position: absolute; right: 0.55rem; top: 50%; margin-top: -2px; border: 4.5px solid transparent; border-top: 5px solid #6b6355; border-bottom: 0; }
.ct-cc select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font: inherit; font-size: 1rem; }
.ct-cc:focus-within { border-color: #d9960f; box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.3); }