/* ==========================================================================
   Be Young shared theme
   Common colours and components for redesigned pages.

   - Every class starts with "by-" so it never clashes with the old CSS
     (main1.css, bootstrap, custom.css ...).
   - Base rules (font, links, box-sizing) apply only inside an element with class
     "by-page", so linking this file on an old page changes nothing until classes
     are used. Standalone pages: <body class="by-page">. Pages inside a master
     page: wrap the content in <div class="by-page">.
   - Page specific layout goes in css/pages/<page>.css, not here.
   ========================================================================== */

:root
{
    --by-primary: #8e1f7a;
    --by-primary-dark: #5c1a6e;
    --by-primary-deep: #3f1456;
    --by-accent: #b0267f;
    --by-gradient: linear-gradient(135deg, #6d1d78 0%, #b0267f 100%);
    --by-gradient-deep: linear-gradient(140deg, #3f1456 0%, #6d1d78 48%, #b0267f 100%);

    --by-text: #2b2233;
    --by-text-soft: #3d3347;
    --by-text-muted: #6f6678;
    --by-text-faint: #a79db0;

    --by-bg: #f5f0f8;
    --by-surface: #fff;
    --by-border: #d9d2df;
    --by-border-soft: #ebe2f0;

    --by-danger: #b3261e;
    --by-danger-bg: #fdf1f1;
    --by-danger-border: #f3c7c7;

    --by-radius: 10px;
    --by-radius-lg: 16px;
    --by-shadow: 0 18px 44px rgba(63, 20, 86, 0.14);
    --by-focus-ring: 0 0 0 4px rgba(142, 31, 122, 0.14);

    --by-font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Base (opt-in with class="by-page") ---------- */
.by-page, .by-page *, .by-page *:before, .by-page *:after
{
    box-sizing: border-box;
}

.by-page
{
    font-family: var(--by-font);
    font-size: 15px;
    line-height: 1.5;
    color: var(--by-text);
    -webkit-font-smoothing: antialiased;
}

body.by-page
{
    margin: 0;
    background: var(--by-bg);
}

.by-page a
{
    color: var(--by-primary);
    text-decoration: none;
}

.by-page a:hover, .by-page a:focus
{
    color: var(--by-primary-dark);
    text-decoration: underline;
}

/* ---------- Card ---------- */
.by-card
{
    border: 1px solid var(--by-border-soft);
    border-radius: var(--by-radius-lg);
    background: var(--by-surface);
    box-shadow: var(--by-shadow);
}

.by-card-accent
{
    border-top: 4px solid var(--by-primary);
}

/* ---------- Form fields ---------- */
.by-field
{
    margin-bottom: 18px;
}

.by-field-head
{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 7px;
}

.by-label
{
    font-size: 13px;
    font-weight: 600;
    color: var(--by-text-soft);
}

.by-field-head a
{
    font-size: 13px;
    font-weight: 600;
}

.by-input-wrap
{
    position: relative;
}

.by-input, .by-captcha input[type="text"]
{
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--by-border);
    border-radius: var(--by-radius);
    background: var(--by-surface);
    font-family: inherit;
    font-size: 15px;
    color: var(--by-text);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.by-input::placeholder
{
    color: var(--by-text-faint);
}

.by-input:hover, .by-captcha input[type="text"]:hover
{
    border-color: #bfb3c9;
}

.by-input:focus, .by-captcha input[type="text"]:focus
{
    border-color: var(--by-primary);
    box-shadow: var(--by-focus-ring);
}

/* icon on the left of an input: <div class="by-input-wrap by-has-icon"><i class="fa ..."></i><input class="by-input"> */
.by-has-icon > .fa
{
    position: absolute;
    left: 15px;
    top: 50%;
    width: 16px;
    margin-top: -8px;
    font-size: 16px;
    line-height: 16px;
    text-align: center;
    color: var(--by-text-faint);
    pointer-events: none;
}

.by-has-icon .by-input
{
    padding-left: 44px;
}

/* small button inside the right edge of an input (e.g. show password) */
.by-has-action .by-input
{
    padding-right: 48px;
}

.by-input-action
{
    position: absolute;
    right: 4px;
    top: 4px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-size: 16px;
    color: #8a7f94;
    cursor: pointer;
}

.by-input-action:hover, .by-input-action:focus
{
    color: var(--by-primary);
    background: #f6eef5;
    outline: none;
}

/* dropdown: <select class="by-input by-select"> */
.by-select
{
    padding-right: 38px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238a7f94' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
}

.by-select::-ms-expand
{
    display: none;
}

/* multi-line text: <textarea class="by-input by-textarea"> */
.by-textarea
{
    height: auto;
    min-height: 110px;
    padding: 12px 14px;
    line-height: 1.5;
    resize: vertical;
}

.by-input[readonly]
{
    background: #faf7fc;
    color: var(--by-text-muted);
}

/* checkbox with text: <label class="by-check"><input type="checkbox"> <span>text</span></label> */
.by-check
{
    display: flex;
    align-items: flex-start;
    margin: 0 0 18px;
    font-size: 14px;
    font-weight: 400;
    color: var(--by-text-soft);
    cursor: pointer;
}

.by-check input[type="checkbox"]
{
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 2px 10px 0 0;
    accent-color: var(--by-primary);
    cursor: pointer;
}

/* two fields side by side: <div class="by-grid"><div class="by-field">..</div><div class="by-field">..</div></div> */
.by-grid
{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.by-grid > .by-field
{
    flex: 1 1 50%;
    min-width: 0;
    padding: 0 10px;
}

.by-section-title
{
    margin: 10px 0 18px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--by-border-soft);
    font-family: var(--by-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--by-primary-dark);
}

.by-help
{
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--by-text-muted);
}

.by-field-error
{
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #c62828;
}

/* ASP.NET validators show themselves with an inline "display:inline"; keep them on their own line */
.by-field-error[style*="inline"]
{
    display: block !important;
}

/* ---------- Captcha ----------
   Wrap the MyCaptcha_New.ascx control in <div class="by-captcha">. The control's own
   markup is left as it is (old pages use it too), so it is styled from outside;
   !important beats the inline styles inside the control. */
.by-captcha .form-group
{
    margin-bottom: 10px;
}

.by-captcha img
{
    display: block;
    max-width: 100%;
    border: 1px solid var(--by-border);
    border-radius: var(--by-radius);
}

.by-captcha label
{
    display: block;
    margin-bottom: 7px;
    font-size: 13px !important;
    font-weight: 600;
    color: var(--by-text-soft) !important;
}

.by-captcha a
{
    font-size: 13px;
    font-weight: 600;
}

/* the site renders Font-Names / Font-Size as a <font> tag inside the link */
.by-captcha a font
{
    font-family: inherit;
    font-size: inherit;
}

/* ---------- Alerts ---------- */
.by-alert
{
    display: block;
    margin-bottom: 18px;
    padding: 11px 14px;
    border: 1px solid var(--by-danger-border);
    border-radius: var(--by-radius);
    background: var(--by-danger-bg);
    font-size: 14px;
    color: var(--by-danger);
}

/* an empty asp:Label takes no space */
.by-alert:empty
{
    display: none;
}

/* status message whose colour is set from code-behind (ForeColor green / red) */
.by-notice
{
    display: block;
    margin-bottom: 18px;
    padding: 11px 14px;
    border: 1px solid var(--by-border-soft);
    border-left: 4px solid var(--by-primary);
    border-radius: var(--by-radius);
    background: #faf7fc;
    font-size: 14px;
    font-weight: 600;
}

.by-notice:empty
{
    display: none;
}

/* ---------- Buttons ---------- */
.by-btn
{
    display: inline-block;
    height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: var(--by-radius);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .3px;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
    -webkit-appearance: none;
}

/* the ".by-page a.by-btn-*" selectors keep link buttons from picking up link colours */
.by-btn, .by-page a.by-btn, .by-page a.by-btn:hover, .by-page a.by-btn:focus
{
    text-decoration: none;
}

.by-btn-primary, .by-page a.by-btn-primary, .by-page a.by-btn-primary:hover, .by-page a.by-btn-primary:focus
{
    background: var(--by-primary);
    background: var(--by-gradient);
    color: #fff;
    box-shadow: 0 8px 20px rgba(142, 31, 122, 0.28);
}

.by-btn-outline, .by-page a.by-btn-outline
{
    background: var(--by-surface);
    color: var(--by-primary);
    box-shadow: inset 0 0 0 1.5px var(--by-primary);
}

/* link buttons outside .by-page: beat the old site-wide "a:hover" colour */
a.by-btn-primary:hover, a.by-btn-primary:focus
{
    color: #fff;
    text-decoration: none;
}

.by-btn-outline:hover, a.by-btn-outline:hover, a.by-btn-outline:focus, .by-page a.by-btn-outline:hover, .by-page a.by-btn-outline:focus
{
    background: #f6eef5;
    color: var(--by-primary-dark);
}

.by-btn-primary:hover, .by-page a.by-btn-primary:hover
{
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(142, 31, 122, 0.36);
}

.by-btn:focus
{
    outline: none;
    box-shadow: 0 0 0 4px rgba(142, 31, 122, 0.3);
}

.by-btn:disabled
{
    opacity: .7;
    cursor: default;
    transform: none;
}

.by-btn-lg
{
    height: 50px;
    font-size: 16px;
    line-height: 50px;
}

.by-btn-block
{
    display: block;
    width: 100%;
}

/* small spinner for a button that is waiting: <span class="by-spinner"></span>Adding... */
.by-spinner
{
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border: 2px solid rgba(142, 31, 122, 0.25);
    border-top-color: var(--by-primary);
    border-radius: 50%;
    vertical-align: -3px;
    animation: by-spin .7s linear infinite;
}

@keyframes by-spin
{
    to
    {
        transform: rotate(360deg);
    }
}

/* ---------- Steps (1 - 2 - 3 progress) ----------
   <ol class="by-steps"><li class="is-done">..</li><li class="is-active">..</li><li>..</li></ol> */
.by-steps
{
    display: flex;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
    counter-reset: by-step;
}

.by-steps li
{
    flex: 1;
    position: relative;
    padding-top: 40px;
    list-style: none;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    color: var(--by-text-faint);
    counter-increment: by-step;
}

.by-steps li:before
{
    content: counter(by-step);
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 1;
    width: 30px;
    height: 30px;
    margin-left: -15px;
    border: 2px solid var(--by-border);
    border-radius: 50%;
    background: var(--by-surface);
    line-height: 26px;
    color: var(--by-text-faint);
}

/* connector line to the previous step */
.by-steps li + li:after
{
    content: "";
    position: absolute;
    right: 50%;
    top: 14px;
    width: 100%;
    height: 2px;
    background: var(--by-border);
}

.by-steps li.is-active, .by-steps li.is-done
{
    color: var(--by-primary);
}

.by-steps li.is-active:before, .by-steps li.is-done:before
{
    border-color: var(--by-primary);
    background: var(--by-primary);
    color: #fff;
}

.by-steps li.is-done:before
{
    content: "\2713";
}

.by-steps li.is-active:after, .by-steps li.is-done:after
{
    background: var(--by-primary);
}

/* ---------- Mobile ---------- */
@media (max-width: 767px)
{
    .by-grid > .by-field
    {
        flex-basis: 100%;
    }

    /* 16px stops iOS zooming into focused inputs */
    .by-input, .by-captcha input[type="text"]
    {
        font-size: 16px;
    }
}