diff options
Diffstat (limited to 'views/css/smartcheckout.css')
| -rw-r--r-- | views/css/smartcheckout.css | 317 |
1 files changed, 317 insertions, 0 deletions
diff --git a/views/css/smartcheckout.css b/views/css/smartcheckout.css new file mode 100644 index 0000000..6d9ac8b --- /dev/null +++ b/views/css/smartcheckout.css @@ -0,0 +1,317 @@ +@CHARSET "UTF-8"; + +/* + * Moderner EinSeitenCheckout + * + * Die Optik hält sich bewusst zurück: Schrift, Textfarbe und Hintergrund kommen aus dem + * Theme, eigene Angaben gibt es nur dort, wo die Struktur sie braucht. Linien und Flächen + * sind neutrales Grau mit Transparenz und wirken deshalb auf hellen wie auf dunklen + * Themes. Gedämpfter Text entsteht über opacity statt über eine eigene Farbe. + * + * Die wenigen Werte liegen als Custom Properties auf .wpsg_smartcheckout und können im + * Theme überschrieben werden, ohne dass eine Regel angefasst werden muss. + */ + +.wpsg_smartcheckout { + --sc-line:rgba(127, 127, 127, 0.35); + --sc-line-soft:rgba(127, 127, 127, 0.2); + --sc-flat:rgba(127, 127, 127, 0.08); + --sc-accent:currentColor; + --sc-error:#b3261e; + --sc-radius:3px; + --sc-gap:2rem; +} + +.wpsg_smartcheckout [v-cloak], .wpsg_smartcheckout[v-cloak] { display:none; } +.wpsg_smartcheckout_noscript { padding:1rem; border-left:3px solid var(--sc-error, #b3261e); margin-bottom:1.5rem; } + +.wpsg_smartcheckout * { box-sizing:border-box; } + +/* Themes mit Inhaltskarte (z.B. Kadence "content-style-boxed") ziehen alignwide bis an den Kartenrand, der Checkout bleibt im Innenabstand */ +html body.content-style-boxed .entry-content .wpsg_smartcheckout.alignwide, +html body.content-style-boxed .entry-content .wpsg_smartcheckout_after.alignwide { margin-left:0; margin-right:0; width:auto; max-width:100%; } + +/* Layout */ +.wpsg_smartcheckout .sc_layout { display:grid; grid-template-columns:minmax(0, 1fr) 21rem; gap:var(--sc-gap); align-items:start; } +.wpsg_smartcheckout_single .sc_layout { grid-template-columns:minmax(0, 1fr); } +.wpsg_smartcheckout .sc_main { display:flex; flex-direction:column; min-width:0; } +.wpsg_smartcheckout .sc_side { position:sticky; top:1.5rem; } +.wpsg_smartcheckout_single .sc_side { position:static; } +.wpsg_smartcheckout .sc_layout.sc_busy { opacity:0.6; pointer-events:none; transition:opacity 0.15s ease-out; } + +/* Die Schritte werden nur durch eine Linie getrennt, nicht durch gerahmte Kästen */ +.wpsg_smartcheckout .sc_box { padding:var(--sc-gap) 0; border-top:1px solid var(--sc-line-soft); } +.wpsg_smartcheckout .sc_box:first-child { padding-top:0; border-top:0; } +.wpsg_smartcheckout .sc_title { margin:0 0 1.25rem 0; font-size:1.05rem; line-height:1.3; } +.wpsg_smartcheckout .sc_step { margin-right:0.5rem; font-weight:400; opacity:0.5; } + +/* Meldungen */ +.wpsg_smartcheckout .sc_messages { display:flex; flex-direction:column; gap:0.5rem; margin-bottom:var(--sc-gap); } +.wpsg_smartcheckout .sc_messages:empty { display:none; margin:0; } +.wpsg_smartcheckout .sc_message { padding:0.6rem 0.9rem; border-left:3px solid var(--sc-line); background:var(--sc-flat); } +.wpsg_smartcheckout .sc_message_error { border-left-color:var(--sc-error); } +.wpsg_smartcheckout .sc_message_message { border-left-color:#5a9e3d; } + +/* Leerer Warenkorb */ +.wpsg_smartcheckout .sc_empty { padding:2.5rem 0; } + +/* Warenkorbpositionen: jede Position steht in einem eigenen Rahmen, damit Produktvariablen und Hinweise erkennbar zum Produkt gehören */ +.wpsg_smartcheckout .sc_products { display:flex; flex-direction:column; gap:0.75rem; } +.wpsg_smartcheckout .sc_product { display:grid; grid-template-columns:auto minmax(0, 1fr) auto auto; gap:1rem; align-items:start; padding:1rem; border:1px solid var(--sc-line-soft); border-radius:var(--sc-radius); } +.wpsg_smartcheckout .sc_product_image img { display:block; width:56px; height:56px; object-fit:cover; border-radius:var(--sc-radius); } +.wpsg_smartcheckout .sc_product_name { font-weight:600; } +.wpsg_smartcheckout .sc_product_desc, +.wpsg_smartcheckout .sc_product_extra, +.wpsg_smartcheckout .sc_product_tax { font-size:0.85rem; opacity:0.7; margin-top:0.2rem; } + +/* Eingabefelder der Module (z.B. Produktvariablen) als eigene Zeile über alle Spalten der Position, innerhalb des Rahmens durch eine Linie abgesetzt */ +.wpsg_smartcheckout .sc_product_fields { grid-column:1 / -1; display:flex; flex-direction:column; gap:1rem; min-width:0; padding-top:0.75rem; border-top:1px solid var(--sc-line-soft); font-size:0.85rem; } + +/* Upload zum Produkt (wpsg_mod_orderupload) an der Warenkorbposition + * + * Das Ziel wird nach dem Hochladen vom Modul per Script neu befüllt, die Regeln hängen deshalb am + * klassischen Markup (ul, input[type=button]). Die Spezifität liegt über den Button-Regeln der Themes. + */ +.wpsg_smartcheckout .sc_upload { display:flex; flex-direction:column; gap:0.4rem; } +.wpsg_smartcheckout .sc_upload_label { font-size:0.8rem; opacity:0.7; } +.wpsg_smartcheckout .sc_upload_target { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem; } +.wpsg_smartcheckout .sc_upload_target ul { flex:1 1 100%; display:flex; flex-direction:column; gap:0.3rem; margin:0; padding:0; list-style:none; } +.wpsg_smartcheckout .sc_upload_target li { display:flex; align-items:center; gap:0.5rem; margin:0; padding:0.35rem 0.6rem; border:1px solid var(--sc-line-soft); border-radius:var(--sc-radius); } +.wpsg_smartcheckout .sc_upload_target li > a:first-child { flex:1 1 auto; min-width:0; overflow-wrap:anywhere; color:inherit; } +.wpsg_smartcheckout .sc_upload_target .size { font-size:0.8rem; opacity:0.7; } +.wpsg_smartcheckout .sc_upload_target .removeLink { flex:0 0 auto; display:flex; opacity:0.7; } +.wpsg_smartcheckout .sc_upload_target .removeLink:hover { opacity:1; } +.wpsg_smartcheckout .sc_upload_target .removeLink img { display:block; width:16px; height:16px; } +.wpsg_smartcheckout .sc_upload_target input[type="file"] { flex:1 1 14rem; min-width:0; } +.wpsg_smartcheckout .sc_upload_target input[type="button"] { flex:0 0 auto; min-height:0; margin:0; padding:0.5rem 0.9rem; border:1px solid var(--sc-line); border-radius:var(--sc-radius); background:none; color:inherit; font:inherit; font-size:0.9rem; line-height:1.2; text-transform:none; letter-spacing:normal; box-shadow:none; cursor:pointer; } +.wpsg_smartcheckout .sc_upload_target input[type="button"]:hover { background:var(--sc-flat); } +/* Der Upload startet direkt nach der Auswahl (smartcheckout.js, startUpload), der Button des Moduls wird nicht gebraucht */ +.wpsg_smartcheckout .sc_upload_target [data-sc-autoupload] { display:none; } + +/* Bestellupload (wpsg_mod_orderupload) als eigener Block unter den Kundendaten, Liste und Dateiauswahl wie beim Upload zum Produkt */ +.wpsg_smartcheckout .sc_orderupload .sc_title { margin-bottom:1rem; } +.wpsg_smartcheckout .sc_orderupload .sc_hint { margin-top:0; } +.wpsg_smartcheckout .sc_orderupload .sc_upload { font-size:0.85rem; } +.wpsg_smartcheckout .sc_upload_message { flex:1 1 100%; padding:0.35rem 0.6rem; border-left:3px solid var(--sc-line); background:var(--sc-flat); } +.wpsg_smartcheckout .sc_upload_message_error { border-left-color:var(--sc-error); } +.wpsg_smartcheckout .sc_upload_message_message { border-left-color:#5a9e3d; } +.wpsg_smartcheckout .sc_upload_wait { flex:1 1 100%; opacity:0.7; } + +/* Dateiauswahl im gesamten Checkout (Upload zum Produkt, Bestellupload) in der Optik der übrigen Felder */ +.wpsg_smartcheckout input[type="file"] { max-width:100%; color:inherit; font:inherit; font-size:0.85rem; } +.wpsg_smartcheckout input[type="file"]::file-selector-button { margin-right:0.6rem; padding:0.45rem 0.8rem; border:1px solid var(--sc-line); border-radius:var(--sc-radius); background:none; color:inherit; font:inherit; cursor:pointer; } +.wpsg_smartcheckout input[type="file"]::file-selector-button:hover { background:var(--sc-flat); } + +/* Produktvariablen an der Warenkorbposition */ +.wpsg_smartcheckout .sc_pvars { display:flex; flex-direction:column; gap:0.6rem; } +.wpsg_smartcheckout .sc_pvar { display:flex; flex-direction:column; gap:0.25rem; } +.wpsg_smartcheckout .sc_pvar_label { font-size:0.8rem; opacity:0.7; } +.wpsg_smartcheckout .sc_pvar_input { width:100%; padding:0.4rem 0.6rem; border:1px solid var(--sc-line); border-radius:var(--sc-radius); background:none; color:inherit; font:inherit; } +.wpsg_smartcheckout textarea.sc_pvar_input { resize:vertical; } +.wpsg_smartcheckout .sc_pvar_check { display:flex; align-items:flex-start; gap:0.5rem; cursor:pointer; } +.wpsg_smartcheckout .sc_pvar_check input[type="checkbox"] { flex:0 0 auto; margin:0.15rem 0 0 0; } +.wpsg_smartcheckout .sc_pvar.sc_invalid .sc_pvar_input { border-color:var(--sc-error); } +.wpsg_smartcheckout .sc_pvar.sc_invalid .sc_pvar_label, +.wpsg_smartcheckout .sc_pvar.sc_invalid .sc_pvar_check { color:var(--sc-error); opacity:1; } +.wpsg_smartcheckout .sc_product_price { text-align:right; white-space:nowrap; } +.wpsg_smartcheckout .sc_product_price_total { font-weight:600; } +.wpsg_smartcheckout .sc_product_price_single { font-size:0.8rem; opacity:0.7; } + +/* Mengenwahl */ +.wpsg_smartcheckout .sc_product_amount { display:flex; flex-direction:column; align-items:center; gap:0.35rem; } +.wpsg_smartcheckout .sc_stepper { display:inline-flex; align-items:stretch; border:1px solid var(--sc-line); border-radius:var(--sc-radius); overflow:hidden; } +.wpsg_smartcheckout .sc_stepper_btn { border:0; background:none; width:1.9rem; cursor:pointer; font:inherit; line-height:1; color:inherit; } +.wpsg_smartcheckout .sc_stepper_btn:disabled { cursor:default; opacity:0.4; } +.wpsg_smartcheckout .sc_stepper_input { width:2.8rem; border:0; text-align:center; padding:0.4rem 0; background:none; color:inherit; font:inherit; } +.wpsg_smartcheckout .sc_stepper_static { display:inline-block; padding:0.4rem 0.9rem; } +.wpsg_smartcheckout .sc_remove { border:0; background:none; padding:0; font-size:0.8rem; opacity:0.7; text-decoration:underline; cursor:pointer; color:inherit; } + +/* Warenkorbteaser: angelehnt an die Warenkorbpositionen, aber zurückhaltender */ +.wpsg_smartcheckout .sc_teaser { padding-top:1rem; border-top:1px solid var(--sc-line-soft); } +.wpsg_smartcheckout .sc_teaser_title { margin-bottom:0.5rem; font-size:0.85rem; opacity:0.7; } +.wpsg_smartcheckout .sc_teaser_item { display:flex; align-items:center; gap:0.75rem 1rem; flex-wrap:wrap; padding:0.5rem 0; font-size:0.9rem; } +.wpsg_smartcheckout .sc_teaser_image img { display:block; width:40px; height:40px; object-fit:cover; border-radius:var(--sc-radius); } +.wpsg_smartcheckout .sc_teaser_body { flex:1 1 10rem; min-width:0; } +.wpsg_smartcheckout .sc_teaser_price { font-size:0.8rem; opacity:0.7; } +.wpsg_smartcheckout .sc_teaser_action { display:flex; align-items:center; gap:0.5rem; } +.wpsg_smartcheckout .sc_teaser_amount { width:2.8rem; padding:0.45rem 0; border:1px solid var(--sc-line); border-radius:var(--sc-radius); text-align:center; background:none; color:inherit; font:inherit; } + +/* Gutschein */ +.wpsg_smartcheckout .sc_voucher { margin-top:1.5rem; } +.wpsg_smartcheckout .sc_voucher_label { display:block; margin-bottom:0.35rem; font-size:0.85rem; opacity:0.7; } +.wpsg_smartcheckout .sc_voucher_row { display:flex; gap:0.5rem; flex-wrap:wrap; } +.wpsg_smartcheckout .sc_voucher_input { flex:1 1 12rem; min-width:0; } +.wpsg_smartcheckout .sc_voucher_list { margin-top:0.75rem; display:flex; flex-direction:column; gap:0.4rem; } +.wpsg_smartcheckout .sc_voucher_item { display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap; font-size:0.9rem; } +.wpsg_smartcheckout .sc_voucher_code { font-weight:600; } +.wpsg_smartcheckout .sc_voucher_partial { opacity:0.7; } +.wpsg_smartcheckout .sc_voucher_value { margin-left:auto; } + +/* Formularfelder */ +.wpsg_smartcheckout .sc_fields { display:grid; grid-template-columns:repeat(12, 1fr); gap:0.9rem; } +.wpsg_smartcheckout .sc_field { display:flex; flex-direction:column; gap:0.3rem; grid-column:span 12; min-width:0; } +.wpsg_smartcheckout .sc_field_half { grid-column:span 6; } +.wpsg_smartcheckout .sc_field_wide { grid-column:span 8; } +.wpsg_smartcheckout .sc_field_narrow { grid-column:span 4; } +.wpsg_smartcheckout .sc_label { font-size:0.85rem; opacity:0.7; } +.wpsg_smartcheckout .sc_required { color:var(--sc-error); margin-left:0.15rem; } +.wpsg_smartcheckout .sc_input, +.wpsg_smartcheckout .sc_voucher_input, +.wpsg_smartcheckout .sc_textarea { width:100%; padding:0.55rem 0.7rem; border:1px solid var(--sc-line); border-radius:var(--sc-radius); background:none; color:inherit; font:inherit; } +.wpsg_smartcheckout .sc_textarea { resize:vertical; } +/* Auswahlfelder mit eigenem Pfeil: der Hintergrund der Felder wird zurückgesetzt, damit verschwindet ein vom Theme gezeichneter Pfeil */ +#wpsg_smartcheckout select.sc_input, +#wpsg_smartcheckout select.sc_pvar_input, +#wpsg_smartcheckout .sc_modul_extra select { -webkit-appearance:none; appearance:none; padding-right:2rem; background-color:transparent; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237f7f7f' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 0.7rem center; background-size:0.7rem auto; cursor:pointer; } +.wpsg_smartcheckout .sc_hint { margin-top:1rem; font-size:0.8rem; opacity:0.7; } +.wpsg_smartcheckout .sc_modul_login:empty, +.wpsg_smartcheckout .sc_modul_customer:empty, +.wpsg_smartcheckout .sc_modul_payment:empty { display:none; } +.wpsg_smartcheckout .sc_modul_basket, +.wpsg_smartcheckout .sc_modul_customer, +.wpsg_smartcheckout .sc_modul_payment, +.wpsg_smartcheckout .sc_modul_sum { margin-top:1rem; } +.wpsg_smartcheckout .sc_modul_sum:empty { display:none; } + +/* Modulblöcke vor dem Abschluss (Bestellvariablen, gesonderte Lieferadresse, …) + * + * Diese Module bringen das Markup des klassischen Checkouts mit (wpsg_box, wpsg_inner, + * wpsg_checkoutblock). Die Regeln dazu in frontend.css hängen an .wpsg_checkout und + * greifen hier nicht — die Felder werden deshalb an dieser Stelle auf die Optik des + * EinSeitenCheckouts gebracht. + */ +.wpsg_smartcheckout .sc_modul_extra > div + div { margin-top:var(--sc-gap); } +.wpsg_smartcheckout .sc_modul_extra h2 { margin:0 0 1.25rem 0; padding:0; font-size:1.05rem; line-height:1.3; } +.wpsg_smartcheckout .sc_modul_extra .wpsg_spacer, +.wpsg_smartcheckout .sc_modul_extra .wpsg_clear { display:none; } +.wpsg_smartcheckout .sc_modul_extra .wpsg_inner { display:flex; flex-direction:column; gap:0.9rem; } +.wpsg_smartcheckout .sc_modul_extra .wpsg_checkoutblock { display:flex; flex-direction:column; gap:0.3rem; } +.wpsg_smartcheckout .sc_modul_extra label { font-size:0.85rem; opacity:0.7; } +.wpsg_smartcheckout .sc_modul_extra .wpsg_required { color:var(--sc-error); margin-left:0.15rem; } +.wpsg_smartcheckout .sc_modul_extra input[type="text"], +.wpsg_smartcheckout .sc_modul_extra input[type="tel"], +.wpsg_smartcheckout .sc_modul_extra input[type="email"], +.wpsg_smartcheckout .sc_modul_extra input[type="number"], +.wpsg_smartcheckout .sc_modul_extra select, +.wpsg_smartcheckout .sc_modul_extra textarea { width:100%; padding:0.55rem 0.7rem; border:1px solid var(--sc-line); border-radius:var(--sc-radius); background:none; color:inherit; font:inherit; } +.wpsg_smartcheckout .sc_modul_extra .wpsg_error { border-color:var(--sc-error); } + +/* Ankreuzfelder: Kästchen und Text stehen in einer Zeile, der Text bleibt bei einem Umbruch bündig */ +.wpsg_smartcheckout .sc_modul_extra .wpsg_mod_ordervars_check label { display:flex; align-items:flex-start; gap:0.5rem; opacity:1; cursor:pointer; } +.wpsg_smartcheckout .sc_modul_extra .wpsg_mod_ordervars_check label > input[type="checkbox"] { flex:0 0 auto; width:auto; margin:0; } +.wpsg_smartcheckout .sc_modul_extra .wpsg_mod_ordervars_text { flex:1 1 auto; min-width:0; } + +/* Versand- und Zahlungsauswahl */ +.wpsg_smartcheckout .sc_choices { display:flex; flex-direction:column; gap:0.5rem; } +.wpsg_smartcheckout .sc_choice { --sc-choice-radio:1rem; --sc-choice-gap:0.6rem; display:flex; flex-direction:column; gap:0.3rem; padding:0.8rem 0.9rem; border:1px solid var(--sc-line-soft); border-radius:var(--sc-radius); cursor:pointer; } +.wpsg_smartcheckout .sc_choice_active { border-color:var(--sc-accent); background:var(--sc-flat); } +/* Kopfzeile: Radio, Logo, Bezeichnung und Preis auf einer Linie */ +.wpsg_smartcheckout .sc_choice_head { display:flex; align-items:center; gap:var(--sc-choice-gap); min-width:0; } +.wpsg_smartcheckout .sc_choice_head input[type="radio"] { flex:0 0 auto; width:var(--sc-choice-radio); height:var(--sc-choice-radio); margin:0; } +/* Feste Breite, damit die Bezeichnungen bei unterschiedlich breiten Logos bündig untereinander stehen */ +.wpsg_smartcheckout .sc_choice_logo { flex:0 0 auto; width:4.5rem; height:22px; object-fit:contain; object-position:left center; } +.wpsg_smartcheckout .sc_choice_name { flex:1 1 auto; min-width:0; font-weight:600; } +.wpsg_smartcheckout .sc_choice_price { flex:0 0 auto; margin-left:auto; white-space:nowrap; } +/* Beschreibung und Zusatzangaben darunter, bündig mit Logo bzw. Bezeichnung */ +.wpsg_smartcheckout .sc_choice_hint, +.wpsg_smartcheckout .sc_choice_extra { padding-left:calc(var(--sc-choice-radio) + var(--sc-choice-gap)); font-size:0.85rem; } +.wpsg_smartcheckout .sc_choice_hint { opacity:0.7; } + +/* Zusammenfassung */ +.wpsg_smartcheckout .sc_summary { position:relative; padding:1.25rem; border:1px solid var(--sc-line-soft); border-radius:var(--sc-radius); } +.wpsg_smartcheckout_single .sc_side { margin-top:var(--sc-gap); } +.wpsg_smartcheckout .sc_sum_rows { display:flex; flex-direction:column; gap:0.4rem; } +.wpsg_smartcheckout .sc_sum_row { display:flex; justify-content:space-between; gap:1rem; align-items:baseline; font-size:0.95rem; } +.wpsg_smartcheckout .sc_sum_value { white-space:nowrap; } +.wpsg_smartcheckout .sc_sum_note, +.wpsg_smartcheckout .sc_sum_hint { font-size:0.8rem; opacity:0.7; } +.wpsg_smartcheckout .sc_sum_hint { margin-top:0.75rem; } +.wpsg_smartcheckout .sc_sum_total { margin-top:0.5rem; padding-top:0.6rem; border-top:1px solid var(--sc-line); font-size:1.05rem; font-weight:600; } + +/* Zusatzzeilen der Module (z.B. Gesamtgewicht) bringen das Markup der klassischen Zusammenfassung mit, sie erscheinen gedämpft wie die Hinweise */ +.wpsg_smartcheckout .sc_modul_sum .overview_sum_row { display:flex; justify-content:space-between; gap:1rem; align-items:baseline; font-size:0.8rem; opacity:0.7; } +.wpsg_smartcheckout .sc_modul_sum .overview_sum_row .title, +.wpsg_smartcheckout .sc_modul_sum .overview_sum_row .value { width:auto; margin:0; font-weight:normal; } +.wpsg_smartcheckout .sc_modul_sum .overview_sum_row .value { white-space:nowrap; } +.wpsg_smartcheckout .sc_modul_sum .overview_sum_row .value + .value { display:none; } + +/* Bestellbedingungen und AGB */ +.wpsg_smartcheckout .sc_modul_conditions, +.wpsg_smartcheckout .sc_agb { margin-top:1.1rem; font-size:0.85rem; } +.wpsg_smartcheckout .sc_modul_conditions .wpsg_agb + .wpsg_agb { margin-top:0.6rem; } +/* Die Module setzen den Text als losen Textknoten ins label — Flex würde ihn zerreißen */ +.wpsg_smartcheckout .sc_modul_conditions label, +.wpsg_smartcheckout .sc_agb label { display:block; position:relative; padding-left:1.5rem; cursor:pointer; } +.wpsg_smartcheckout .sc_modul_conditions label > input[type="checkbox"], +.wpsg_smartcheckout .sc_agb label > input[type="checkbox"] { position:absolute; left:0; top:0.15rem; margin:0; } +.wpsg_smartcheckout .sc_modul_conditions .wpsg_mod_ordercondition_hint { max-height:9rem; overflow-y:auto; margin-top:0.5rem; padding:0.6rem; border:1px solid var(--sc-line-soft); border-radius:var(--sc-radius); } + +/* Fehlerhafte Eingaben */ +.wpsg_smartcheckout .sc_field.sc_invalid .sc_input, +.wpsg_smartcheckout .sc_invalid.sc_voucher_input { border-color:var(--sc-error); } +.wpsg_smartcheckout .sc_choices.sc_invalid, +.wpsg_smartcheckout .sc_modul_conditions.sc_invalid, +.wpsg_smartcheckout .sc_agb.sc_invalid { outline:1px solid var(--sc-error); outline-offset:4px; } + +/* Buttons erben Schrift und Farbe des Themes und bleiben bewusst schlicht */ +.wpsg_smartcheckout .sc_button { display:inline-flex; align-items:center; justify-content:center; padding:0.65rem 1.1rem; border:1px solid var(--sc-accent); border-radius:var(--sc-radius); background:none; color:inherit; font:inherit; cursor:pointer; } +.wpsg_smartcheckout .sc_button:hover { background:var(--sc-flat); } +.wpsg_smartcheckout .sc_button:disabled { opacity:0.5; cursor:default; } +.wpsg_smartcheckout .sc_button_secondary { padding:0.5rem 0.9rem; border-color:var(--sc-line); font-size:0.9rem; } +.wpsg_smartcheckout .sc_button_order { width:100%; margin-top:1.1rem; font-weight:600; } + +/* Ladeanzeige */ +.wpsg_smartcheckout .sc_spinner { position:absolute; top:1.25rem; right:1.25rem; } +.wpsg_smartcheckout .sc_spinner_dot { display:block; width:0.9rem; height:0.9rem; border:2px solid var(--sc-line); border-top-color:var(--sc-accent); border-radius:50%; animation:wpsg_sc_spin 0.7s linear infinite; } + +/* Layer beim Abschicken der Bestellung über der gesamten Seite */ +.wpsg_smartcheckout .sc_submitting { position:fixed; top:0; left:0; right:0; bottom:0; z-index:100001; display:flex; align-items:center; justify-content:center; padding:1rem; background-color:rgba(255, 255, 255, 0.75); cursor:wait; } +.wpsg_smartcheckout .sc_submitting_inner { display:flex; align-items:center; gap:0.75rem; padding:1rem 1.25rem; border:1px solid var(--sc-line-soft); border-radius:var(--sc-radius); background-color:#FFFFFF; color:#1d1d1d; box-shadow:0 4px 20px rgba(0, 0, 0, 0.08); } +.wpsg_smartcheckout .sc_submitting .sc_spinner_dot { width:1.2rem; height:1.2rem; } +.wpsg_smartcheckout .sc_label_hidden, +.wpsg_smartcheckout .sc_visuallyhidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } + +/* GARAN-Gewährleistungslabel */ + +.wpsg_smartcheckout .sc_garan { text-align:center; margin:1rem 0; } +.wpsg_smartcheckout .sc_garan img { display:block; max-width:100%; height:auto; } +.wpsg_smartcheckout .sc_garan_zoom { display:inline-block; padding:0; border:0; background:none; cursor:zoom-in; } +.wpsg_smartcheckout .sc_garan_zoom:focus-visible { outline:2px solid currentColor; outline-offset:2px; } +.wpsg_smartcheckout .sc_garan_lightbox { cursor:zoom-out; } +.wpsg_smartcheckout .sc_garan_lightbox .sc_garan_popup_inner { cursor:default; } +.wpsg_smartcheckout .sc_garan_popup { position:fixed; top:0; left:0; right:0; bottom:0; z-index:100000; display:flex; align-items:center; justify-content:center; padding:1rem; background-color:rgba(0, 0, 0, 0.6); } +.wpsg_smartcheckout .sc_garan_popup_inner { display:flex; flex-direction:column; max-width:600px; max-height:100%; padding:1rem; text-align:center; background-color:#FFFFFF; } +.wpsg_smartcheckout .sc_garan_popup_image { min-height:0; overflow-y:auto; } +.wpsg_smartcheckout .sc_garan_popup_image img { max-width:100%; height:auto; } +.wpsg_smartcheckout .sc_garan_popup_inner .sc_button { flex:0 0 auto; margin-top:1rem; } +.wpsg_smartcheckout .sc_product_revocation { margin-top:0.5rem; } + +@keyframes wpsg_sc_spin { + to { transform:rotate(360deg); } +} + +@media (prefers-reduced-motion: reduce) { + .wpsg_smartcheckout .sc_spinner_dot { animation:none; } + .wpsg_smartcheckout .sc_layout.sc_busy { transition:none; } +} + +/* Schmale Ansichten */ +@media (max-width: 900px) { + .wpsg_smartcheckout .sc_layout { grid-template-columns:minmax(0, 1fr); } + .wpsg_smartcheckout .sc_side { position:static; margin-top:var(--sc-gap); } +} + +@media (max-width: 600px) { + .wpsg_smartcheckout .sc_summary { padding:1rem; } + .wpsg_smartcheckout .sc_product { padding:0.75rem; } + /* Ohne Produktbild bliebe im Raster eine leere Spalte stehen, deshalb hier Flex */ + .wpsg_smartcheckout .sc_product { display:flex; flex-wrap:wrap; align-items:center; gap:0.75rem 1rem; } + .wpsg_smartcheckout .sc_product_image { flex:0 0 auto; } + .wpsg_smartcheckout .sc_product_body { flex:1 1 60%; min-width:0; } + .wpsg_smartcheckout .sc_product_fields { flex:1 1 100%; } + .wpsg_smartcheckout .sc_product_amount { flex:0 0 auto; align-items:flex-start; } + .wpsg_smartcheckout .sc_product_price { flex:1 1 auto; } + .wpsg_smartcheckout .sc_field_half, + .wpsg_smartcheckout .sc_field_wide, + .wpsg_smartcheckout .sc_field_narrow { grid-column:span 12; } +} |