/* UltimaReifenKonfigurator Storefront Styles */
/* Vorkompiliert für Shopware 6.7 */

/* Tire Configurator Component */
.cms-element-ultima-tire-configurator{width:100%}
.cms-element-ultima-tire-configurator *{margin:0;padding:0;box-sizing:border-box}
.tire-finder-wrapper{width:100%;position:relative}
.tire-finder-container{width:100%;background:#fff;border-radius:22px;border:1px solid #E3E3E3;display:flex;position:relative;min-height:500px;overflow:hidden}
.content-wrapper{width:100%;display:flex;position:relative}
.left-section{width:60%;padding:40px 20px 40px 50px;display:flex;flex-direction:column;position:relative;z-index:2;background:#fff}
.right-section{position:absolute;right:-18%;top:50%;transform:translateY(-50%);width:500px;height:500px;z-index:1}
.logo-container{margin-bottom:20px;display:flex;justify-content:flex-start}
.logo-container .logo{width:160px;height:auto;object-fit:contain}
.title{font-size:20px;font-weight:500;color:#262626;text-align:center;margin:0 auto 24px;max-width:460px;align-self:center}
.form-container{display:flex;flex-direction:column;width:100%;max-width:460px;margin:0 auto}
.form-row{display:flex;gap:12px;margin-bottom:18px;width:100%}
.form-row.single{gap:0}
.input-wrapper{position:relative;flex:1}
.input-wrapper.full-width{width:100%}
.input-wrapper.open .arrow-icon,.input-wrapper:focus-within .arrow-icon{transform:rotate(180deg)}
.input-wrapper.open .dropdown,.input-wrapper:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.input-wrapper.portal-open .dropdown{display:none!important}
.input-label{font-size:14px;color:rgba(18,18,18,.38);margin-bottom:4px;display:block;font-weight:400}
.input-field{width:100%;padding:12px 14px;border:1px solid rgba(38,38,38,.77);border-radius:12px;background:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:.2s ease;position:relative;min-height:46px;user-select:none;outline:none;z-index:2}
.input-field:hover{border-color:#FEA000}
.input-value{display:flex;align-items:center;gap:6px;font-size:14px;color:#262626;font-weight:400}
.season-emoji{width:20px;height:20px;object-fit:contain}
.arrow-icon{width:20px;height:20px;transition:transform .2s ease;color:#262626;flex-shrink:0}
.dropdown{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid rgba(38,38,38,.77);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.18);z-index:10000;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .18s ease;padding:8px}
.dropdown-content{max-height:160px;overflow-y:auto;scrollbar-gutter:stable}
.dropdown-content::-webkit-scrollbar{width:6px}
.dropdown-content::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}
.dropdown-content::-webkit-scrollbar-thumb{background:#ccc;border-radius:10px}
.dropdown-content::-webkit-scrollbar-thumb:hover{background:#999}
.dropdown-item{display:flex;align-items:center;gap:8px;font-size:14px;color:#262626;padding:10px 12px;margin-bottom:2px;border-radius:8px;cursor:pointer;transition:background-color .15s ease}
.dropdown-item:hover{background:#f8f8f8}
.dropdown-item.is-selected{background:#EEE;font-weight:500}
.dropdown-portal{position:fixed;left:0;top:0;width:200px;background:#fff;border:1px solid rgba(38,38,38,.77);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.18);padding:8px;z-index:2147483647;opacity:0;transform:translateY(-8px);transition:opacity .18s ease,transform .18s ease;max-height:160px;overflow:hidden}
.dropdown-portal .dropdown-content{max-height:160px;overflow-y:auto}
.dropdown-portal.show{opacity:1;transform:translateY(0)}

/* Dynamic field values with CSS */
#season-summer:checked ~ #season-field{--season-text:"Sommerreifen";--season-emoji:url('/bundles/ultimareifenkonfigurator/images/sun.webp')}
#season-winter:checked ~ #season-field{--season-text:"Winterreifen";--season-emoji:url('/bundles/ultimareifenkonfigurator/images/snowflake.webp')}
#season-allseason:checked ~ #season-field{--season-text:"Ganzjahresreifen";--season-emoji:url('/bundles/ultimareifenkonfigurator/images/sun-rain.webp')}
#season-field .input-value img,#season-field .input-value span{display:none}
#season-field .input-value::before{content:"";width:20px;height:20px;display:inline-block;background-image:var(--season-emoji);background-size:contain;background-repeat:no-repeat;margin-right:6px}
#season-field .input-value::after{content:var(--season-text,"Sommerreifen")}

/* Width field */
#width-field .input-value>span{visibility:hidden;width:0}
#width-field .input-value::after{content:var(--width,"205")}
#width-Alle:checked ~ #width-field{--width:"Alle"}
#width-145:checked ~ #width-field{--width:"145"}
#width-155:checked ~ #width-field{--width:"155"}
#width-165:checked ~ #width-field{--width:"165"}
#width-175:checked ~ #width-field{--width:"175"}
#width-185:checked ~ #width-field{--width:"185"}
#width-195:checked ~ #width-field{--width:"195"}
#width-205:checked ~ #width-field{--width:"205"}
#width-215:checked ~ #width-field{--width:"215"}
#width-225:checked ~ #width-field{--width:"225"}
#width-235:checked ~ #width-field{--width:"235"}
#width-245:checked ~ #width-field{--width:"245"}
#width-255:checked ~ #width-field{--width:"255"}
#width-265:checked ~ #width-field{--width:"265"}
#width-275:checked ~ #width-field{--width:"275"}
#width-285:checked ~ #width-field{--width:"285"}
#width-295:checked ~ #width-field{--width:"295"}
#width-305:checked ~ #width-field{--width:"305"}
#width-315:checked ~ #width-field{--width:"315"}
#width-325:checked ~ #width-field{--width:"325"}

/* Height field */
#height-field .input-value>span{visibility:hidden;width:0}
#height-field .input-value::after{content:var(--height,"55")}
#height-Alle:checked ~ #height-field{--height:"Alle"}
#height-25:checked ~ #height-field{--height:"25"}
#height-30:checked ~ #height-field{--height:"30"}
#height-35:checked ~ #height-field{--height:"35"}
#height-40:checked ~ #height-field{--height:"40"}
#height-45:checked ~ #height-field{--height:"45"}
#height-50:checked ~ #height-field{--height:"50"}
#height-55:checked ~ #height-field{--height:"55"}
#height-60:checked ~ #height-field{--height:"60"}
#height-65:checked ~ #height-field{--height:"65"}
#height-70:checked ~ #height-field{--height:"70"}
#height-75:checked ~ #height-field{--height:"75"}
#height-80:checked ~ #height-field{--height:"80"}
#height-85:checked ~ #height-field{--height:"85"}
#height-90:checked ~ #height-field{--height:"90"}

/* Rim field */
#rim-field .input-value>span{visibility:hidden;width:0}
#rim-field .input-value::after{content:var(--rim,"16")}
#rim-Alle:checked ~ #rim-field{--rim:"Alle"}
#rim-10:checked ~ #rim-field{--rim:"10"}
#rim-12:checked ~ #rim-field{--rim:"12"}
#rim-13:checked ~ #rim-field{--rim:"13"}
#rim-14:checked ~ #rim-field{--rim:"14"}
#rim-15:checked ~ #rim-field{--rim:"15"}
#rim-16:checked ~ #rim-field{--rim:"16"}
#rim-17:checked ~ #rim-field{--rim:"17"}
#rim-18:checked ~ #rim-field{--rim:"18"}
#rim-19:checked ~ #rim-field{--rim:"19"}
#rim-20:checked ~ #rim-field{--rim:"20"}
#rim-21:checked ~ #rim-field{--rim:"21"}
#rim-22:checked ~ #rim-field{--rim:"22"}
#rim-23:checked ~ #rim-field{--rim:"23"}
#rim-24:checked ~ #rim-field{--rim:"24"}

/* Tire visualization */
.tire-wrapper{position:relative;width:100%;height:100%}
.tire-background{position:absolute;inset:0;background:#F2F2F2;border-radius:50%}
.tire-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:rotate(0)}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
.tire-finder-container:has(#season-summer:checked) .tire-img.summer{opacity:1;animation:spin .6s ease}
.tire-finder-container:has(#season-winter:checked) .tire-img.winter{opacity:1;animation:spin .6s ease}
.tire-finder-container:has(#season-allseason:checked) .tire-img.all{opacity:1;animation:spin .6s ease}

/* Submit button */
.submit-button{width:100%;padding:16px;background:#FEA000;border:0;border-radius:76px;color:#fff;font-size:20px;font-weight:700;cursor:pointer;transition:.3s ease;margin-top:8px;user-select:none;position:relative;z-index:2}
.submit-button:hover{background:#ff9800;transform:translateY(-2px);box-shadow:0 4px 12px rgba(254,160,0,.3)}
.submit-button:active{transform:translateY(0)}
@keyframes successPulse{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}
.submit-button.success{animation:successPulse .5s ease;background:#4caf50}

/* Responsive design */
@media (max-width:1200px){
  .left-section{width:65%}
  .right-section{right:-20%;width:450px;height:450px}
}
@media (max-width:968px){
  .tire-finder-container{flex-direction:column;min-height:auto}
  .content-wrapper{flex-direction:column}
  .left-section{width:100%;padding:30px}
  .form-container{max-width:100%}
  .right-section{position:relative;width:100%;height:300px;right:0;top:auto;transform:none;background:#F2F2F2;display:flex;align-items:center;justify-content:center;order:-1}
  .logo-container{margin-bottom:20px;justify-content:center}
  .logo{width:140px}
  .title{max-width:100%}
}
@media (max-width:640px){
  .form-row{flex-direction:column;gap:18px}
  .left-section{padding:20px}
  .title{font-size:18px;margin-bottom:20px}
  .right-section{height:250px}
}

/* EU Label styles are already in separate files */