/* ====================== INVITATION REQUEST ============================
   A single sheet on a plain ground. Every decision here is about making a
   long form feel short: the steps say what happens next, the groups break
   the choices into readable runs, and nothing moves as you fill it in.
   ====================================================================== */

.rg{
    --rg-line: rgba(21,21,21,0.14);
    --rg-muted: #5a5a5a;
    --rg-ground: #e9e9e7;
    --rg-sheet: #f2f2f0;
    --rg-field: #ffffff;
    --rg-ink: #151515;
}
.dark .rg{
    --rg-line: rgba(255,255,255,0.18);
    --rg-muted: #a8a8a8;
    --rg-ground: #101010;
    --rg-sheet: #171717;
    --rg-field: #1f1f1f;
    --rg-ink: #ffffff;
}

/* the site is content-box by default; every width below assumes otherwise */
.rg *, .rg *::before, .rg *::after{ box-sizing: border-box; }

.rg{
    min-height: 100vh; padding: 40px 20px 70px;
    background: var(--rg-ground); color: var(--rg-ink);
}

.rg_sheet{
    max-width: 1000px; margin: 0 auto;
    border-radius: 20px; overflow: hidden;
    background: var(--rg-sheet);
    box-shadow: 0 10px 40px rgba(0,0,0,0.10);
}

/* ------------------------------- head -------------------------------- */
.rg_head{
    position: relative;
    padding: 40px 46px 34px;
    border-bottom: 2px solid var(--rg-ink);
    background: var(--rg-ground);
}
.rg_eyebrow{
    font-size: 12px; font-weight: 700; letter-spacing: 0.10em;
    color: var(--rg-muted); padding: 0 0 12px;
}
.rg_head h1{ font-size: 40px; line-height: 1.1; padding: 0 0 16px; }
.rg_intro{ max-width: 620px; font-size: 16px; line-height: 1.55; color: var(--rg-ink); padding: 0; }

/* The language switcher, left of the close button. This page has no
   masthead, so without it a visitor on an English link is stuck in
   English on a bilingual event form. */
.rg_lang{
    position: absolute; top: 28px; right: 84px;
    display: flex; align-items: center; gap: 2px;
    border: 1px solid var(--rg-line); border-radius: 19px; padding: 3px;
}
.rg_lang_b{
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 30px; padding: 0 8px; border-radius: 15px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
    color: var(--rg-muted); text-decoration: none; transition-duration: 0.2s;
}
.rg_lang_b:hover{ color: var(--rg-ink); }
.rg_lang_b.is_on{ background: var(--rg-ink); color: var(--rg-sheet); }
.dark .rg_lang_b.is_on{ background: var(--primary-color); color: #151515; }

.rg_close{
    position: absolute; top: 28px; right: 34px;
    width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--rg-line); border-radius: 50%;
    color: var(--rg-muted); font-size: 20px; line-height: 1; text-decoration: none;
    transition-duration: 0.2s;
}
.rg_close:hover{ border-color: var(--rg-ink); color: var(--rg-ink); }

/* ------------------------------- steps ------------------------------- */
.rg_steps{
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px; padding: 20px 46px;
    border-bottom: 1px solid var(--rg-line);
    background: rgba(255,255,255,0.35);
}
.dark .rg_steps{ background: rgba(255,255,255,0.03); }

.rg_step{ display: flex; align-items: center; gap: 12px; }
.rg_step_n{
    flex: none; width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--rg-line); border-radius: 50%;
    font-size: 13px; font-weight: 700; color: var(--rg-muted);
}
.rg_step.is_on .rg_step_n{ background: var(--rg-ink); border-color: var(--rg-ink); color: var(--rg-sheet); }
.rg_step_text strong{ display: block; font-size: 15px; }
.rg_step_text span{ display: block; font-size: 13px; color: var(--rg-muted); padding: 1px 0 0; }

/* ------------------------------- body -------------------------------- */
.rg_body{ padding: 34px 46px 40px; }

