/** ********************************* **
/** *        C O N T R O L S        * **
/** ********************************* **/

:root {

/* To convert simple svg images files to url embedded svgs (see below) use website https://yoksel.github.io/url-encoder/ 
   To change the color, then set the fill eg: fill='%23FF0000' (red). 
*/
/*  
    --controls__upload    : url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='32' height='32' viewBox='0 0 32 32' xml:space='preserve' style='fill: %23000000;'><g transform='matrix(1 0 0 1 16 16)'><polygon style='fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' points='-15,7 -15,15 15,15 15,7 11,7 11,11 -11,11 -11,7' /><polygon style='fill-rule:nonzero;opacity:1;' vector-effect='non-scaling-stroke' points='0,-13 10,-4 7,-1 2,-6 2,5 -2,5 -2,-6 -7,-1 -10,-4'/></g></svg>");
    --controls__download  : url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='32' height='32' viewBox='0 0 32 32' xml:space='preserve' style='fill: %23E9322A;'><g transform='matrix(1 0 0 1 16 16)'><polygon style='fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' points='-15,7 -15,15 15,15 15,7 11,7 11,11 -11,11 -11,7' /><polygon style='fill-rule:nonzero;opacity:1;' vector-effect='non-scaling-stroke' points='0,7 11,-2 7,-5, 2,0 2,-15 -2,-15 -2,0 -7,-5 -11,-2'/></g></svg>");
*/
/*  ARROWS 1
    --controls__arrowup   : url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFF' width='32' height='32' viewBox='0 0 32 32' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0,32) scale(0.1,-0.1)' stroke='none'%3E%3Cpath d='M115 170 c-19 -38 -35 -74 -35 -80 0 -6 32 -10 80 -10 48 0 80 4 80 10 0 19 -70 150 -80 150 -5 0 -26 -31 -45 -70z'/%3E%3C/g%3E%3C/svg%3E%0A");
    --controls__arrowdown : url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' fill='%233AB54A' width='32' height='32' viewBox='0 0 32 32' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0,32) scale(0.1,-0.1)' stroke='none'%3E%3Cpath d='M80 230 c0 -19 70 -150 80 -150 10 0 80 131 80 150 0 6 -32 10 -80 10 -48 0 -80 -4 -80 -10z'/%3E%3C/g%3E%3C/svg%3E ");
*/
/*  ARROWS 2
    --controls__arrowup   : url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='32' height='32' viewBox='0 0 32 32' xml:space='preserve' style='fill: %23E9322A;'><g transform='matrix(1 0 0 1 16 16)'><polygon style='fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' points='-1,-8 -10,6 -8,8 0,-4.5 8,8 10,6 1,-8'/></g></svg>");
    --controls__arrowdown : url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='32' height='32' viewBox='0 0 32 32' xml:space='preserve' style='fill: %23E9322A;'><g transform='matrix(1 0 0 1 16 16)'><polygon style='fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' points='-8,-8 -10,-6 -1,8 1,8 10,-6 8,-8 0,4.5'/></g></svg>");
*/
/*  ARROWS 3
    --controls__arrowup   : url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='32' height='32' viewBox='0 0 32 32' xml:space='preserve' style='fill: %23000000;'><g transform='matrix(1 0 0 1 16 16)'><polygon style='fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' points='-1,-8 -10,6 -8.5,8 8.5,8 10,6 1,-8'/></g></svg>");
    --controls__arrowdown : url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='32' height='32' viewBox='0 0 32 32' xml:space='preserve' style='fill: %23000000;'><g transform='matrix(1 0 0 1 16 16)'><polygon style='fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' points='-8.5,-8 -10,-6 -1,8 1,8 10,-6 8.5,-8'/></g></svg>");
*/

    --controls__download             : url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='32' height='32' viewBox='0 0 32 32' xml:space='preserve' style='fill: %23182440;'><g transform='matrix(1 0 0 1 16 16)'><polygon style='fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' points='-15,7 -15,15 15,15 15,7 11,7 11,11 -11,11 -11,7' /><polygon style='fill-rule:nonzero;opacity:1;' vector-effect='non-scaling-stroke' points='0,7 11,-2 7,-5, 2,0 2,-15 -2,-15 -2,0 -7,-5 -11,-2'/></g></svg>");
    --controls__arrowup              : url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='32' height='32' viewBox='0 0 32 32' xml:space='preserve' style='fill: %23182440;'><g transform='matrix(1 0 0 1 16 16)'><polygon style='fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' points='-8,7 -10,6 0,-10, 10,6, 8,7, 0,-5.5'/></g></svg>");
    --controls__arrowdown            : url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='32' height='32' viewBox='0 0 32 32' xml:space='preserve' style='fill: %23182440;'><g transform='matrix(1 0 0 1 16 16)'><polygon style='fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' points='-8,-7 -10,-6 0,10, 10,-6, 8,-7, 0,5.5'/></g></svg>");

    --controls__color                : var(--site__color-text);

    --controls__color-back           : var(--site__color-light);
    --controls__color-back           : #CFE7F6;

    --controls__color-label          : var(--site__color-dark);
    --controls__color-disabled-back  : var(--site__color-disabled);
    --controls__color-placeholder    : color-mix(in srgb, var(--site__color-disabled-back) 90%, var(--site__color-dark));
    --controls__color-placeholder    : var(--site__color-text);
    --controls__placeholder-opacity  : 1;

    --controls__box-shadow           : inset 1px 1px 3px var(--site__color-neutral);
    --controls__box-shadow           : none;

    --controls__color-border-hover   : var(--controls__color-back);
    --controls__color-hover-back     : color-mix(in srgb, var(--site__color-body) 20%, var(--site__color-light));

    --controls__border               : 3px solid transparent;
    --controls__border               : none;
    --controls__border-radius        : 0.25rem;
    --controls__case                 : uppercase;
    --controls__height               : 3rem;

    --controls__button-font          : 700 1.6rem/1.2 var(--ff-regular);
    --controls__button-color         : var(--site__color-light);
    --controls__button-color-back    : var(--site__color-button-back);
    --controls__button-border-radius : 0.5rem;

    --controls__font                 : var(--fw-extrabold) 1.1rem/1.2 var(--ff-regular);
    --controls__font-placeholder     : var(--fw-light)     1.1rem/1.2 var(--ff-regular);
    --controls__font-option          : var(--fw-regular)   1.1rem/1.2 var(--ff-option);

}

