/* Modern look for the old MachForm order form (#form_container / form.appnitro)
   on comanda.htm, matching the Bootstrap form on comanda-decodare-iphone.htm.
   Save as style/comanda-form-modern.css and link it in comanda.php AFTER
   cerere/css/view.css. !important is needed because view.css is very specific.
   Tested live in Chrome, 2026-10-24. */

#form_container{background:#fff!important;border:1px solid #e3e3e3!important;border-radius:8px!important;box-shadow:0 2px 10px rgba(0,0,0,.06)!important;width:100%!important;max-width:640px;margin:20px auto!important;padding:0!important;overflow:hidden}
#form_container form.appnitro{font-family:Roboto,sans-serif!important;font-size:16px!important;padding:8px 24px 24px!important;margin:0!important;background:none!important}

/* header */
#form_container .form_description{border-bottom:1px solid #eee!important;margin:0 0 12px!important;padding:12px 0!important}
#form_container .form_description h2{font-family:Vollkorn,serif!important;font-size:26px!important;color:#810988!important;margin:0 0 4px!important} /* site purple, same as page titles */
#form_container .form_description p{font-size:14px!important;color:#666!important}

/* rows: each li is a wrapping flex row so paired fields (Nume/Prenume, Marca/Model, Suma/Moneda) share the width */
#form_container ul{list-style:none!important;margin:0!important;padding:0!important;width:100%!important}
#form_container form>ul{display:flex!important;flex-wrap:wrap;column-gap:12px}
#form_container form>ul>li{flex:0 0 100%;min-width:0}
/* desktop/tablet: phone + email on one line */
@media (min-width:576px){#form_container form>ul>li#li_2,#form_container form>ul>li#li_6{flex:1 1 calc(50% - 6px);width:auto!important}}
#form_container form li{display:flex!important;flex-wrap:wrap;gap:0 12px;margin:0 0 16px!important;padding:0!important;width:100%!important;background:none!important;float:none!important;clear:both}
#form_container form li[style*="none"]{display:none!important} /* keep fields the page JS hides per brand */
#form_container form li>label.description,#form_container form li>p,#form_container form li>h3{flex:0 0 100%}
#form_container label.description{display:block!important;font-family:Roboto,sans-serif!important;font-size:15px!important;font-weight:500!important;color:#333!important;margin:0 0 6px!important;padding:0!important;border:0!important}
#form_container form li>div{flex:0 0 100%;width:100%!important;margin:0!important;padding:0!important} /* phone/email inputs are wrapped in a div */
#form_container form li>span{display:flex!important;flex-direction:column;flex:1 1 120px;margin:0!important;float:none!important;width:auto!important}
#form_container form li>span>label{font-size:12px!important;color:#888!important;margin:4px 0 0!important;padding:0!important}
#form_container form li>a{align-self:center}
#form_container p.guidelines{display:none!important}

/* inputs, like Bootstrap form-control-lg */
#form_container input.text,#form_container select.select{display:block!important;width:100%!important;max-width:none!important;height:48px!important;padding:8px 14px!important;font-family:Roboto,sans-serif!important;font-size:16px!important;color:#495057!important;background:#fff!important;border:1px solid #ced4da!important;border-radius:6px!important;box-sizing:border-box!important;transition:border-color .15s,box-shadow .15s;margin:0!important}
#form_container input.text:focus,#form_container select.select:focus{border-color:#80bdff!important;outline:0!important;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)!important}

/* IMEI row: input + "?" icon on one line */
#form_container li#li_8>div{display:flex!important;flex:0 0 100%;flex-wrap:wrap;align-items:center;gap:8px;width:100%!important;margin:0!important;padding:0!important}
#form_container li#li_8>div>input.text{flex:1 1 0!important;width:auto!important}
#form_container li#li_8>div>p.atentie{flex:0 0 100%;margin:4px 0 0!important;font-size:13px}

/* radio "Voi achita inaintea decodarii" */
#form_container form li#li_16>span{flex-direction:row;align-items:center}
#form_container form li#li_16>span>input.radio{width:18px!important;height:18px!important;margin:0 8px 0 0!important}
#form_container form li#li_16>span>label.choice{display:inline!important;font-size:15px!important;color:#333!important;margin:0!important}

/* section titles TELEFONUL / PLATA */
#form_container li.section_break{border-top:1px solid #eee!important;margin:24px 0 12px!important;padding-top:12px!important}
#form_container li.section_break h3{font-family:Vollkorn,serif!important;font-size:18px!important;color:#810988!important;text-transform:uppercase;letter-spacing:.05em}

/* submit button, same blue as the iPhone form */
#form_container li.buttons{margin-top:20px!important}
#form_container input.button_text,#saveForm{display:block!important;width:100%!important;height:48px!important;background:#007bff!important;color:#fff!important;border:0!important;border-radius:6px!important;font-family:Roboto,sans-serif!important;font-size:17px!important;cursor:pointer}
#form_container input.button_text:hover{background:#0069d9!important}

/* old 640px decorative shadow images above/below the form: cause sideways scrolling on phones */
img#top,img#bottom{display:none!important}

/* view.css adds a clearfix "." after each li; in flex layout it steals width from paired fields */
#form_container form li::after,#form_container form li::before{display:none!important}

/* "lights up": soft purple-tinted card shadow, glow while the form is being filled in,
   purple focus ring on the active field and its label */
#form_container{transition:box-shadow .35s ease,transform .35s ease,border-color .35s ease!important;box-shadow:0 1px 2px rgba(129,9,136,.06),0 8px 24px rgba(129,9,136,.08)!important}
#form_container:focus-within{border-color:rgba(129,9,136,.35)!important;box-shadow:0 0 0 1px rgba(129,9,136,.15),0 0 28px rgba(129,9,136,.22),0 14px 36px rgba(0,123,255,.10)!important}
#form_container input.text:focus,#form_container select.select:focus{border-color:#810988!important;box-shadow:0 0 0 3px rgba(129,9,136,.15),0 0 14px rgba(129,9,136,.18)!important}
#form_container label.description{transition:color .2s}
#form_container form li:focus-within>label.description{color:#810988!important}
#form_container input.button_text{transition:background .2s,box-shadow .2s,transform .2s!important}
/* hover effects only on devices with a mouse (no "stuck" hover after a tap on phones) */
@media (hover:hover){
#form_container:hover{transform:translateY(-2px)}
#form_container:hover:not(:focus-within){box-shadow:0 2px 4px rgba(129,9,136,.08),0 14px 36px rgba(129,9,136,.14)!important}
#form_container input.text:hover:not(:focus),#form_container select.select:hover:not(:focus){border-color:#b98bbd!important}
#form_container input.button_text:hover{box-shadow:0 6px 18px rgba(0,123,255,.35)!important;transform:translateY(-1px)}
}
@media (prefers-reduced-motion:reduce){#form_container,#form_container *{transition:none!important;transform:none!important}}

/* IMEI: bigger, bold, spaced digits so the client can check them one by one */
#form_container input[name=IMEI]{font-size:20px!important;font-weight:600!important;letter-spacing:.12em!important;font-variant-numeric:tabular-nums;color:#212529!important}

/* submit button in the site purple: dark gradient, purple glow on hover, pressed effect on click/tap */
#form_container input.button_text,#saveForm{background:linear-gradient(135deg,#9b1fa3 0%,#810988 55%,#5e0663 100%)!important;letter-spacing:.03em;font-weight:500!important;box-shadow:0 4px 12px rgba(129,9,136,.25)!important}
@media (hover:hover){#form_container input.button_text:hover,#saveForm:hover{background:linear-gradient(135deg,#a52aad 0%,#8e0a96 55%,#6a0770 100%)!important;box-shadow:0 6px 20px rgba(129,9,136,.45)!important}}
#form_container input.button_text:active,#saveForm:active{transform:translateY(1px)!important;box-shadow:0 2px 6px rgba(129,9,136,.35)!important}
#form_container input.button_text:focus-visible,#saveForm:focus-visible{outline:0!important;box-shadow:0 0 0 3px rgba(129,9,136,.35),0 6px 20px rgba(129,9,136,.45)!important}
#form_container input.radio{accent-color:#810988}

/* phones */
@media (max-width:575px){
#form_container form.appnitro{padding:8px 16px 16px!important}
#form_container select.select{padding:8px 6px 8px 10px!important}
/* Nume / Prenume: one under the other, full width (side by side they were too short) */
#form_container form li#li_1{row-gap:12px}
#form_container form li#li_1>span{flex:0 0 100%}
}