/* =========================================================
   CREATE YOUR FUNDRAISER
   =========================================================
   The two-step wizard on /fundraisers/create.

   The wizard, the buttons and the image picker came from
   create_fundraiser_page.php, which carried them in a <style> block in its
   head. They sit in a file of their own because only this one page loads
   them.

   The fields themselves do NOT come from that page. It used a floating
   label — the label sitting inside the box and lifting out of the way as you
   type — on a .form__group with line-height: 10px, which clipped the top of
   the longest label. They are the payment page's fields instead: the same
   heights, borders, focus ring and red, written out here because donate.css
   scopes its copy to .pay-panel. Keep the two in step.

   jquery.steps.css draws the wizard's own skeleton; everything here is the
   theme's colours over the top of it.
   ========================================================= */


/* ---------------------------------------------------------
   THE WIZARD: STEP HEADERS
   --------------------------------------------------------- */

.fundform .wizard {
    border: 1px solid rgb(173, 169, 169);
}

.fundform .wizard > .steps {
    text-align: center;
}

.fundform .wizard > .steps ul {
    display: flex;
    justify-content: center;
}

.fundform .wizard > .steps > ul > li {
    width: 100%;
}

.fundform .wizard > .steps a,
.fundform .wizard > .steps a:hover,
.fundform .wizard > .steps a:active {
    margin: 0;
    border-radius: 0;
    background-color: #302c51;
    color: #fff;
}

/* The step number, drawn as a circle in front of its title. */
.fundform .wizard > .steps .number {
    display: inline-block;
    width: 25px;
    height: 25px;
    margin-right: 10px;
    border-radius: 25px;
    background-color: #ff6015;
    font-size: 14px !important;
}

/* Which step you are on, and which you have finished. */
.fundform .wizard > .steps .current a,
.fundform .wizard > .steps .current a:hover,
.fundform .wizard > .steps .current a:active {
    border-bottom: 5px solid #ff6015;
}

.fundform .wizard > .steps .done a,
.fundform .wizard > .steps .done a:hover,
.fundform .wizard > .steps .done a:active {
    border-bottom: 5px solid #302c51;
}

.fundform .wizard > .steps .disabled a,
.fundform .wizard > .steps .disabled a:hover,
.fundform .wizard > .steps .disabled a:active {
    background: #eee;
    color: #eee;
    cursor: default;
}


/* ---------------------------------------------------------
   THE WIZARD: BODY AND BUTTONS
   --------------------------------------------------------- */

.fundform .wizard > .content {
    background-color: transparent !important;
    min-height: 26em;
}

.fundform .wizard > .content > .body {
    position: relative !important;
    width: 100%;
    padding: 2.5% 4%;
}

.fundform .wizard > .actions {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
}

.fundform .wizard > .actions > ul {
    display: inline-block;
    float: none;
}

.fundform .wizard > .actions a,
.fundform .wizard > .actions a:hover,
.fundform .wizard > .actions a:active {
    background-color: #ff6015;
    border-radius: 5px;
    padding: 10px 30px;
    transition: .4s;
}

.fundform .wizard > .actions a:hover {
    background-color: #302c51;
}

.fundform .wizard > .actions .disabled a,
.fundform .wizard > .actions .disabled a:hover,
.fundform .wizard > .actions .disabled a:active {
    background: #eee;
    color: #aaa;
}

.fundform .first {
    margin-right: 1px;
}


/* ---------------------------------------------------------
   THE FIELDS
   ---------------------------------------------------------
   The payment page's, rule for rule — see the note at the top.
   `.form-group` is a Bootstrap 4 class Bootstrap 5 dropped and the
   theme never defined, so it is what gives the fields their spacing
   here as it does there.
   --------------------------------------------------------- */

.fundform .form-group {
    margin-bottom: 16px;
}