/** ********************************************* **/
/** MISCELLANEOUS                                 **/
/** ********************************************* **/

.no-border {
    border                      : none;
}

/** ********************************************* **/
/** CONTAINERS                                    **/
/** ********************************************* **/

.grid-row {
    align-self                  : center;
    justify-self                : left;
}

.row,
.row-center,
.button-container {
    display                     : flex;
    align-items                 : center;
    justify-content             : left;
    gap                         : 1rem;
}

.row-center {
    justify-content             : center;
}

.button-container {
    padding-top                 : 2rem;
    justify-content             : center;
    gap                         : 2rem;
}

/** ********************************************* **/
/** LABELS                                        **/
/** ********************************************* **/

label,
.label-text {
    color                       : var(--controls__color-label);
    font-size                   : 1rem;
    line-height                 : 1.3;

    a {
        color: inherit;
        &:hover {
            color               : var(--site__color-hilite);
        }
    }

    span:first-child {
        text-transform          : var(--controls__case);
    }
}

.alert {
    display                     : block;
    font-size                   : 0.9em;
    font-weight                 : var(--fw-bold);
    line-height                 : 1.2;
    color                       : var(--site__color-alert);
    background-color            : transparent;
/*  text-shadow                 : 0 0 2px var(--site__color-button-back); */
}

/** ********************************************* **/
/** GENERIC INPUT FORMATTING                      **/
/** ********************************************* **/

.upload-panel,
input, 
select {

    width                       : 100%;
    height                      : var(--controls__height);
    padding                     : 0 0 0 0.6em;

    font                        : var(--controls__font);
    font-variation-settings     : "slnt" 0;

    color                       : var(--controls__color);
    background-color            : var(--controls__color-back);

    box-shadow                  : var(--controls__box-shadow);

    border                      : var(--controls__border);
    border-radius               : var(--controls__border-radius);

    &:hover {
        background-color        : var(--controls__color-hover-back);
        border-color            : var(--controls__color-border-hover);
    }

    &:disabled {
        font                    : var(--controls__font-placeholder);
        font-variation-settings : "slnt" 0;
        background-color        : var(--controls__color-disabled-back);
        opacity                 : 0.5;
    }

}

input {

    &::placeholder {
        font                    : var(--controls__font-placeholder);
        font-variation-settings : "slnt" 0;
        color                   : var(--controls__color-placeholder);
        text-transform          : var(--controls__case);
        opacity                 : var(--controls__placeholder-opacity);
    }

    &::selection {
        color                   : var(--site__color-light);
        background-color        : var(--site__color-text);
        opacity                 : 1;
    }

    &:-webkit-autofill,
    &:-webkit-autofill:hover, 
    &:-webkit-autofill:focus, 
    &:-webkit-autofill:active {
        -webkit-text-fill-color : var(--controls__color);
        color                   : var(--controls__color);
        background-color        : var(--controls__color-back);

        transition              : background-color 5000s ease-in-out 0s;

        font                    : var(--controls__font);
        font-variation-settings : "slnt" 0;
    }
}

