@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
body {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  background: #e8eaed;
  font-size: 14px;
}

form {
  display: block;
  margin-top: 0em;
  unicode-bidi: isolate;
}

label {
  display: block;
  margin-bottom: 5px;
}

tr {
    display: table-row;
    vertical-align: inherit;
    unicode-bidi: isolate;
    border-color: inherit;
}

tr:hover {
  background: #f5f5f5;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-weight: 400;
}
th, td {    
    border: 1px solid #ccc;
    padding: 10px 5px;
    text-align: left;
  }
th {
    font-weight: 500;
  }
h3 {
    font-weight: 500;
}
input, select {
    width: 100%;
    border-radius: 10px;
    padding: 10px 7px;
    border: 1px solid #ffffff;
    box-shadow: 0 0 5px #00000026;
    font-size: 14px;
}

input:focus, select:focus {
  border: 1px solid #7fa5d4;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgb(42 105 184 / 19%);
}

input[type="file" i] {
    width: 230px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
}

.check-box {
    transform: scale(2);
}

input[type="checkbox"] {
    position: relative;
    appearance: none;
    width: 46px;
    height: 27px;
    background: #ccc;
    border-radius: 50px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: 0.3s;
}

input:checked[type="checkbox"] {
    background: #4CAF50;
}

input[type="checkbox"]::after {
    position: absolute;
    content: "";
    width: 17px;
    height: 17px;
    top: 4px;
    left: 5px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    transform: scale(1.3);
    transition: 0.3s;
}

input:checked[type="checkbox"]::after {
    left: 50%;
}

textarea {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    border: 1px solid #ffffff;
    box-shadow: 0 0 5px #00000026;
    border-radius: 10px;
    padding: 7px 8px;
    font-size: 14px;
}

textarea:focus {
  border: 1px solid #7fa5d4;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgb(42 105 184 / 19%);
}

button {
  padding: 10px;
  background: #2a69b8;
  border-radius: 10px;
  border: none;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

button:hover {
  background: #235a9b;
}

a {
  color: #2a69b8;
  margin-right: 10px;
  text-decoration: none;
}

h2 {
  margin-bottom: 20px;
  color: #000;
}

#error {
  color: red;
  margin-top: 10px;
}