.fundform .form-control,
.fundform .form-select {
    height: 46px;
    padding: 10px 14px;
    border: 1px solid #e0e0e6;
    border-radius: 5px;
    font-size: 15px;
    color: #302c51;
    transition: .2s border-color ease;
}

/* Room for the chevron Bootstrap paints inside a select, which the padding
   above would otherwise let the longest option run underneath. */
.fundform .form-select {
    padding-right: 2.25rem;
}

.fundform textarea.form-control {
    height: auto;
    line-height: 1.7;
}

.fundform .form-control::placeholder {
    color: #9a9aa5;
}

.fundform .form-control:focus,
.fundform .form-select:focus {
    border-color: #ff6015;
    box-shadow: 0 0 0 3px rgba(255, 96, 21, .15);
    outline: 0;
}


/* ---------------------------------------------------------
   WHAT IS MISSING, IN RED
   ---------------------------------------------------------
   Nothing is marked until Next or Create is pressed; after that a
   field that is still wrong stays red and clears itself as soon as
   it is filled in.
   --------------------------------------------------------- */

.fundform .form-control.is-invalid {
    border-color: #dc3545;
    /* Bootstrap's own invalid state paints a warning icon inside the field,
       which collides with the text on a box this narrow. The red border and
       the message underneath already say it. */
    background-image: none;
    padding-right: 14px;
}

/* The :not()s are not decoration. Bootstrap's own rule for an invalid select
   is .form-select.is-invalid:not([multiple]):not([size]), and without them
   this one loses on specificity and the warning icon comes back — stacked on
   top of the chevron. */
.fundform .form-select.is-invalid:not([multiple]):not([size]) {
    border-color: #dc3545;
    /* Same again, but a select has to keep its chevron — Bootstrap stacks
       the warning icon on top of it, so the chevron is restored on its own.
       (This is Bootstrap's own arrow, copied from its .form-select rule.) */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
}

/* Bootstrap hides .invalid-feedback unless a sibling is .is-invalid, and
   these messages are written by the page and by the script only when there
   is something to say, so they use a class of their own and are always
   shown. */
.fundform .field-error {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    color: #dc3545;
    line-height: 1.4;
}


/* ---------------------------------------------------------
   GOAL AMOUNT: CURRENCY IN FRONT OF THE BOX
   --------------------------------------------------------- */

.fundform .input-group-text {
    padding: 0;
    border: 1px solid #e0e0e6;
    border-radius: 5px 0 0 5px;
    background-color: #f8f8f8;
}

.fundform .input-group-text .form-select {
    width: auto;
    /* A narrow box, so the chevron sits closer in than on a full-width one. */
    padding: 10px 1.7rem 10px 12px;
    border: 0;
    background-color: transparent;
    background-position: right .4rem center;
}

/* The number field's own spinners are noise on an amount. */
.fundform input[type=number]::-webkit-outer-spin-button,
.fundform input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.fundform input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Tells the visitor what their cause supports, next to the dropdown.
   Grey, not orange: this is a note about what was chosen, and the warm
   colours on this form mean "something is wrong" (red) or "press this"
   (orange). Same grey the payment page gives its hints. */
.fundform #programtext {
    padding: 0;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #6c757d;
}


/* ---------------------------------------------------------
   THE COVER PHOTO
   ---------------------------------------------------------
   Upload one, or pick one of ours. The file input is invisible and
   stretched over its label, so the whole button opens the picker.
   --------------------------------------------------------- */

.fundform #main_img {
    border-radius: 8px;
    max-height: 340px;
    width: auto;
}

.fundform .button-wrapper {
    position: relative;
    text-align: center;
}

.fundform .button-wrapper span.label {
    position: relative;
    z-index: 0;
    display: inline-block;
    width: 100%;
    padding: 12px 0;
    border: 1px solid #e0e0e6;
    border-radius: 5px;
    color: #302c51;
    font-size: 12px;
    text-transform: uppercase;
    cursor: pointer;
    transition: .4s;
}

