/* decodare.info: site-wide modern forms, buttons, price table and mobile fixes.
   Linked in index.php right after style.css. v1, 2026-10-24.
   The old MachForm order form (#form_container / form.appnitro) has its own file:
   comanda-form-modern.css. !important is used where page-level <style> blocks
   (which come later in the body) or inline styles set fixed widths. */

:root {
  --dp: #810988;          /* site purple */
  --dp-light: #9b1fa3;
  --dp-dark: #5e0663;
  --dp-soft: rgba(129, 9, 136, .08);
  --dp-ring: rgba(129, 9, 136, .15);
  --line: #ced4da;
  --text: #333;
  --muted: #6c757d;
}

/* ---------- 1. No sideways scrolling ---------- */

/* sidebar links were forced to one line; long titles pushed the page wider */
#sidebar li li a,
#sidebar li li span { white-space: normal !important; overflow-wrap: anywhere; }
/* sidebar rows use line-height:45px for spacing; a wrapped link keeps normal line spacing */
#sidebar li li a { display: inline-block; line-height: 1.4; vertical-align: middle; }

.post img, .entry img { max-width: 100%; height: auto; }
.entry iframe, .entry video, .entry embed { max-width: 100%; }

/* ---------- 2. Form fields (all content forms except the MachForm one) ---------- */

form:not(.appnitro):not(.form-inline) input[type=text],
form:not(.appnitro):not(.form-inline) input[type=email],
form:not(.appnitro):not(.form-inline) input[type=number],
form:not(.appnitro):not(.form-inline) input[type=tel],
form:not(.appnitro):not(.form-inline) input[type=password],
form:not(.appnitro):not(.form-inline) input:not([type]),
form:not(.appnitro):not(.form-inline) select,
form:not(.appnitro):not(.form-inline) textarea,
input.plata, input.contact-form, textarea.contact-form {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 48px;
  padding: 10px 14px !important;
  font: 16px/1.4 Roboto, sans-serif !important;   /* 16px also stops iPhone zooming in on focus */
  color: #495057 !important;
  text-align: left !important;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}
form:not(.appnitro):not(.form-inline) textarea,
textarea.contact-form { min-height: 120px !important; height: auto !important; resize: vertical; }

form:not(.appnitro):not(.form-inline) input:focus,
form:not(.appnitro):not(.form-inline) select:focus,
form:not(.appnitro):not(.form-inline) textarea:focus,
input.plata:focus, .contact-form:focus {
  outline: 0 !important;
  border-color: var(--dp) !important;
  box-shadow: 0 0 0 3px var(--dp-ring), 0 0 14px rgba(129, 9, 136, .18) !important;
}

