/*** General layout ***/

html { font-size: 16px; }

body {
    margin: 0;
    font-family: Noto Sans, DejaVu Sans, Helvetica, Calibri, sans-serif;
}

header {
    background: #492A1A;
    text-align: center;
    line-height: 1;
}

header a {
    text-decoration: none;
    font-weight: bold;
}

header a:hover { text-decoration: underline; }

a#site-title > img {
    display: block;
    margin: auto;
    width: 50rem;
    max-width: 100%;
}

nav {
    display: flex;
    justify-content: center;
    padding: 0.625rem;
}

nav > ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    justify-content: center;
    align-items: baseline;

    margin: 0;
    padding: 0;
    list-style-type: none;
}

nav#main-nav {
    background: #EE3465;
}

nav#main-nav a {
    color: #FFFFFF;
    text-transform: uppercase;
}

nav#user-nav {
    background: #F0F0F0;
    border-bottom: 2px solid #EE3465;
}

nav#user-nav a {
    color: #EE3465;
}

nav#user-nav input {
    /* Let the log out button overlap nav padding */
    margin: -0.625rem 0;
}

main {
    margin: auto;
    padding: 1.5rem 2rem;
    max-width: 80rem;
}

@media (max-width: 50rem) {
    main { padding: 0.75rem 1rem; }
}

main > *:first-child { margin-top: 0;}
main > *:last-child { margin-bottom: 0;}


main a {
    color: #EE3465;
    text-decoration: none;
    font-style: italic;
}

main a:hover { color: #000000; }

h1 {
    font-size: 1.75rem;
    font-weight: bold;
    border-bottom: 3px solid #EE3465;
    margin-bottom: 0.875rem;
}

h2 {
    font-size: 1.5rem;
    font-weight: bold;
    border-bottom: 1px solid #D8D8D8;
    margin-bottom: 0.75rem;
}

h3 {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 0.625rem;
}

img { vertical-align: middle; }
img.thumbnail { max-width: 64px; max-height: 64px; }

ul#flash-messages {
    border: 2px solid #EE3465;
    background: #FBDEE3;
    padding: 0.5rem 0.5rem 0.5rem 2rem;
}

*.not-applicable {
    font-style: italic;
    color: #808080;
}


/*** Forms ***/

textarea {
    display: block;
    width: 100%;
    height: 4rem;
    padding: 0.25rem;
    font-family: inherit;
    font-size: inherit;
}

textarea.date-list { width: calc(10ch + 1rem); height: 10rem; }

input[type="date"],
input[type="email"],
input[type="file"],
input[type="number"],
input[type="password"],
input[type="submit"],
input[type="text"],
input[type="url"],
button,
select {
    /* Consistency across browsers */
    box-sizing: border-box;
    height: 1.75rem;
    line-height: 1;
    font-family: inherit;
    font-size: inherit;
}

input[type="date"] { width: 9rem; }
input[type="url"] { width: 100%; }

fieldset {
    background: #F8F8F8;
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid #D8D8D8;
}

fieldset > *:first-child { margin-top: 0; }
fieldset > *:last-child { margin-bottom: 0; }
fieldset > h2 { line-height: 1; padding-bottom: 0.25rem; }

label.required::before {
    content: '* ';
    color: #EE3465;
}

p.form-instructions { margin: 0; }
p.form-note { margin: 0; font-style: italic; }

ul.form-error {
    color: #EE3465;
    margin: 0;
    padding-left: 1.5rem;
}

div.form-actions {
    display: flex;
    align-items: stretch;
    background: #F0F0F0;
    border: solid #C0C0C0;
    border-width: 2px 0;
    padding: 0.5rem 1rem;
}

div.form-actions > input + input { margin-left: 0.25rem; }
div.form-actions > *.main-action { font-weight: bold; }

*.implicit-submit {
    /* An invisible button in case submitting with enter hits the wrong one */
    display: none;
}

span.order-complexity:not(.show-complexity) { display: none; }


/*** Datepicker ***/

div.datepicker {
    display: inline-block;
    position: relative;
}

div.datepicker > input { width: calc(8ch + 2rem); }