.fundform .button-wrapper span.label:hover {
    border-color: #ff6015;
    color: #ff6015;
}

/* The theme draws a radio circle in front of every label > span. Not here. */
.fundform .button-wrapper span.label::before {
    display: none;
}

.fundform #upload {
    display: inline-block;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 50px;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

/* The story editor, once it has replaced the textarea. CKEditor sizes itself
   to whatever it finds and the textarea it took over was full width, so it is
   told plainly. */
.fundform .cke,
.fundform .cke_chrome {
    width: 100% !important;
    border-radius: 5px;
    border-color: #e0e0e6;
}

.fundform .story-label {
    margin-bottom: 6px;
    font-size: 15px;
    color: #302c51;
}


/* ---------------------------------------------------------
   "CHOOSE ONE OF OURS" PICKER
   --------------------------------------------------------- */

.image-checkbox {
    cursor: pointer;
    box-sizing: border-box;
    border: 3px solid transparent;
    box-shadow: 0 0 4px #ccc;
    outline: 0;
    margin: 4px;
    border-radius: 12px;
    display: block;
    width: calc(100% - 8px);
}

.image-checkbox img {
    border-radius: 8px;
    width: 100%;
}

.image-checkbox i {
    display: none;
    color: #2196f3;
}

.image-checkbox-checked {
    position: relative;
    border-color: #2196f3;
}

.image-checkbox-checked i {
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
}


/* ---------------------------------------------------------
   THANK YOU
   --------------------------------------------------------- */

.fr-thankyou i {
    font-size: 40px;
}


/* ---------------------------------------------------------
   NARROW SCREENS
   --------------------------------------------------------- */

@media only screen and (max-width: 767px) {
    .fundform .wizard > .steps a,
    .fundform .wizard > .steps a:hover,
    .fundform .wizard > .steps a:active {
        font-size: 14px;
        padding: 1em 0.5em;
    }

    .fundform .wizard > .steps .number {
        margin-right: 5px;
    }

    .fundform .wizard > .content {
        min-height: 40em;
    }

    .fundform .wizard > .content > .body {
        padding: 4%;
    }
}


/* ==========================================================
   THEMED PAGE ONLY
   ----------------------------------------------------------
   Scoped to body.home-premium, set by the @section in
   fundraisers/create.blade.php, so removing that one line puts
   the page back as it was.
   ========================================================== */


/* ----------------------------------------------------------
   THE CURRENCY BOX, THE SAME HEIGHT AS THE FIELD BESIDE IT
   ----------------------------------------------------------
   PKR sits in an .input-group-text that carries a 1px border
   of its own, and the select inside it is already 46px -- the
   height every field on this form is given. The two borders
   are added on top of that, so the box came out 48px against
   the goal amount's 46px and hung 2px below it.

   Holding the box at 46px and letting the select fill it puts
   the pair level. The padding goes because the select is the
   whole of the box's content.
   ---------------------------------------------------------- */
body.home-premium .fundform .input-group-text {
    height: 46px;
    padding: 0;
    overflow: hidden;
}

body.home-premium .fundform .input-group-text .form-select {
    height: 100%;
}


/* ----------------------------------------------------------
   THE STEP NUMBERS, CENTRED IN THEIR CIRCLES
   ----------------------------------------------------------
   The 1 and the 2 are laid out as ordinary inline text inside
   a 25px circle, and the line box they sit in is 21px tall.
   That leaves the digit 2px above the middle -- measured, and
   the same on both -- which is what makes the circles look
   slightly off against their labels.

   A flex box centres the digit on both axes whatever the line
   height works out to, and vertical-align: middle sets the
   circle itself against the label beside it rather than on
   the text baseline.
   ---------------------------------------------------------- */
body.home-premium .fundform .wizard > .steps .number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
}


