{"id":33535,"date":"2023-11-02T13:31:47","date_gmt":"2023-11-02T13:31:47","guid":{"rendered":"https:\/\/redseafilmfest.com\/en\/jupiterx-codes\/cart-css\/"},"modified":"2023-11-02T13:31:47","modified_gmt":"2023-11-02T13:31:47","slug":"cart-css","status":"publish","type":"jupiterx-codes","link":"https:\/\/redseafilmfest.com\/en\/jupiterx-codes\/cart-css\/","title":{"rendered":"Cart CSS"},"content":{"rendered":"<style>\n    .cart-overlay {\n  background-color: #E23128;\n  color: white;\n  display: none;\n  height: 100%;\n  overflow: auto;\n  padding: 2vw;\n  position: fixed;\n  right: 0;\n  text-align: left;\n  top: 0;\n  width: 400px;\n  z-index: 999999;\n}\n.cart-overlay__total span{\n    display: inline-block !important;\n}\n.cart-overlay__total span:nth-child(2){\n    margin-left: 10px;\n}\n.cart-overlay h2 {\n    font-family: 'Felt-Tip' !important;\n  font-size: 2.5rem;\n  font-weight: bold;\n  letter-spacing: 0;\n  margin-bottom: 20px;\n}<\/p>\n<p>.cart-overlay > div:first-of-type {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  margin-bottom: 20px;\n}<\/p>\n<p>.cart-overlay article {\n  align-items: flex-start;\n  border-top: 1px solid #000;\n  display: flex;\n  flex-direction: row;\n  gap: 20px;\n  padding-top: 20px;\n  width: 100%;\n}<\/p>\n<p>.cart-overlay article:last-of-type {\n  border-bottom: 1px solid #000;\n  padding-bottom: 20px;\n}<\/p>\n<p>.cart-overlay .fa {\n  cursor: pointer;\n}<\/p>\n<p>.cart-overlay .item-image {\n  min-width: 54px;\n  width: 54px;\n}<\/p>\n<p>.cart-overlay .item-summary {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 8px;\n}<\/p>\n<p>.cart-overlay .item-summary h3 {\n  font-size: 16px;\n  font-weight: bold;\n  margin: 0;\n  padding: 0;\n  text-transform: none;\n}<\/p>\n<p>.cart-overlay .item-summary .quantity {\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  gap: 15px;\n}<\/p>\n<p>.cart-overlay .item-summary .quantity .fa {\n  display: block;\n  height: 32px;\n  line-height: 32px;\n  text-align: center;\n  width: 32px;\n}<\/p>\n<p>.cart-overlay .item-summary .quantity span {\n  font-weight: bold;\n}<\/p>\n<p>.cart-overlay .item-delete {\n  text-align: right;\n  width: 32px;\n}<\/p>\n<p>.cart-overlay .item-delete .fa {\n  height: 32px;\n  width: 32px;\n}<\/p>\n<p>.cart-overlay .actions {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}<\/p>\n<p>.cart-overlay .action {\n  color: white!important;\n  width: 100%;\n}<\/p>\n<p>.cart-overlay .action:hover {\n  color: #000;\n}<\/p>\n<p>.cart-breakdown {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  padding: 1vw 3vw 3vw 3vw;\n}<\/p>\n<p>.cart-breakdown article {\n  \/*align-items: center;*\/\n  border-top: 1px solid #000;\n  display: block;\n  \/*gap: 40px;*\/\n  \/*grid-template-areas: \"delete image summary showtime quantity subtotal\";*\/\n  \/*grid-template-columns: 32px 90px 20vw 12vw auto auto;*\/\n  padding: 40px 0;\n}<\/p>\n<p>.cart-breakdown article:last-of-type {\n  border-bottom: 1px solid #000;\n}<\/p>\n<p>.cart-breakdown .fa {\n  cursor: pointer;\n  display: block;\n  font-size: 22px;\n  height: 32px;\n  line-height: 32px;\n  text-align: center;\n  width: 32px;\n}<\/p>\n<p>.cart-breakdown .delete {\n  float: right;\n}<\/p>\n<p>.cart-breakdown .item-image {\n    float: left;\n    margin-right: 50px;\n}<\/p>\n<p>:lang(ar) .cart-breakdown .delete {\n  float: left;\n}<\/p>\n<p>:lang(ar) .cart-breakdown .item-image {\n    float: right;\n    margin-left: 50px;\n    margin-right: 0px;\n}\n@media(max-width: 768px) {\n    .cart-breakdown .item-image, :lang(ar) .cart-breakdown .item-image {\n        float: none;\n        margin: 0px 0px 40px 0px;\n    }\n}\n@media(max-width: 468px) {\n    .cart-breakdown .item-image img {\n        width: 100%;\n    }\n}\n.cart-breakdown .item-summary {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  grid-area: summary;\n  justify-content: center;\n}<\/p>\n<p>.cart-breakdown .item-summary h3 {\n  font-size: 30px;\n  margin: 0;\n  padding: 0;\n}<\/p>\n<p>.cart-breakdown .item-summary .location {\n  color: #e6444e;\n  font-size: 14px;\n  font-weight: bold;\n}<\/p>\n<p>.cart-breakdown .showtime {\n  display: flex;\n  flex-direction: column;\n  font-size: 22px;\n  gap: 10px;\n  grid-area: showtime;\n  justify-content: center;\n}<\/p>\n<p>.cart-breakdown .showtime .date {\n  font-weight: 600;\n}<\/p>\n<p>.cart-breakdown .quantity {\n  display: flex;\n  flex-direction: row;\n  flex: 1;\n  gap: 15px;\n  \/*grid-area: quantity;*\/\n  max-width: 200px;\n  margin: 60px 0;\n}<\/p>\n<p>.cart-breakdown .quantity input {\n  background: transparent;\n  border: none;\n  font-size: 20px;\n  max-height: 32px;\n  padding: 0;\n  text-align: center;\n  width: 30px;\n}<\/p>\n<p>.cart-breakdown .subtotal {\n  font-size: 20px;\n  font-weight: 600;\n  grid-area: subtotal;\n  justify-self: end;\n}<\/p>\n<p>.cart-breakdown .subtotal span{\n    font-family: \"Felt-Tip\" !important;\n    font-size: 40px;\n    text-transform: uppercase;\n    color: #E23128;\n}<\/p>\n<p>.cart-breakdown > label {\n  align-items: center;\n  display: grid;\n  gap: 20px;\n  grid-template-areas:\n        \"label input\"\n        \"description description\";\n  grid-template-columns: auto 250px;\n  justify-items: end;\n}<\/p>\n<p>.cart-breakdown > label > span {\n  display: block;\n  font-size: 20px;\n  font-weight: 600;\n  grid-area: label;\n}<\/p>\n<p>.cart-breakdown > label > input {\n  grid-area: input;\n}<\/p>\n<p>.cart-breakdown input {\n  appearance: none;\n  -moz-appearance: none;\n  -ms-appearance: none;\n  -webkit-appearance: none;\n  background: white;\n  border: 1px solid grey;\n  border-radius: 0;\n  color: black;\n  font-size: 16px;\n  margin: 0;\n  max-height: 40px;\n  padding: 15px;\n  width: 100%;\n}<\/p>\n<p>.cart-breakdown input:hover {\n  border-color: #444;\n  cursor: pointer;\n}<\/p>\n<p>.cart-breakdown input:focus {\n  border-color: #e6444e;\n  outline: none;\n}<\/p>\n<p>.cart-breakdown > label > p {\n  grid-area: description;\n  margin: 0;\n}<\/p>\n<p>.cart-breakdown > div {\n  display: flex;\n  flex-direction: row;\n  gap: 20px;\n  justify-content: flex-end;\n}<\/p>\n<p>.cart-breakdown .total {\n  font-size: 30px;\n  font-weight: 600;\n  gap: 10px;\n}<\/p>\n<p>.checkout-details {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  padding: 1vw 3vw 3vw 3vw;\n}<\/p>\n<p>.checkout-details form {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}<\/p>\n<p>.checkout-details label input {\n  appearance: none;\n  -moz-appearance: none;\n  -ms-appearance: none;\n  -webkit-appearance: none;\n  background: white;\n  border: 1px solid grey;\n  border-radius: 0;\n  color: black;\n  font-size: 16px;\n  margin: 0;\n  max-height: 40px;\n  padding: 15px;\n  width: 100%;\n}<\/p>\n<p>.checkout-details label input:hover {\n  border-color: #444;\n  cursor: pointer;\n}<\/p>\n<p>.checkout-details label input:focus {\n  border-color: #e6444e;\n  outline: none;\n}<\/p>\n<p>.checkout-details form > *:not(.actions) {\n  width: 50%;\n}<\/p>\n<p>.checkout-details label {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}<\/p>\n<p>.checkout-details label > span {\n  font-weight: 600;\n}<\/p>\n<p>.checkout-details .fullname {\n  display: flex;\n  flex-direction: row;\n  gap: 20px;\n}<\/p>\n<p>.checkout-details .fullname label {\n  width: 50%;\n}<\/p>\n<p>.checkout-details .actions {\n  display: flex;\n  flex-direction: row;\n  gap: 20px;\n  justify-content: flex-end;\n}<\/p>\n<p>.processing {\n  background: black;\n  color: white;\n  display: flex;\n  flex-direction: row;\n  height: 100vh;\n  justify-content: center;\n  padding: 3vw;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n  z-index: 999999;\n}<\/p>\n<p>.processing article {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  justify-content: center;\n  text-align: center;\n}<\/p>\n<p>.processing a {\n  color: #e6444e;\n  cursor: pointer;\n  display: inline-block;\n}<\/p>\n<p>.checkout-payment {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  padding: 1vw 3vw 3vw 3vw;\n}<\/p>\n<p>.checkout-payment .payment-provider {\n  position: relative;\n}<\/p>\n<p>.checkout-payment .payment-provider > svg {\n  margin: -50px auto 0 auto;\n  position: absolute;\n  top: 50%;\n  z-index: 1;\n}<\/p>\n<p>.checkout-payment .payment-provider > iframe {\n  min-height: 460px;\n  overflow: hidden;\n  position: relative;\n  width: 100%;\n  z-index: 2;\n}<\/p>\n<p>@media (max-width: 1024px) {\n  .cart-breakdown article {\n    gap: 20px;\n    grid-template-columns: 32px 54px 20vw 12vw auto auto;\n  }<\/p>\n<p>  .cart-breakdown .item-summary h3 {\n    font-size: 20px;\n  }<\/p>\n<p>  .cart-breakdown .quantity {\n    gap: 5px;\n  }<\/p>\n<p>  .cart-breakdown .showtime,\n  .cart-breakdown .subtotal {\n    font-size: 18px;\n  }<\/p>\n<p>  .checkout-details form > *:not(.actions) {\n    width: 100%;\n  }\n}<\/p>\n<p>@media (max-width: 1024px) {\n  .cart-breakdown article {\n    gap: 20px;\n    grid-template-columns: 32px 54px 20vw 12vw auto auto;\n  }<\/p>\n<p>  .cart-breakdown .item-summary h3 {\n    font-size: 20px;\n  }<\/p>\n<p>  .cart-breakdown .quantity {\n    gap: 5px;\n  }<\/p>\n<p>  .cart-breakdown .showtime,\n  .cart-breakdown .subtotal {\n    font-size: 18px;\n  }<\/p>\n<p>  .checkout-details form > *:not(.actions) {\n    width: 100%;\n  }\n}<\/p>\n<p>@media (max-width: 670px) {\n  .audience-notice {\n    padding: 8vw 8vw 0 8vw;\n  }<\/p>\n<p>  .cart-overlay {\n    padding: 8vw;\n    width: 100%;\n  }<\/p>\n<p>  .cart-overlay .action:hover {\n    background: transparent;\n    border-color: white;\n    color: white;\n  }<\/p>\n<p>  .cart-overlay .item-summary .quantity .fa {\n    cursor: pointer;\n    font-size: 20px;\n  }<\/p>\n<p>  .cart-overlay .item-delete .fa {\n    cursor: pointer;\n    font-size: 24px;\n  }<\/p>\n<p>  .cart-breakdown {\n    padding: 1vw 8vw 8vw 8vw;\n  }<\/p>\n<p>  .cart-breakdown .fa {\n    font-size: 20px;\n  }<\/p>\n<p>  .cart-breakdown article {\n    grid-template-areas:\n        \"image summary delete\"\n        \"image showtime .\"\n        \"image quantity .\"\n        \"image subtotal subtotal\";\n    grid-template-columns: 54px auto 32px;\n  }<\/p>\n<p>  .cart-breakdown .delete .fa {\n    font-size: 24px;\n  }<\/p>\n<p>  .cart-breakdown .item-image {\n    align-self: start;\n  }<\/p>\n<p>  .cart-breakdown > label {\n    gap: 10px;\n    grid-template-areas:\n        \"label\"\n        \"input\"\n        \"description\";\n    grid-template-columns: auto;\n    justify-items: end;\n  }<\/p>\n<p>  .cart-breakdown .actions {\n    flex-direction: column;\n  }<\/p>\n<p>  .checkout-details {\n    padding: 1vw 8vw 8vw 8vw;\n  }<\/p>\n<p>  .checkout-details .fullname {\n    flex-direction: column;\n  }<\/p>\n<p>  .checkout-details .fullname label {\n    width: 100%;\n  }<\/p>\n<p>  .checkout-details .actions {\n    flex-direction: column;\n  }<\/p>\n<p>  .processing {\n    padding: 8vw;\n  }<\/p>\n<p>  .checkout-payment {\n    padding: 1vw 8vw 8vw 8vw;\n  }\n}\n<\/style>\n","protected":false},"author":16,"template":"","meta":{"_acf_changed":false},"class_list":["post-33535","jupiterx-codes","type-jupiterx-codes","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/redseafilmfest.com\/en\/wp-json\/wp\/v2\/jupiterx-codes\/33535","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/redseafilmfest.com\/en\/wp-json\/wp\/v2\/jupiterx-codes"}],"about":[{"href":"https:\/\/redseafilmfest.com\/en\/wp-json\/wp\/v2\/types\/jupiterx-codes"}],"author":[{"embeddable":true,"href":"https:\/\/redseafilmfest.com\/en\/wp-json\/wp\/v2\/users\/16"}],"wp:attachment":[{"href":"https:\/\/redseafilmfest.com\/en\/wp-json\/wp\/v2\/media?parent=33535"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}