select {

    -webkit-appearance          : none;
    -moz-appearance             : none;
    appearance                  : none;

    --arrow-position            : bottom 50% right 0;
    --arrow-size                : 25px 25px;

    padding                     : 0 1em 0 0.6em;

    text-indent                 : 0.01px;
    text-transform              : var(--controls__case); 
    text-overflow               : ellipsis;
    overflow                    : hidden;
    white-space                 : nowrap;

    background                  : var(--controls__color-back) var(--controls__arrowdown) no-repeat right;
    background-size             : var(--arrow-size);
    background-position         : var(--arrow-position);

    &:active, 
    &:focus {
        background              : var(--controls__color-back) var(--controls__arrowup) no-repeat right;
        background-size         : var(--arrow-size);
        background-position     : var(--arrow-position);
    }

    optgroup {
        font                    : var(--controls__font-option);
        font-weight             : var(--fw-bold);
        font-variation-settings : "slnt" 0;
        color                   : var(--site__color-hilite);
    }

    option {
        font                    : var(--controls__font-option);
        color                   : var(--site__color-dark);
        background-color        : var(--controls__color-back);

        &:active {
            font-weight         : var(--fw-bold);
            color               : var(--controls__color);
        }
    }

    &:invalid, 
    option:first-child:checked {
        font                    : var(--controls__font-placeholder);
        color                   : var(--controls__color-placeholder);
        font-variation-settings : "slnt" 0;
    }

}

.small-combo {
    option {
        font-size               : 1rem;
    }
}

/** ********************************************* **/
/** LINK BUTTON AND ASP BUTTON                    **/
/** STYLED (PROMO) BUTTON                         **/
/** ********************************************* **/

.promo-button {
    border-radius               : var(--controls__button-border-radius); /* 9999px; */
}

button,
.aspbutton,
.promo-button,
.button-container a { 
    font                        : var(--controls__button-font);
    font-variation-settings     : "slnt" 0;

    text-transform              : var(--controls__case);
    text-decoration             : none;
    word-break                  : unset;

    text-box                    : trim-both cap alphabetic;
    padding                     : 0.8rem 1.8rem;

    border                      : none;
    border-radius               : var(--controls__button-border-radius); 
    min-width                   : 12ch;
    cursor                      : pointer;

    box-shadow                  : none;

    transition                  : background-color 200ms ease-in-out,
                                  color             50ms ease-in-out;

    color                       : var(--controls__button-color);
    background-color            : var(--controls__button-color-back);

    &:hover {
        color                   : var(--controls__button-color-back);
        background-color        : var(--controls__button-color);
    }
}

/** ********************************************* **/
/** CHECK BOX                                     **/
/** RADIO BUTTON                                  **/
/** ********************************************* **/

.radio,
.checkbox {
    --_color-on                 : var(--site__color-accent);
    --_color-off                : var(--controls__color-back);

    -webkit-appearance          : none;
    -moz-appearance             : none;
    appearance                  : none;
    display                     : inline-block;
    position                    : relative;
    height                      : 1.7rem;
    width                       : 1.7rem;
    cursor                      : pointer;
    outline                     : transparent;

    color                       : var(--_color-on);
    background-color            : var(--_color-off); 
}

.checkbox:checked::before {
    position                    : relative;
    top                         : -0.05em; 
    left                        : -0.3em;
    height                      : 1.7rem;
    width                       : 1.7rem;
    text-box                    : trim-both cap alphabetic;

/*    display:grid;
    align-items: center;
    justify-content: center;*/

    font                        : bold 18px system-ui,sans-serif;
    content                     : '\02714'; /* '\02143'; '\02713';  */
}

.radio {
    --controls__border          : 4px solid transparent;

    border-radius               : 100svh;

    &:checked { 
        background-color        : var(--_color-on); 
        border-color            : var(--_color-off); 

        &:hover {
            border-color        : var(--controls__color-hover-back);
        }
    }
}

/** ********************************************* **/
/** DETAILS AND SUMMARY (ACCORDION)               **/
/** ********************************************* **/