/* ----------------------------------------------------------
   THE WIZARD BUTTONS
   ----------------------------------------------------------
   Next and Create My Fundraiser were flat orange boxes on a
   5px radius at regular weight; Previous was a flat grey one.
   jquery.steps writes them itself, so the theme never sees a
   class it knows and they stayed as they were while every
   other button on the site became a pill.

   Next and the finish button take the theme's button exactly:
   the brand gradient with a light sweep parked off to one side
   that travels across the face on hover, 999px, bold, and a
   3px lift into a deeper glow. Both layers are backgrounds
   rather than a pseudo-element, because a pseudo-element over
   the face of a button paints out its label.
   ---------------------------------------------------------- */
body.home-premium .fundform .wizard > .actions a,
body.home-premium .fundform .wizard > .actions a:hover,
body.home-premium .fundform .wizard > .actions a:active {
    display: inline-block;
    padding: 12px 32px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.01em;
    text-decoration: none;
    overflow: hidden;
    background-color: transparent;
    background-image:
        linear-gradient(120deg, transparent 36%, rgba(255, 255, 255, 0.30) 50%, transparent 64%),
        linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
    background-size: 220% 100%, 100% 100%;
    background-position: 160% 0, 0 0;
    background-repeat: no-repeat;
    box-shadow: 0 10px 26px -10px rgba(255, 96, 21, 0.75);
    transition:
        background-position 1.125s var(--ease),
        transform 0.525s var(--ease),
        box-shadow 0.525s var(--ease);
}

body.home-premium .fundform .wizard > .actions a:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 38px -12px rgba(255, 96, 21, 0.8);
    background-position: -60% 0, 0 0;
}

/* Previous is the quiet one of the pair, and on step one it is
   disabled outright. A white pill with a hairline reads as a
   control without competing with Next; disabled, it loses the
   shadow and the lift and goes grey. */
body.home-premium .fundform .wizard > .actions .disabled a,
body.home-premium .fundform .wizard > .actions .disabled a:hover,
body.home-premium .fundform .wizard > .actions .disabled a:active {
    background-image: none;
    background-color: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    box-shadow: none;
    transform: none;
    cursor: default;
}


/* ----------------------------------------------------------
   THE PICTURE PICKER'S TWO BUTTONS
   ----------------------------------------------------------
   The modal that offers a stock photograph closed with
   Bootstrap's own grey .btn-secondary and confirmed with its
   blue .btn-primary -- the one piece of Bootstrap blue left on
   the site. "Use this picture" takes the theme's button, and
   Close becomes the same quiet pill as Previous.
   ---------------------------------------------------------- */
body.home-premium .modal .btn-primary {
    border: 0;
    border-radius: 999px;
    padding: 10px 26px;
    color: #fff;
    font-weight: 700;
    background-color: transparent;
    background-image:
        linear-gradient(120deg, transparent 36%, rgba(255, 255, 255, 0.30) 50%, transparent 64%),
        linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
    background-size: 220% 100%, 100% 100%;
    background-position: 160% 0, 0 0;
    background-repeat: no-repeat;
    box-shadow: 0 10px 26px -10px rgba(255, 96, 21, 0.75);
    transition:
        background-position 1.125s var(--ease),
        transform 0.525s var(--ease),
        box-shadow 0.525s var(--ease);
}

body.home-premium .modal .btn-primary:hover,
body.home-premium .modal .btn-primary:focus,
body.home-premium .modal .btn-primary:active {
    background-color: transparent;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 18px 38px -12px rgba(255, 96, 21, 0.8);
    background-position: -60% 0, 0 0;
}

body.home-premium .modal .btn-secondary,
body.home-premium .modal .btn-secondary:hover,
body.home-premium .modal .btn-secondary:focus,
body.home-premium .modal .btn-secondary:active {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 10px 26px;
    font-weight: 600;
    background-color: var(--surface);
    color: var(--ink-2);
    box-shadow: none;
}

body.home-premium .modal .btn-secondary:hover {
    border-color: var(--accent);
    color: var(--accent);
}