div.datepicker-box {
    display: none;
    position: absolute;
    top: 100%;
    padding: 0.5rem;
    background: #FFFFFF;
    border: 2px solid #D8D8D8;
}

div.datepicker-box.active { display: block; }

span.datepicker-header { font-weight: bold; display: flex; }
button.datepicker-prev { order: 0; }
span.datepicker-month { order: 1; margin: auto; }
button.datepicker-next { order: 2; }

table.datepicker-calendar {
    table-layout: fixed;
    border-collapse: collapse;
    width: 0;
    margin-bottom: 0;
}

table.datepicker-calendar thead { border-bottom: none; }
table.datepicker-calendar tbody { border: 1px solid #EE3465; }
table.datepicker-calendar tr { height: auto; border: none; }

table.datepicker-calendar th {
    width: 2rem;
    border: 1px inset transparent;  /* Needs to take up space */
}

table.datepicker-calendar td {
    height: 2rem;
    border: 1px solid #EE3465;
}

table.datepicker-calendar th, table.datepicker-calendar td {
    padding: 0;
    text-align: center;
}

button.date {
    position: relative;
    border: none;
    background: none;
    padding: 0;
    height: 100%;
    width: 100%;
    font-size: 0.875rem;
}

button.date[disabled] {
    background: #FBDEE3;
    color: inherit;
}

table.datepicker-calendar td.other-month {
    opacity: 0.4;
    border-style: dotted;
}

table.datepicker-calendar td.past,
table.datepicker-calendar td.today {
    border-color: black;
}

td.past > button.date { background: #D8D8D8; }
td.today > button.date { background: #ECECEC; }

button.date.rush-order::after {
    content: '!';
    position: absolute;
    display: inline-block;
    vertical-align: super;
    padding-left: 1px;
    color: #EE3465;
    font-size: 0.75rem;
    font-weight: bold;
    line-height: 1;
}

dl.compact-dl {
    /* XXX Find a better name for this -- it's just kind of any dl whose keys
       aren't too long... */
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: baseline;
    grid-row-gap: 0.5rem;
}

dl.compact-dl dt { grid-column-start: 1; justify-self: right; margin: 0; }
dl.compact-dl dt:after { content: ':\A0'; }  /* non-breaking space necessary */
dl.compact-dl dd { grid-column-start: 2; }

dl.datepicker-legend {
    /* dl with dts on the left and dds on the right */
    /* XXX We'll probably want more dls like this in the future, keep that in
       mind */
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-column-gap: 0.25rem;
    align-items: center;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #EE3465;
}

dl.datepicker-legend dt {
    grid-column-start: 1;
    margin: 0;
}

dl.datepicker-legend dd { grid-column-start: 2; }

dt.datepicker-legend-rush { font-weight: bold; color: #EE3465; }


/*** Order form ***/

dt { font-weight: bold; }
dd + * { margin-top: 1rem; }
dd { margin-left: 0; }

dl:not(.has-subdivision-options) > *.order-subdivision-select {
    display: none;
}

dl.has-subdivision-options > *.order-subdivision-text {
    display: none;
}

ul.shipping-method-list {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

ul.shipping-method-list > li { margin-top: 0.75rem; }
ul.shipping-method-list label { display: block; }
li.shipping-method-not-applicable { display: none; }

input[type="file"] { max-width: 25rem; }

input.quantity-field { width: 100%; }

table {
    border-collapse: collapse;
    margin: 0 0 2rem 0;
    white-space: nowrap;
    max-width: 100%;
}

table#order-designs > tbody > tr { height: calc(64px + 0.5rem); }
tbody > tr + tr { border-top: 1px solid #F499A9; }

table#order-designs:not(.js) col.price-column,
table#order-designs:not(.js) tfoot {
    visibility: collapse;
}
thead, tbody { border-bottom: 2px solid #EE3465; }
th { text-align: inherit; }
td, th { padding: 0.25rem 0.75rem; }
th.file-header { width: 100%; }
tr.add-row > td { text-align: center; }
tr.add-row input { padding-left: 0.5rem; padding-right: 0.5rem; }
ul.extras {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

th.price-header, td.price-cell {
    min-width: 7ch;
    text-align: right;
}

td.remove-row-cell { padding-right: 0; }

button.remove-row,
label.remove-file-label {
    background-image: url("/static/remove.svg");
    background-size: contain;
    background-color: #F0F0F0;
    border: 1px solid #CCCCCC;
    border-radius: 12.5%;
}

button.remove-row:hover,
label.remove-file-label:hover {
    background-color: #F8F8F8;
}

button.remove-row:active,
label.remove-file-label:active {
    background-color: #E8E8E8;
}

button.remove-row {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
}

label.remove-file-label {
    width: 1rem;
    height: 1rem;
}

input.existing-file-ticky,
input.existing-file-ticky:not(:checked) ~ * {
    display: none;
}

ul.order-item-files {
    display: flex;
    flex-direction: column;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li.existing-file {
    display: flex;
    flex-direction: row;
    align-items: center;
}

li.existing-file > * + * { margin-left: 0.25rem; }

tfoot.order-totals th { text-align: right; }
tfoot.order-totals td.total-cell { font-weight: bold; }

dl.order-totals {
    grid-template-columns: max-content max-content;
    justify-items: right;
}

dt.rush-fee-label:not(.has-rush-fee),
dt.rush-fee-label:not(.has-rush-fee) + dd,
dt.shipping-discount-label:not(.has-shipping-discount),
dt.shipping-discount-label:not(.has-shipping-discount) + dd {
    display: none;
}


/*** Confirm order page ***/

p#order-confirm-warning {
    border: 2px solid #EE3465;
    background: #FBDEE3;
    padding: 0.5rem 1rem;
    font-size: 1.375rem;
}

form#order-confirm > div.form-actions > input.action-cancel {
    margin-left: auto;
}


/*** FAQ ***/
dl.faq > dd > p:first-child { margin-top: 0; }


/*** Charm info page ***/
table.pricing { text-align: right; }
table.pricing th { vertical-align: bottom; }


/*** Specialty materials ***/
img.material-lineup {
    display: block;
    margin: auto;
    width: 40rem;
    max-width: 100%;
}

ul.material-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, 10rem);
    gap: 1rem;
    justify-content: space-between;
    list-style-type: none;
    padding-left: 0;
}

@media (max-width: 34rem) {
    /* Keep three columns minimum, squishing them down if need be.

       XXX 34rem is the exact point where we have to switch over.  It would be
       nice to avoid hard-coding that, if possible... */

    ul.material-list { grid-template-columns: 1fr 1fr 1fr; }
}

ul.material-list > li > figure {
    border: 1px solid #D8D8D8;
    text-align: center;
    margin: 0;
}

ul.material-list > li > figure > img { width: 100%; }

/* XXX would be nice to cover this under something broader */
p.materials-note { font-style: italic; }


/*** Charm scan settings ***/

span.charm-link-static-part { color: #808080; }

dl.charm-links-grouped > dt {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    background: #F0F0F0;
    padding: 0.25rem 0.5rem;
}

ul.charm-links-designs {
    display: contents;
    list-style-type: none;
}

ul.charm-links-designs > li {
    display: flex;
    align-items: center;
}

ul.charm-links-designs > li > img.thumbnail {
    max-width: 32px;
    max-height: 32px;
}

dl.charm-links-grouped > dt > a {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 0.25rem 1rem;
    background: #492A1A;
    border-radius: 0.25rem;
    color: white;
    font-style: normal;
}

dl.charm-links-grouped > dt > a:hover { text-decoration: underline; }
dl.charm-links-grouped > dd { padding: 0.25rem 1rem; }

form#charm-scan-set-links label {
    display: flex;
    align-items: center;
}

fieldset#link-options label {
    border: 1px solid #D8D8D8;
    padding: 0.5rem 1rem;
}

fieldset#link-options dl { margin: 0; flex: 1; }
fieldset#link-options li + li { margin-top: 1rem; }

form#charm-scan-set-links ul:not(.form-error) {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

form#charm-scan-set-links input[type=checkbox],
form#charm-scan-set-links input[type=radio] {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 1rem;
}