details {

    font                     : var(--controls__font);
    font-variation-settings  : "slnt" 0;

/*    border-bottom            : 2px solid var(--site__color-hilite);*/
    font-size                : var(--fs-400);
    font-weight              : var(--fw-light);
    margin                   : 0 auto;
    overflow-y               : clip;

    &::details-content {
        block-size           : 0;
        opacity              : 0;
        transition           : block-size         500ms, 
                               opacity            500ms, 
                               content-visibility 500ms; 
        transition-behavior  : allow-discrete;
    }

    &[open]::details-content {
        block-size           : auto;
        opacity              : 1;

        @starting-style {
            block-size       : 0;
            opacity          : 0;
        }
    }

    &[open] summary::after {
        transform            : rotate(0deg);
    }

    summary {
        position             : relative; 
        anchor-name          : --summary;
        margin               : 0 auto;
        font-weight          : var(--fw-bold);
        font-size            : var(--fs-400);
        cursor               : pointer;
        width                : 100%;
        text-transform       : uppercase;

        /* for iOS */
        list-style           : none; 
        &::-webkit-details-marker { display: none; }

        &::marker { content  : ""; }

        &::after {
            content          : url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='20' height='20' viewBox='0 0 20 20' xml:space='preserve' style='fill: %23003787;'><g transform='translate(10, 13)'><polygon style='fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' points='0,-6 -10,4 -8,6 0,-2 8,6 10,4'/></g></svg>");
            /* Positions the lines */
            position         : absolute;
            top              : 20%;
            right            : -2rem;
    
            /* Anchor the shape to the summary */
            position-anchor  : --summary;
            position-area    : center right;

            transition       : transform 500ms;
            transform        : rotate(-180deg);
            transform-origin : center;
        }
    }
}

/** ********************************************* **/
/** BASIC POPOVER ANIMATION                       **/
/** ********************************************* **/

.dialog,
.popover {
    opacity                     : 0;
    translate                   : 0 40px;

    transition                  : display, opacity, translate, overlay;
    transition-behavior         : allow-discrete;
    transition-duration         : 400ms;

    &::backdrop {
        background-color        : #0000004f;
        backdrop-filter         : blur(4px);
        opacity                 : 0;
        transition              : opacity 400ms ease; 
    }

    &:open,
    &:popover-open {
        display                 : grid;
        opacity                 : 1;
        translate               : 0 0;

        &::backdrop {
            opacity             : 1;
        }

        @starting-style {
            opacity             : 0;
            translate           : 0 -40px;
            &::backdrop {
                opacity         : 0;
            }
        }
    }
}

/** ********************************************* **/
/** UPLOAD CONTROL AND PREVIEW PANEL              **/
/** ********************************************* **/

.upload-panel {
    display                    : block;
    position                   : relative;
    color                      : var(--site__color-dark);
    background-color           : var(--controls__color-back);
    text-align                 : center;
    font-size                  : inherit;
    padding                    : 0.25rem;
    height                     : auto;
}

button.upload-button {
    position                   : relative;
    display                    : grid;
    align-content              : start;
    text-align                 : center;
    text-transform             : var(--controls__case);
    font                       : var(--controls__font-placeholder);
    font-variation-settings    : "slnt" 0;
    line-height                : 1;
    padding                    : 1rem 0;
    overflow                   : hidden;
    width                      : 100%;
    height                     : 6.5rem;
    color                      : var(--controls__color);

    background                 : transparent var(--controls__download) no-repeat center bottom 1rem;
    background-color           : var(--controls__color-back);
    background-size            : 32px 40px;

    transition: color            200ms ease-in-out,
                background-color 200ms ease-in-out,
                border-color     200ms ease-in-out,
                box-shadow       200ms ease-in-out;

    &:hover {
        color                  : var(--controls__color);
        background-color       : var(--controls__color-hover-back);
    }
}

.upload-control {
    opacity                    : 0;
    position                   : absolute;
    inset                      : 0;
    height                     : 100%;
    cursor                     : pointer;
}

.upload-preview-panel {
    display                    : none;
    max-width                  : 100%;
    transition                 : height .3s ease-out;
    height                     : 0;
    overflow                   : hidden;
    background-color           : transparent;
    margin                     : auto !important;

    img {
        height                 : inherit;
        width                  : 100%;
        margin                 : auto;
    }
}

.upload-label {
    display                    : block;
    text-align                 : center;
    font-size                  : 1rem;
    font-weight                : var(--fw-light);
    line-height                : 1.8;
    color                      : var(--controls__color);
    background-color           : transparent;
    overflow                   : hidden;
}

/** ********************************************* **/
/** FOR KEYBOARD NAVIGATION AND ACCESSABILITY     **/
/** ********************************************* **/

.upload-panel:focus-within,
 select:focus-visible,
.radio:focus-visible,
.textbox:focus-visible,
.checkbox:focus-visible {
    outline                    : 2px solid var(--site__color-light);
    outline-offset             : 1px;
}

 button:focus-visible,
.aspbutton:focus-visible,
.promo-button:focus-visible,
.button-container a:focus-visible {
    outline                    : 2px solid var(--site__color-light);
    outline-offset             : 1px;
}

 a:focus-visible {
    color                      : var(--site__color-hilite);
    outline                    : none;
}