.logo  a {color: #ffffff;}

.success {
  color: green;
  margin-top: 10px;
}
.header {background:#2a69b8;color:#fff;padding:10px;display:flex;justify-content:space-between;align-items:center;}
.user-info {display:flex;align-items:center;}
.user-info img {width:40px;height:40px;border-radius:50%;margin-right:10px;}

.form-container {
    padding: 20px;
    margin: 45px 0 30px 255px;
}

#select_territory {width: 450px;}

#fs0012 {max-width:400px; margin:30px auto;}

#carsBox {width: 100%;}

.form-carsBox {
    display: flex;
    width: 98%;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    padding: 10px 0;
}

.form-bloc {
    display: flex;
    gap: 50px;
    width: 100%;
    align-items: center;
}

.form-group {
  display: flex;
  margin-bottom: 15px;
  flex-direction: column;
}

.form-group span {
  color: rgba(214, 45, 48, 1);font-weight: 600;
}

.form-group img {
  width: 100px;border-radius: 10px;margin-bottom: 20px;
}

.servicesCheckbox {
  display: block;
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.servicesCheckbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 17px;
  width: 17px;
  background-color: #eee;
}

.servicesCheckbox:hover input ~ .checkmark {
  background-color: #ccc;
}

.servicesCheckbox input:checked ~ .checkmark {
  background-color: #3bb82a;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.servicesCheckbox input:checked ~ .checkmark:after {
  display: block;
}

.servicesCheckbox .checkmark:after {
  left: 5px;
  top: 0;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.cars-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.car-card {
  position: relative;
  padding-right: 15px;
}

.car-card input[type="radio"] {
  display: none;
}

.car-card label {
    width: auto;
    display: block;
    cursor: pointer;
    border: 2px solid #ccc;
    border-radius: 10px;
    padding: 5px 5px;
    text-align: center;
    transition: all 0.3s ease;
    background: #f9f9f9;
    margin: 10px 0 30px;
}

.car-card label:hover {
  border-color: #2a69b8;
  background: #eef5ff;
}

.car-card input[type="radio"]:checked + label {
  border-color: #2a69b8;
  background: #dceeff;
}

.car-card .car-number {
  font-weight: bold;
  font-size: 16px;
  display: block;
  margin-bottom: 5px;
}

.car-card .car-brand {
  font-size: 14px;
  color: #333;
}

    .header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background: #2a69b8;
      color: #fff;
      padding: 10px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 1000;
    }
    .header img {
      border-radius: 50%;
      margin-right: 10px;
    }
    .sidebar {
      position: fixed;
      top: 55px;
      left: 0;
      width: 220px;
      height: calc(100% - 60px);
      background: #f5f5f5;
      border-right: 1px solid #ddd;
      padding: 15px;
      overflow-y: auto;
    }
    .sidebar a {
      display: block;
      color: #333;
      text-decoration: none;
      padding: 8px 10px;
      border-radius: 4px;
      margin-top: 10px;
      margin-bottom: 5px;
      transition: background 0.5s;
    }
    .sidebar a:hover {
      color: #2a69b8;
    }
    /* Подменю */
    .submenu {
      max-height: 0;
      overflow: hidden;
      margin-left: 10px;
    }
    .submenu.open {
      max-height: 500px;
      cursor: pointer;
      margin-top: 3px;
      margin-left: 0;
      padding-left: 5px;
      padding-bottom: 5px;
      border-radius: 0 0 4px 4px;
      transition: background 0.5s;
    }
    .submenu a {
      padding: 0 10px;
    }
    .menu-item {
      background: #e8eaed;
      cursor: pointer;
      font-weight: bold;
      margin-top: 10px;
      padding: 8px 10px;
      border-radius: 10px;
      transition: background 0.5s;
    }
    .menu-item:hover {
      background: #d6d8db;
    }
    #linkClient {background: #2a69b8;border-radius: 5px;color: #fff;text-decoration: none;padding: 2px 5px;}
    #linkClient:hover {background: #235a9b;}
    #linkEdit {background:#2a69b8;border-radius: 5px;color:#fff;padding:2px 6px;text-decoration:none;}
    #linkEdit:hover {background:#1e4f8a;}
    #linkDelete {background: #ff0000;border-radius: 5px;color: #fff;text-decoration: none;padding: 2px 5px;}
    #linkUser {background: #2a69b8;border-radius: 5px;color: #ffffff;text-decoration: none;padding: 2px 5px;}
    #linkUser:hover {background: #235a9b;}
    #addCarBtn {width: 205px;background-color: rgb(76, 175, 80);color: rgb(255, 255, 255);cursor: pointer;}
    #addCarBtn:hover {background-color: rgb(70 159 73);}
    .services {display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 10px;padding-bottom: 30px;justify-items: start;}
    .deleteCarBtn {background: #F44336;margin-top: 10px;}
    .deleteCarBtn:hover {background: #cd372c;}
    .services label {display:block;}
    .services button {width: auto;}
    .quick-services {margin-top: 15px; display: flex; gap: 10px; flex-wrap: wrap;}
    .quick-services-button {margin-top: 15px;display: flex;width: 100%;gap: 10px;flex-wrap: wrap;flex-direction: row;}
    .quick-services-button button {width: auto;}
    .quick-btn {padding: 8px 12px;border: 1px solid #cccccc;background: #fff;color: #000000;cursor: pointer;border-radius: 5px;}
    .quick-btn:hover {color: #fff;}
    .quick-btn.active {background: #4CAF50; color: #fff;}
    .success {color:green;}
    .error {color:red;}
    .car-block {display: flex;width: 100%;margin-bottom: 15px;gap: 50px;justify-content: flex-start;align-items: center;}
    .back {padding: 10px;background: #2a69b8;border-radius: 5px; color: #fff;text-decoration: none;}
    .back:hover {background: #235a9b;}
    .ok {padding: 10px;background: #F44336;border-radius: 10px;color: #fff;}
    .ok:hover {background: #cd372c;}

    .FG43G {display: flex;width: 207px;margin-top: 20px;justify-content: space-between;}
    .FG43G button {width:120px;}
    .FG44G {display: flex;width: 355px;margin-top: 20px;justify-content: space-between;}
    .FG44G button {width:135px;}
    .pay-btn {width: 160px;background: #4CAF50;color: #fff;padding: 11px 20px;margin-left: 10px;text-decoration: none;border-radius: 8px;}
    .pay-btn:hover {background: #43A047;}
    .GG001 {display: flex;width: 96%;}
    #prevStep {margin-right:15px;}
    .btn:hover {background:#235a9b;}
    .btn-edit {background:#FF9800;}
    .btn-edit:hover {background:#e68900;}
    .btn-danger {background: #f44336;border-radius: 10px;padding: 10px;color: #fff;}
    .btn-danger:hover {background:#d32f2f;}
    .modal {display:none;position:fixed;top:0;left:0;width:100%;height:100%; background:rgba(0,0,0,0.5);z-index: 99;}
    .modal-content {background: #fff;padding: 1px 15px 15px 15px;width: 500px;height: auto;margin: 10% auto;border-radius: 8px;position: relative;}
    .close {position:absolute; right:10px; top:10px; cursor:pointer; font-size:20px;}
    .table {width:100%;border-collapse: collapse;margin-top:20px;}
    .table th, .table td {border:1px solid #ccc;padding:8px;}
    .color-box {display: inline-block;width: 31px;height: 31px;border: 1px solid #ccc;margin-left: 10px;padding: 1px 1px;}
    .addObject {position: absolute;top: 90px;right: 20px;}
    .addServices {position: absolute;top: 90px;right: 20px;}
    .addTerritory {padding: 10px;background: #2a69b8;border-radius: 10px;border: none;color: #fff;font-size: 14px;cursor: pointer;}





.addterritoryModal {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; z-index: 1000; animation: fadeIn 0.3s ease;}
.div1_territoryModal {background: white; padding: 0 10px 25px; border-radius: 12px; text-align: center; box-shadow: 0 8px 25px rgba(0,0,0,0.2); max-width: 450px; animation: slideUp 0.4s ease;}
.div3_territoryModal {display: flex; gap: 15px; justify-content: center;}
.addterritoryModal h3 {color: #d32f2f; margin-bottom: 15px; font-size: 24px;}
.addterritoryModal p {margin-bottom: 30px; font-size: 16px; color: #666; line-height: 1.5;}
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes slideUp {
            from { 
                opacity: 0;
                transform: translateY(30px);
            }
            to { 
                opacity: 1;
                transform: translateY(0);
            }
        }








        .services-columns {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }
        .services-col {
    flex: 1 1 300px;
    background: #ffffff;
    box-shadow: 0 0 5px #00000026;
    padding: 0 10px 10px;
    border-radius: 10px;
        }
        .services-col h4 {
            line-height: 10px;
        }
        .service-item {
    display: flex;
    align-items: center;
    margin: 5px 0;
    padding: 8px;
    background: white;
    border-radius: 10px;
    border: 1px solid #e8eaed;
    background-image: linear-gradient(0deg, #e8eaed 4px, transparent 0);
    cursor: pointer;
        }
        .service-item.basic-service {
            cursor: default;
        }
        .service-info {
            flex: 1;
        }
        .service-name {
            font-weight: bold;
            margin-bottom: 2px;
        }
        .service-price {
            color: #666;
            font-size: 0.9em;
        }
        .service-controls {
            display: flex;
            align-items: center;
            gap: 0;
        }
        .qty-btn {
          width: 35px;
    height: 31px;
    border-radius: 10px;
    font-size: 25px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
        }
        .minus {background: #F44336;}
        .minus:hover {background: #F44336;}
        .plus {background: #4CAF50;}
        .plus:hover {background: #4CAF50;}
        .qty-input {
    background: transparent;
    border: none;
    width: 40px;
    text-align: center;
    font-size: 18px;
    box-shadow: none;
    padding: 4px 0 4px;
        }
        .service-item.active {
    border-color: #009688;
    background: #0096883d;
        }
        .client-info {
          width: 280px;
          background: #ffffff;
          box-shadow: 0 0 5px #00000026;
          padding: 10px;
          border-radius: 8px;
          line-height: 23px;
          margin: 0 0 20px 0;
        }
        .basic-service .service-controls {
            display: none !important;
        }
.license-plate {
    display: inline-flex;
    background-color: #000000;
    border: 4px solid #000;
    border-radius: 5px;
    overflow: hidden;
    font-family: 'PT Sans', 'Helvetica', sans-serif;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    color: #000;
}

.license-plate {
    font-size: 17px;
    padding: 0 0;
    margin: 10px 0 7px;
}

.plate-right {
    background-color: #1f52a4;
    border-radius: 3px;
    color: #fff;
    padding: 3px 5px;
    margin-left: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
}

.plate-left {
    padding: 10px 15px;
    letter-spacing: 0.5px;
    background-color: #fff;
    border-radius: 3px;
}

.plate-number {
    font-size: 2.2em;
}

.region-code {
    font-size: 1.9em;
}