.rg_section_head{ display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.rg_section_head h2{ font-size: 26px; padding: 0; }
.rg_section_note, .rg_count{ font-size: 14px; color: var(--rg-muted); }
.rg_section_sub{ font-size: 15px; color: var(--rg-muted); padding: 6px 0 0; }
.rg_spaced{ padding: 40px 0 0; }

.rg_two{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 26px; padding: 22px 0 0; }

.rg_field label{
    display: flex; align-items: baseline; gap: 8px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
    color: var(--rg-muted); padding: 0 0 8px;
}
.rg_label_note{ font-weight: 400; letter-spacing: 0; font-size: 12px; text-transform: none; }
.rg_counter{ margin-left: auto; font-weight: 400; letter-spacing: 0; }

/* a dot rather than a red star: it marks the field without shouting at it */
.rg_dot{ width: 5px; height: 5px; border-radius: 50%; background: #c0392b; display: inline-block; }

.rg input[type="text"],
.rg input[type="email"],
.rg input[type="tel"],
.rg select,
.rg textarea{
    width: 100%; padding: 15px 18px;
    border: 1px solid var(--rg-line); border-radius: 12px;
    background: var(--rg-field); color: var(--rg-ink);
    font-family: inherit; font-size: 16px; line-height: 1.5;
}
.rg textarea{ resize: vertical; min-height: 130px; }
.rg input::placeholder, .rg textarea::placeholder{ color: var(--rg-muted); opacity: 0.75; }
.rg input:focus, .rg select:focus, .rg textarea:focus{ outline: none; border-color: var(--rg-ink); }
.rg .is_missing{ border-color: #c0392b; }

/* `.dark select` and `select` in adapt-main.css paint every dropdown lime
   with !important; this sheet is quieter than that */
.rg select{
    background-color: var(--rg-field) !important;
    color: var(--rg-ink) !important;
    padding: 15px 44px 15px 18px !important;
    border: 1px solid var(--rg-line) !important;
    border-radius: 12px !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23151515' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px top 50% !important;
    background-size: 12px auto !important;
}
.dark .rg select{
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
}
.dark .rg select option{ background: #1f1f1f; color: white; }

/* ------------------------------- goals ------------------------------- */
.rg_group{
    font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
    color: var(--rg-muted); padding: 24px 0 10px;
}
.rg_pills{ display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; }

.rg_pill{
    display: inline-flex; align-items: center; gap: 12px;
    padding: 13px 22px 13px 16px;
    border: 1px solid var(--rg-line); border-radius: 28px;
    background: var(--rg-field);
    cursor: pointer; transition-duration: 0.2s;
}
.rg_pill:hover{ border-color: var(--rg-ink); }
.rg_pill input{ position: absolute; opacity: 0; width: 0; height: 0; }
.rg_box{
    flex: none; width: 20px; height: 20px;
    border: 1px solid var(--rg-line); border-radius: 6px;
    background: transparent; position: relative; transition-duration: 0.2s;
}
.rg_box::after{
    content: ''; position: absolute; left: 6px; top: 2px;
    width: 5px; height: 10px; border: solid var(--rg-ink); border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0); transition-duration: 0.15s;
}
.rg_pill input:checked ~ .rg_box{ background: var(--primary-color); border-color: var(--primary-color); }
.rg_pill input:checked ~ .rg_box::after{ transform: rotate(45deg) scale(1); border-color: #151515; }
.rg_pill:has(input:checked){ border-color: var(--rg-ink); }
.rg_pill input:focus-visible ~ .rg_box{ box-shadow: 0 0 0 3px rgba(202,231,111,0.6); }
.rg_pill_text{ font-size: 15px; font-weight: 700; }

/* ------------------------------- promo ------------------------------- */
/* The code is checked as it is typed, so the field carries its own verdict
   instead of a button: a spinner while it is in flight, then a tick or a
   cross. The ring changes with it, because the mark alone is small. */
.rg_promo{ position: relative; }
.rg_promo input{ padding-right: 44px !important; transition-duration: 0.2s; }

.rg_promo.is_good input{ border-color: #7ba428 !important; }
.dark .rg_promo.is_good input{ border-color: var(--primary-color) !important; }
.rg_promo.is_bad input{ border-color: #c0392b !important; }
.dark .rg_promo.is_bad input{ border-color: #ff9a9a !important; }

.rg_promo_mark{
    position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
    width: 20px; height: 20px; line-height: 20px; text-align: center;
    font-size: 17px; font-weight: 700; pointer-events: none;
}
.rg_promo.is_good .rg_promo_mark{ color: #5c7a1e; }
.dark .rg_promo.is_good .rg_promo_mark{ color: var(--primary-color); }
.rg_promo.is_bad .rg_promo_mark{ color: #c0392b; }
.dark .rg_promo.is_bad .rg_promo_mark{ color: #ff9a9a; }

/* in flight: the mark is empty, so the spinner is drawn on it */
.rg_promo.is_checking .rg_promo_mark{
    border: 2px solid rgba(0,0,0,0.15); border-top-color: #5c7a1e;
    border-radius: 50%; width: 16px; height: 16px;
    animation: rg_spin 0.7s linear infinite;
}
.dark .rg_promo.is_checking .rg_promo_mark{ border-color: rgba(255,255,255,0.2); border-top-color: var(--primary-color); }
@keyframes rg_spin{ to{ transform: translateY(-50%) rotate(360deg); } }

/* the discount as a figure, not only as a sentence */
.rg_note_price{ padding: 0 0 8px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rg_note_price[hidden]{ display: none; }
.rg_was{ font-size: 15px; color: var(--rg-muted); text-decoration: line-through; }
.rg_now{ font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: #4a6b12; }
.dark .rg_now{ color: var(--primary-color); }
/* what the code gives, in three words. Sized to be read before the
   sentence in the box beside it, because it is the answer to the only
   question being asked at this point: what does this get me? */
.rg_promo_badge{
    display: inline-block; padding: 7px 16px; margin: 10px 0 0;
    border-radius: 16px; background: var(--primary-color); color: var(--text-color);
    font-size: 15px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2;
}
.rg_promo_badge[hidden]{ display: none; }

.rg_promo_msg{ font-size: 14px; padding: 9px 2px 0; color: #5c7a1e; }
.dark .rg_promo_msg{ color: var(--primary-color); }
.rg_promo_msg.is_bad{ color: #c0392b; }
.dark .rg_promo_msg.is_bad{ color: #ffb4b4; }
.rg_promo_msg[hidden]{ display: none; }

.rg_note{
    align-self: end;
    padding: 20px 24px; border-radius: 14px;
    background: rgba(21,21,21,0.05); border: 1px solid var(--rg-line);
}
.dark .rg_note{ background: rgba(255,255,255,0.05); }
.rg_note_title{ font-size: 15px; font-weight: 700; padding: 0 0 6px; }
.rg_note_text{ font-size: 14px; line-height: 1.55; color: var(--rg-muted); padding: 0; }

/* ------------------------------- send -------------------------------- */
.rg_error, .rg_done{
    margin: 26px 0 0; padding: 14px 18px; border-radius: 12px; font-size: 15px;
}
.rg_error{ background: rgba(192,57,43,0.12); color: #c0392b; }
.dark .rg_error{ color: #ffb4b4; }
.rg_done{ background: rgba(202,231,111,0.28); color: var(--rg-ink); }
.rg_error[hidden], .rg_done[hidden]{ display: none; }

.rg_send{ display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 30px 0 0; }
/* Qualified by .rg on purpose. This is an <a>, and adapt-main.css's
   `.dark a { color: var(--off-white) }` is class+element -- it outranks a
   bare .rg_submit, so the label came out near-white on lime, a contrast of
   about 1.2 to 1. Two classes beat it.

   --text-color is #151515 and is defined once, in :root; nothing redefines
   it under .dark, which is what makes it right for ink on a ground that
   does not change with the theme. */
.rg .rg_submit{
    display: inline-flex; align-items: center; justify-content: center;
    padding: 18px 34px; border-radius: 30px;
    background: var(--primary-color); color: var(--text-color);
    font-size: 17px; font-weight: 700; text-decoration: none; white-space: nowrap;
    transition-duration: 0.2s;
}
.rg .rg_submit:hover{ opacity: 0.85; color: var(--text-color); }
.rg_submit.is_busy{ opacity: 0.5; pointer-events: none; }
.rg_consent{ flex: 1 1 320px; font-size: 14px; line-height: 1.5; color: var(--rg-muted); }

/* ------------------------------ narrower ------------------------------ */
@media(max-width: 860px){
    .rg{ padding: 0 0 40px; }
    .rg_sheet{ border-radius: 0; }
    .rg_head{ padding: 32px 24px 26px; }
    .rg_head h1{ font-size: 30px; }
    .rg_close{ top: 20px; right: 20px; }
    /* the head is tighter here, so the switcher drops under the close
       button rather than squeezing against it */
    .rg_lang{ position: static; margin: 0 0 18px; width: max-content; }
    .rg_steps{ grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px 24px; }
    .rg_body{ padding: 28px 24px 34px; }
    .rg_two{ grid-template-columns: minmax(0, 1fr); }
    .rg_note{ align-self: auto; }
}