/* Support page (/home/contactsupport): the "Ways to reach us" cards (live chat, phone, email) above
   the contact form, and the form itself on the design system (Grant's canvas, 27 Oct 2026). Linked
   only from ContactSupport.cshtml, so nothing here reaches another page. The How to play column
   beside the form keeps the site's .webcafe-container. */

.pgcs-ways, .pgcs-form-card {
    --pgcs-navy: #00263E;
    --pgcs-red: #C21E15;
    --pgcs-red-tint: #FDECEA;
    --pgcs-gold: #E6BC75;
    --pgcs-body: #3C3E41;
    --pgcs-muted: #6E7075;
    --pgcs-line: #DCDDDF;
    --pgcs-soft: #F7F7F8;
    --pgcs-field: rgba(0, 38, 62, .24);
    --pgcs-ok: #12784A;
    --pgcs-ok-tint: rgba(18, 120, 74, .12);
    font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--pgcs-navy);
}

.pgcs-ways *, .pgcs-form-card * { box-sizing: border-box; }

/* ---------- ways to reach us ---------- */
.pgcs-ways { padding: 20px 16px 4px; display: flex; flex-direction: column; gap: 12px; }
.pgcs-ways-head { display: flex; flex-direction: column; gap: 4px; }
    .pgcs-ways-head h2 { margin: 0; font-family: inherit; font-size: 22px; font-weight: 700; line-height: 1.18; color: var(--pgcs-navy); }
    .pgcs-ways-head p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--pgcs-body); }

.pgcs-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

.pgcs-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border-radius: 10px;
    border: 1px solid var(--pgcs-line);
    background: var(--pgcs-soft);
    color: var(--pgcs-navy);
    text-decoration: none;
}

    a.pgcs-card:hover { color: var(--pgcs-navy); border-color: var(--pgcs-red); }
    a.pgcs-card:focus-visible { outline: 3px solid var(--pgcs-navy); outline-offset: 2px; }

.pgcs-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--pgcs-red-tint);
    color: var(--pgcs-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.pgcs-card-body { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pgcs-card-title { font-size: 16px; font-weight: 700; }
.pgcs-card-text { font-size: 14px; line-height: 1.45; color: var(--pgcs-body); }
.pgcs-card-value { font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.pgcs-card-meta { font-size: 13px; line-height: 1.4; color: var(--pgcs-muted); }
.pgcs-card-action { margin-top: 6px; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--pgcs-red); }
    .pgcs-card-action i { font-size: 12px; }

/* ---------- contact form ---------- */
.pgcs-form-card {
    margin: 10px;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid var(--pgcs-line);
    background: var(--pgcs-soft);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pgcs-form-head { display: flex; align-items: center; gap: 14px; }
    .pgcs-form-head h2 { margin: 0; font-family: inherit; font-size: 18px; font-weight: 700; color: var(--pgcs-navy); }

.pgcs-form-card .form-data > p { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: var(--pgcs-body); }
    .pgcs-form-card .form-data > p:empty { display: none; }
    .pgcs-form-card .form-data > p.message-line-red { font-weight: 600; color: #B3261E; }

.pgcs-form { display: flex; flex-direction: column; gap: 14px; }
.pgcs-intro { margin: 0; font-size: 14px; line-height: 1.45; color: var(--pgcs-body); }
.pgcs-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }

.pgcs-form .form-group { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.pgcs-form label { margin: 0; font-size: 13px; font-weight: 600; color: var(--pgcs-navy); }
    /* jQuery Validate writes its messages as label.error, which the rule above would turn navy. */
    .pgcs-form label.error { font-weight: 500; color: #B3261E; }

/* 16px stops iPhone Safari zooming into the field on focus. */
.pgcs-form .form-control {
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--pgcs-field);
    border-radius: 6px;
    background: #ffffff;
    font-family: inherit;
    font-size: 16px;
    color: var(--pgcs-navy);
}

    .pgcs-form .form-control:focus { border-color: var(--pgcs-navy); box-shadow: 0 0 0 3px rgba(0, 38, 62, .12); }

/* The Kendo issue list: the theme's own rules carry three classes, so these match that weight. */
.pgcs-form .k-dropdownlist.k-picker.form-control {
    height: 44px;
    padding: 0;
    border: 1px solid var(--pgcs-field);
    border-radius: 6px;
    background: #ffffff;
    box-shadow: none;
}

    .pgcs-form .k-dropdownlist.k-picker .k-input-inner { padding: 0 12px; font-family: inherit; font-size: 16px; color: var(--pgcs-navy); }
    .pgcs-form .k-dropdownlist.k-picker .k-input-button { background: transparent; border: 0; color: var(--pgcs-navy); }

.pgcs-form .pgc-btn { margin-top: 4px; }

/* Signed in: who the message is from, in place of the four detail fields. */
.pgcs-from { margin: 0; padding: 4px 14px; border-radius: 6px; border: 1px solid var(--pgcs-line); background: #ffffff; }
    .pgcs-from > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; }
    .pgcs-from > div + div { border-top: 1px solid #EDEEEF; }
    .pgcs-from dt { font-size: 13px; font-weight: 400; color: var(--pgcs-muted); }
    .pgcs-from dd { margin: 0; font-size: 14px; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.pgcs-from-fix { margin: -6px 0 0; font-size: 13px; color: var(--pgcs-body); }
    .pgcs-from-fix a { font-weight: 700; color: var(--pgcs-red); }

/* Sent: replaces the form (contact-support.js shows it with jQuery's show(), so it stays a block). */
.pgcs-sent > * + * { margin-top: 12px; }
    .pgcs-sent h2 { margin: 0; font-family: inherit; font-size: 18px; font-weight: 700; color: var(--pgcs-navy); }
    .pgcs-sent p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--pgcs-body); }
    .pgcs-sent a { font-weight: 700; color: var(--pgcs-red); }
.pgcs-icon-ok { background: var(--pgcs-ok-tint); color: var(--pgcs-ok); }

/* ---------- computers ---------- */
@media (min-width: 992px) {
    .pgcs-ways { padding: 28px 24px 8px; gap: 14px; }
    .pgcs-ways-head { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
        .pgcs-ways-head h2 { font-size: 24px; }
    .pgcs-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .pgcs-card { padding: 18px; }
    .pgcs-form-card { padding: 24px; }
    .pgcs-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
    .pgcs-form .pgc-btn { width: auto; min-width: 240px; align-self: flex-start; }
}