/* the old yellow hover on every field */
input:hover, textarea:hover { background: #fff; }
@media (hover: hover) {
  form:not(.appnitro):not(.form-inline) input:hover:not(:focus):not(:disabled),
  form:not(.appnitro):not(.form-inline) textarea:hover:not(:focus),
  .contact-form:hover:not(:focus) { border-color: #b98bbd !important; }
}

input:disabled, textarea:disabled, select:disabled,
input.plata:disabled { background: #f5f3f6 !important; color: #444 !important; cursor: default; }

/* IMEI fields everywhere: bigger, bold digits */
input#imei, input[name=imei], input[name=IMEI] {
  font-size: 20px !important; font-weight: 600 !important; letter-spacing: .12em !important;
  font-variant-numeric: tabular-nums;
}
input#imei::placeholder, input[name=imei]::placeholder, input[name=IMEI]::placeholder {
  font-size: 16px; font-weight: 400; letter-spacing: normal;
}

/* Bootstrap large fields (iPhone and "remote" forms): same rounded look */
.form-control-lg { border-radius: 6px; }

/* ---------- 3. Forms laid out in tables ---------- */

form:not(.appnitro) table { width: 100%; border-collapse: separate; border-spacing: 0 10px; }
form:not(.appnitro) td { vertical-align: middle; padding: 0 10px 0 0; border: 0; }
form:not(.appnitro) td:first-child { color: var(--text); font-weight: 500; white-space: nowrap; }
div#insert_comment { margin-left: 0; max-width: 640px; }

/* ---------- 4. Buttons ---------- */

/* main action of a form: purple, same as the order forms */
form:not(.appnitro):not(.form-inline) input[type=submit],
form:not(.appnitro):not(.form-inline) input[type=button],
form:not(.appnitro):not(.form-inline) button:not(.btn-link):not(.close):not([data-toggle]),
form:not(.appnitro):not(.form-inline) .but_decodare,
.btn-primary {
  display: inline-block;
  min-height: 48px;
  min-width: 200px;
  padding: 10px 28px !important;
  font: 500 17px/1.2 Roboto, sans-serif !important;
  letter-spacing: .03em;
  color: #fff !important;
  text-shadow: none !important;
  background: linear-gradient(135deg, var(--dp-light) 0%, var(--dp) 55%, var(--dp-dark) 100%) !important;
  border: 0 !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(129, 9, 136, .25) !important;
  cursor: pointer;
  transition: box-shadow .2s, transform .2s, filter .2s;
}
@media (hover: hover) {
  form:not(.appnitro):not(.form-inline) input[type=submit]:hover:not(:disabled),
  form:not(.appnitro):not(.form-inline) input[type=button]:hover,
  form:not(.appnitro):not(.form-inline) button:not(.btn-link):hover,
  form:not(.appnitro):not(.form-inline) .but_decodare:hover,
  .btn-primary:hover {
    color: #fff !important;
    filter: brightness(1.08);
    box-shadow: 0 6px 20px rgba(129, 9, 136, .45) !important;
    transform: translateY(-1px);
  }
}
.btn-primary:focus, .btn-primary:active { box-shadow: 0 0 0 3px var(--dp-ring) !important; }
form:not(.appnitro) input[type=submit]:disabled {
  background: #ddd !important; color: #888 !important; box-shadow: none !important; cursor: not-allowed;
}
form:not(.appnitro) input[type=radio], form:not(.appnitro) input[type=checkbox] { accent-color: var(--dp); }

/* link-buttons outside forms (price page shortcuts, "Comanda ..." links): purple outline pills */
.but_decodare,
.entry a.btn-outline-secondary {
  display: inline-block;
  margin: 4px 6px 4px 0;
  padding: 8px 16px !important;
  font: 500 14px/1.3 Roboto, sans-serif;
  color: var(--dp) !important;
  text-shadow: none !important;
  background: #fff !important;
  border: 1px solid var(--dp) !important;
  border-radius: 999px !important;
  filter: none;
  white-space: normal;
  max-width: 100%;
  text-align: center;
  transition: background .15s, color .15s;
}
@media (hover: hover) {
  .but_decodare:hover, .entry a.btn-outline-secondary:hover { background: var(--dp) !important; color: #fff !important; }
}

/* ---------- 5. Price table (pret-decodare-iphone.htm) ---------- */

.tp-tools { margin: 18px 0 10px; }
.tp-search {
  display: block; width: 100%; min-height: 48px; padding: 10px 14px 10px 42px;
  font: 16px Roboto, sans-serif; color: #495057;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23810988' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='m16 16-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px center;
  border: 1px solid var(--line); border-radius: 6px; box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.tp-search:focus { outline: 0; border-color: var(--dp); box-shadow: 0 0 0 3px var(--dp-ring); }
.tp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.tp-chip {
  padding: 6px 12px; font: 500 13px/1.2 Roboto, sans-serif; color: var(--dp);
  background: #fff; border: 1px solid #d9b8db; border-radius: 999px; cursor: pointer;
}
.tp-chip[aria-pressed=true] { color: #fff; background: var(--dp); border-color: var(--dp); }
.tp-count { margin: 6px 0 0; font: 13px Roboto, sans-serif; color: var(--muted); }
.tp-empty { display: none; padding: 18px; text-align: center; color: var(--muted); background: #faf7fb; border-radius: 8px; }

.tabel_preturi {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font: 14px/1.35 Roboto, sans-serif; background: #fff;
  border: 1px solid #eadcec; border-radius: 8px; overflow: hidden;
}
.tabel_preturi th {
  position: sticky; top: 0; z-index: 1;
  padding: 10px 12px; font-size: 12px !important; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: var(--dp); border: 0; text-align: left;
}
.tabel_preturi th.pret_decodare, .tabel_preturi th.timp_rezolvare { text-align: right; }
.tabel_preturi td { padding: 9px 12px; border-bottom: 1px solid #f1e8f2; vertical-align: middle; text-align: left; }
.tabel_preturi td.pret_decodare, .tabel_preturi td.timp_rezolvare { text-align: right; }
.tabel_preturi tr:nth-child(even) td { background: #fcf9fc; }
.tabel_preturi tr:hover { color: inherit; cursor: default; background: none; }
.tabel_preturi tr:hover td { background: var(--dp-soft); }
.tabel_preturi td.tara { font-weight: 600; }
.tabel_preturi td.pret_decodare { color: var(--dp); font-weight: 700; font-size: 15px; white-space: nowrap; }
.tabel_preturi td.timp_rezolvare { color: var(--muted); font-size: 13px; white-space: nowrap; }
.tabel_preturi .inactiv_suspendat {
  display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 600; letter-spacing: .03em;
  color: #a4161a; background: #fdecec; border-radius: 999px; white-space: nowrap;
}
.tabel_preturi tr.tp-hidden { display: none; }

/* ---------- 6. Phones and small tablets ---------- */

@media (max-width: 767px) {
  /* table forms become a vertical list: label above field */
  form:not(.appnitro) table, form:not(.appnitro) tbody,
  form:not(.appnitro) tr, form:not(.appnitro) td { display: block; width: 100% !important; }
  form:not(.appnitro) table { border-spacing: 0; }
  form:not(.appnitro) tr { margin-bottom: 14px; }
  form:not(.appnitro) td { padding: 0 !important; white-space: normal !important; }
  form:not(.appnitro) td:first-child:not(:only-child) { margin-bottom: 6px; }
  form:not(.appnitro) td:empty { display: none; }
  form:not(.appnitro) td[rowspan] { display: none; }   /* decorative envelope image on contact */
  form:not(.appnitro) td:nth-child(3) { margin-top: 4px; font-size: 13px; color: var(--muted); }
  form:not(.appnitro) td > input + br { display: none; }

  form:not(.appnitro):not(.form-inline) input[type=submit],
  form:not(.appnitro):not(.form-inline) input[type=button],
  form:not(.appnitro):not(.form-inline) button:not(.btn-link):not(.close):not([data-toggle]),
  form:not(.appnitro):not(.form-inline) .but_decodare { display: block; width: 100%; min-width: 0; }

  /* same for the payment page table outside a form */
  .entry table:has(input.plata), .entry table:has(input.plata) tbody,
  .entry table:has(input.plata) tr, .entry table:has(input.plata) td { display: block; width: 100% !important; }
  .entry table:has(input.plata) tr { margin-bottom: 14px; }
  .entry table:has(input.plata) td { padding: 0; }
  .entry table:has(input.plata) td:first-child { margin-bottom: 6px; font-weight: 500; }

  /* price table: one card per row */
  .tabel_preturi, .tabel_preturi tbody { display: block; border: 0; background: none; border-radius: 0; overflow: visible; }
  .tabel_preturi tr:first-child { display: none; }   /* header row */
  .tabel_preturi tr {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "model model price" "tara retea time" "upd upd upd";
    gap: 4px 8px; align-items: center;
    margin: 0 0 10px; padding: 12px 14px;
    background: #fff; border: 1px solid #eadcec; border-radius: 10px;
    box-shadow: 0 1px 2px rgba(129, 9, 136, .05), 0 4px 12px rgba(129, 9, 136, .06);
  }
  .tabel_preturi tr.tp-hidden { display: none; }
  .tabel_preturi tr:nth-child(even) td, .tabel_preturi tr:hover td { background: none; }
  .tabel_preturi td { display: block; padding: 0; border: 0; text-align: left; overflow-wrap: anywhere; }

  /* country chips: one row that scrolls sideways instead of 6 rows of chips */
  .tp-chips {
    flex-wrap: nowrap; overflow-x: auto; padding: 2px 24px 6px 0;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
            mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .tp-chips::-webkit-scrollbar { display: none; }
  .tp-chip { flex: none; padding: 8px 14px; }
  .tabel_preturi td:nth-child(1) {
    grid-area: tara; justify-self: start;
    padding: 2px 8px; font-size: 12px; font-weight: 600; color: var(--dp); background: var(--dp-soft); border-radius: 999px;
  }
  .tabel_preturi td:nth-child(2) { grid-area: retea; font-size: 13px; font-weight: 500; color: var(--muted); }
  .tabel_preturi td:nth-child(3) { grid-area: model; font-size: 16px; font-weight: 600; color: #222; }
  .tabel_preturi td:nth-child(4) { grid-area: price; justify-self: end; font-size: 20px !important; }
  .tabel_preturi td:nth-child(5) { grid-area: time; justify-self: end; font-size: 13px; text-align: right; }
  .tabel_preturi td:nth-child(5):not(:has(.inactiv_suspendat))::before { content: "Timp: "; }
  .tabel_preturi td:nth-child(6) { grid-area: upd; font-size: 11px; text-align: right; color: #999; }
  .tabel_preturi td:nth-child(6)::before { content: "Actualizat "; }
  /* inactive / suspended rows are greyed by an inline style: fade the whole card */
  .tabel_preturi tr[style*="#ccc"] { opacity: .6; }
  .tabel_preturi tr[style*="#ccc"] td:nth-child(3), .tabel_preturi tr[style*="#ccc"] td:nth-child(4) { color: inherit; }
}

@media (max-width: 575px) {
  form:not(.appnitro):not(.form-inline) input[type=submit],
  form:not(.appnitro):not(.form-inline) input[type=button] { font-size: 16px !important; }
}


/* payment page (plata-decodarii): on desktop the table shrank to its content, so the fields were short.
   Full width up to 640px (same as the order form card), labels on one line. Phones keep the stacked layout above. */
@media (min-width: 768px) {
  .entry table:has(input.plata) { width: 100%; max-width: 640px; }
  .entry table:has(input.plata) td:first-child { width: 1%; white-space: nowrap; padding-right: 16px; vertical-align: middle; }
}