@font-face {
  font-family: "SantaMaria";
  src:
    local("SantaMaria"),
    url("../fonts/SantaMariaSans-Light.otf") format("opentype");
  font-weight: normal;
}
@font-face {
  font-family: "SantaMaria";
  src:
    local("SantaMaria"),
    url("../fonts/SantaMariaSans-Bold.otf") format("opentype");
  font-weight: bold;
}
@font-face {
  font-family: "GothamBook";
  src: url("../fonts/Gotham-Book.woff2 ") format("woff2");
}
@font-face {
  font-family: "GothamBook";
  src: url("../fonts/Gotham-Bold.woff2") format("woff2");
  font-weight: bold;
}

html, body, input, select, textarea { font-size: 20px; font-family: GothamBook, SantaMaria, sans-serif; }
html,body { background-color: #CE1126; margin: 0; color: #fff; }

h1, h3 { text-transform: uppercase; }
h1 { font-size: 50px; font-family: SantaMaria, sans-serif; }
h2 { font-size: 40px; font-weight: normal; font-family: SantaMaria, sans-serif; }
h3 { font-size: 30px; margin-top: 0; margin-bottom: 30px; font-family: SantaMaria, sans-serif; }
p { line-height: 150%; color: #751824; }

.form-field-description { white-space: pre-line; margin-top: 0; }
.box-light { background-color: #FFA5C3; color: #CE1126; }
.box-dark { color: #fff; background: url(/Public/Static/img/tacotajm-cheese.png) no-repeat #CE1126; background-size: 100%; }

header, main, footer {  }

fieldset { margin: 0; padding: 0; border: 0; }
fieldset+fieldset { padding-top: 60px; }
legend { display: none; }

.field-validation-error { color: #CE1126; margin-bottom: 10px; display: block; }
.upload-form .field-validation-error { margin-bottom: 20px; }
.field-validation-error:before { content: '\f06a'; font-family: "Font Awesome 5 Pro"; margin-right: 5px; }

.validation-summary-errors { background-color: #fecf38; color: #CE1126; font-size: 20px; padding: 20px; margin-bottom: 20px; }
.validation-summary-errors ul { list-style: none; padding: 0; margin: 0; }

button, input, select, label { touch-action: manipulation; }

.container { max-width: 1440px; margin: auto; box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); }


/******
    HEADER
*******/
header { padding: 7px 50px 0; }

.header-content { display: flex; padding: 0 20px; padding-top: 20px; justify-content: center; align-items: center; margin-top: 0px; }
.header-content h1,
.header-content h2 { margin: 0; }
.header-content h2 { line-height: 45px; margin-top: 10px; }

.header-content-text { max-width: 520px; }

.header-content-logo { max-width: 550px; margin: 0 -40px; margin-bottom: -60px; position: relative; }
.header-content-logo img { width: 100%; }
.header-content-logo-splash { position: absolute; right: 70px; top: 25px; font-family: SantaMaria, sans-serif; border-radius: 50%; width: 125px; height: 125px; font-size: 26px; line-height: 1em; text-align: center; background-color: #5FC4E1; color: #fff; box-shadow: 4px 6px 15.8px 0px #00000066; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.header-content-logo-splash strong { display: block; font-size: 35px; }

.header-logo, 
.footer-logo { margin: auto; max-width: 325px; }

.header-menu { display: flex; font-family: SantaMaria, sans-serif; font-weight :bold; font-size: 26px; height: 61px; margin: -7px -50px 0; align-items: center; }
.header-menu img { width: 100px; padding: 10px 0 10px 20px; }
.mobile-header-button { display: none; }
.menu-items { display: flex; list-style: none; gap: 80px; margin: 0; padding: 0; margin-left: 40px; }
.menu-items a { text-decoration: none; color: #cd1126; transition: all 0.2s ease-in-out; }
.menu-items a:hover { color: #751824; cursor: pointer; }


/******
    MAIN
*******/
.main { overflow: hidden; }
main { position: relative; }
article { position: relative; padding: 50px 0; background-color: #FFA5C3; color: #751824; }
article h3 { color: #CE1126; max-width: 600px; text-align: left; margin-left: auto; margin-right: auto; }

.action-ThankYou article { background-color: #CE1126; color: #fff; max-width: 600px; padding: 50px 25px; margin-left: auto; margin-right: auto; text-align: left !important; }
.action-ThankYou article p { color: #fff; }
.action-ThankYou article h1 { margin-top: 0; }

fieldset { padding: 50px 0; display: flex; flex-direction: column; align-items: center; }
fieldset > * { max-width: 600px; width: 100%; }

input[type="file"] { display: none; }
input[type="submit"], 
button, 
.upload-button { appearance: none; border: 0; cursor: pointer; background-color: #FFA5C3; color: #CE1126; font-family: SantaMaria, sans-serif; font-size: 26px; line-height: 22px; padding: 21px 70px; border-radius: 32px; display: inline-block;  }
.upload-button { background-color: #fff; color: #CE1126; }

.upload-form-button-wrapper {  }

.upload-image-list { display: flex; flex-wrap: wrap; gap: 30px; list-style: none; padding: 0; margin: 40px 0; }
.upload-image-list li { width: calc(50% - 15px); text-align: center; }
.upload-image-list li img { width: 100%; aspect-ratio: 1/1; max-width: unset !important; border: 2px solid #ffa5c3; box-shadow: inset #CE1126 0 0 0 3px; object-fit: cover; object-position: center; box-sizing: border-box; }
.upload-image-list button { font-size: 18px; padding: 10px 16px; background-color: #fff; color: #CE1126; }

.submit-buttons {  }
.submit-buttons input {background-color: #fff; color: #CE1126; }

.address-form label { display: none; }
.address-form { display: flex; flex-direction: column; gap: 20px; }
.address-form p { margin: 0; }
input:not([type="checkbox"]):not([type="submit"]) { border: 2px solid #FFA5C3; background-color: #fff; padding: 15px; font-size: 20px; color: #CE1126; width: 100%; box-sizing: border-box; }
input:not([type="checkbox"]):not([type="submit"])::placeholder { color: rgba(0, 0, 0, .57) }
input[type="checkbox"] { appearance: none; border: 2px solid #fff; background-color: #fff; width: 28px; height: 28px; margin: 0; transition: background-color ease .2s; }
input[type="checkbox"]:checked { background-image: url('/Public/Static/img/check-black.svg'); background-size: 22px; background-position: center; background-repeat: no-repeat; }
:focus-visible { outline: #CE1126 auto 1px; }

fieldset.Image { padding-top: 0; }
fieldset.Image .form-field-description { margin-bottom: 40px; }
fieldset.Articles { background-color: #fff; padding-bottom: 50px; }
fieldset.Articles .form-field-description { margin-bottom: 40px; }
fieldset.Contact { padding-bottom: 0; }
fieldset.Terms { padding: 0 50px; }
fieldset.Submit { padding: 0 50px; }

a { color: #751824; }

.accept-terms-checkbox { display: flex; gap: 10px; font-size: 18px; line-height: 150%; color: #751824; }
.accept-terms-checkbox label { display: block; }
.accept-terms-checkbox a { color: #751824; }

.address-form .postal-code-city { display: flex; gap: 20px; align-items: flex-end }
.address-form .postal-code-city > * { flex: 1; }
.address-form .postal-code-city > :first-child { max-width: 200px; }
.address-form .names { display: flex; gap: 20px; align-items: flex-end }
.address-form .names > * { flex: 1; }

.article-list { display: flex; flex-direction: column; list-style: none; padding: 0; margin: 0; gap: 20px; }
.article { display: flex; align-items: center; }
.article label { flex: 1; font-weight: bold; }
.article .add-button { height: 56px; width: 100px; max-width: 56px; padding: 15px; display: block; font-weight: bold; color: #751824; line-height: 30px; }
.article .remove-button { height: 56px; width: 100px; max-width: 56px; padding: 15px; display: block; font-weight: bold; color: #751824; line-height: 30px; }
.article button:disabled { opacity: .5 }
.article input[type="number"] { border: 0; width: 50px; text-align: center; padding: 0; color: #751824; font-size: 20px; font-family: GothamBook, SantaMaria, sans-serif }
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

div#CybotCookiebotDialog {
  scale: 65%;
}

/******
    FOOTER
*******/
footer {  }
.footer-content { padding: 80px 50px 80px; background-color: #fff; }
.footer-content+.footer-content { padding-top: 20px; }
.footer-content > h3 {  }
.footer-content > * { max-width: 600px; margin-left: auto; margin-right: auto; }
.footer-logo { padding: 50px 50px; }
.header-logo img, 
.footer-logo img { width: 100%; }


/******
    HTMX
*******/
.loader { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-image: url('/mox/static/svg/loader-button-black.svg'); background-position: top center; background-repeat: no-repeat; background-size: 32px; padding-top: 40px; }
.htmx-request { position: relative; }
.htmx-request > *:not(.loader) { opacity: .2; }
.htmx-request .loader { display: block; }

.mox-modal-content > * { color: #000; }


@media (pointer: coarse) {
    .article .add-button { height: 64px; width: 100px; max-width: 64px; padding: 21px; display: block; }
    .article .remove-button { height: 64px; width: 100px; max-width: 64px; padding: 21px; display: block; }
}

@media only screen and (min-width : 980px) {
    .image-1 { position: absolute; background-image: url('/Public/Static/img/tacotajm-bild-1-2.png?v=3'); width: 451.87px; height: 849.92px; left: calc(50% - 300px); transform: translateX(-100%) rotate(11.3deg); top: -100px; background-repeat: no-repeat; }
    .image-2 { position: absolute; background-image: url('/Public/Static/img/tacotajm-bild-2-2.png?v=3'); width: 499.97px; height: 940.21px; left: calc(50% + 320px); transform: rotate(.6deg); top: 335px; background-repeat: no-repeat; }

    .action-ThankYou .image-1 { top: 0; }
}

@media only screen and (max-width : 1300px) {
    .image-1 { left: calc(50% - 245px); }
    .image-2 { left: calc(50% + 300px); }
}

@media only screen and (max-width : 1223px) {
    .header-content h1 { font-size: 36px; text-align: left; margin-bottom: 8px; }
    .header-content h2 { font-size: 25px; text-align: left; line-height: 30px }

    .header-content:after { display: inline-block; color: #FFFFFF; content: '\f078'; align-self: center; font-family: "Font Awesome 5 Pro"; margin-bottom: 20px; margin-top: 20px; font-size: 26px; }


    header { padding: 0; }
    article { padding: 50px 0 }
    article h3,
    fieldset { padding-left: 25px !important; padding-right: 25px !important; }
    .footer-content { padding: 40px 25px; }
    .header-content { flex-direction: column; margin-top: 0; }
    .header-content-logo { margin: 50px 0 -50px; }
    .address-form .postal-code-city,
    .address-form .names { gap: 10px; }
    .address-form .postal-code-city > :first-child { max-width: 100%; }

    .header-menu { margin: 0; height: auto; flex-direction: column-reverse; align-items: flex-start; }
    .menu-items { margin: 0 20px; }
    .menu-items a { padding: 20px 0; display: block; font-size: 12px; font-weight: 400;}
    .header-menu img {  align-self: center; margin: 10px 0; padding: 0; }

    footer h3 { font-size: 22px; }
}

@media only screen and (max-width : 500px) {
    .header-content-logo-splash { top: -20px; right: 0; }

}