:root{
          --primary:#0077ff;
          --bg:#f9f9f9;
          --card:#ffffff;
          --muted:#6b7280;
          --ok:#10b981;
          --danger:#ef4444;
          --tg:#0088cc;
          --wa:#25d366;
          --radius:12px;
        }

        html,body{
          font-family:'Gilroy', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
          background:#fff;
          color:#111827;
          margin:0;
          padding:0;
          overflow-x: hidden;
        }
        .container{
          max-width:920px;
          margin:0 auto;
          padding:20px;
          position: relative;
        }

        /* Мобильные стили */
        @media (max-width: 768px) {
          .container {
            max-width: 100%;
            padding: 15px;
            margin: 0;
          }
          
          .form-section {
            border-radius: 0;
            margin: 0;
            padding: 20px;
            box-shadow: none;
            min-height: 100vh;
            box-sizing: border-box;
          }
        }

        .form-section{
          background:#fff;
          border-radius:16px;
          padding:0px;
          box-shadow: none;
        }

        .content-wrapper {
          max-width: 100%;
          width: 100%;
        }

        .form-group {
          position: relative;
          margin-bottom: 8px;
        }

        .form-group label {
          position: absolute;
          left: 12px;
          top: 50%;
          transform: translateY(-50%);
          background: #fff;
          padding: 0 4px;
          font-size: 14px;
          color: var(--primary);
          pointer-events: none;
          transition: all 0.2s ease;
          z-index: 1;
        }

        .required-star {
          color: #ef4444;
          font-weight: bold;
          margin-left: 2px;
        }

        .form-group input {
          width: 100%;
          padding: 12px;
          border: 1px solid #e5e7eb;
          border-radius: 10px;
          font-size: 15px;
          outline: none;
          box-sizing: border-box;
          transition: all 0.2s ease;
        }

        .form-group input:focus {
          border-color: var(--primary);
        }

        .form-group input:focus + label,
        .form-group input:not(:placeholder-shown) + label {
          top: 0;
          font-size: 12px;
          color: var(--primary);
        }

        .form-group input::placeholder {
          color: transparent;
        }

        /* Стили для согласия на обработку данных */
        .privacy-consent {
          background: #f8fafc;
          border: 1px solid #e2e8f0;
          border-radius: 8px;
          padding: 12px;
        }

        .privacy-checkbox {
          display: flex;
          align-items: flex-start;
          cursor: pointer;
          font-size: 13px;
          color: #4b5563;
          line-height: 1.4;
        }

        .privacy-checkbox input[type="checkbox"] {
          display: none;
        }

        .privacy-checkmark {
          width: 18px;
          height: 18px;
          border: 2px solid #d1d5db;
          border-radius: 4px;
          margin-right: 10px;
          margin-top: 1px;
          position: relative;
          transition: all 0.2s ease;
          flex-shrink: 0;
        }

        .privacy-checkbox input[type="checkbox"]:checked + .privacy-checkmark {
          background: #0077ff;
          border-color: #0077ff;
        }

        .privacy-checkbox input[type="checkbox"]:checked + .privacy-checkmark:after {
          content: "✓";
          position: absolute;
          top: -1px;
          left: 3px;
          color: white;
          font-size: 12px;
          font-weight: bold;
        }

        .privacy-text {
          flex: 1;
        }

        .privacy-text a {
          color: #0077ff;
          text-decoration: underline;
        }

        .privacy-text a:hover {
          color: #005cbf;
        }

        .privacy-consent.error {
          border-color: var(--danger);
          background-color: #fef2f2;
        }

        .privacy-consent.error .privacy-checkmark {
          border-color: var(--danger);
        }
        .form-group.error input {
          border-color: var(--danger);
          background-color: #fef2f2;
        }

        .form-group.error label {
          color: var(--danger);
        }

        .validation-error {
          background: #fef2f2;
          border: 1px solid #fecaca;
          border-radius: 8px;
          padding: 12px 16px;
          margin: 16px 0;
          color: var(--danger);
          font-size: 14px;
          font-weight: 500;
          display: none !important;
        }

        .validation-error.show {
          display: block !important;
        }

        .validation-error ul {
          margin: 4px 0 0 0;
          padding-left: 20px;
        }

        .validation-error li {
          margin: 2px 0;
        }

        /* Стили для мобильных кнопок +/- */
        .mobile-counter {
          position: relative;
        }

        .counter-buttons {
          position: absolute;
          right: 4px;
          top: 50%;
          transform: translateY(-50%);
          display: flex;
          flex-direction: row;
          gap: 1px;
          background: #fff;
          border-radius: 6px;
          padding: 2px;
        }

        .counter-btn {
          width: 24px;
          height: 24px;
          border: 1px solid #d1d5db;
          background: #f9fafb;
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          font-size: 14px;
          font-weight: 600;
          color: #374151;
          transition: all 0.2s ease;
          user-select: none;
        }

        .counter-btn:hover {
          background: #e5e7eb;
          border-color: #9ca3af;
        }

        .mobile-counter input {
          padding-right: 60px;
        }

        .info-section {
          background: #f8fafc;
          border: 1px solid #e2e8f0;
          border-radius: 12px;
          padding: 16px;
          margin: 20px 0;
        }

        .info-title {
          font-weight: 600;
          color: #1e293b;
          margin-bottom: 8px;
          font-size: 16px;
        }

        .info-text {
          color: #64748b;
          font-size: 14px;
          line-height: 1.6;
        }

        .info-description {
          margin-bottom: 16px;
          line-height: 1.6;
        }

        .info-description .highlight {
          color: #1e293b;
          font-weight: 700;
          background: none;
        }

        .info-description .badge {
          display: inline-flex;
          align-items: center;
          background: #FFF3EA;
          color: #FF5B00;
          padding: 2px 8px;
          border-radius: 12px;
          font-size: 12px;
          font-weight: 500;
          margin: 5px 2px 2px 2px;
        }

        .info-included {
          margin-top: 16px;
        }

        .info-included-title {
          font-weight: 600;
          color: #1e293b;
          margin-bottom: 10px;
          font-size: 15px;
        }

        .info-list {
          list-style: none;
          padding: 0;
          margin: 0;
        }

        .info-list li {
          display: flex;
          align-items: flex-start;
          margin-bottom: 4px;
          padding-left: 0;
          font-size: 14px;
        }

        .info-list li:before {
          content: "✓";
          color: #10b981;
          font-weight: bold;
          font-size: 16px;
          margin-right: 6px;
          margin-top: 1px;
          flex-shrink: 0;
        }

        .grid{
          display:grid;
          grid-template-columns:1fr 1fr 1fr;
          margin-top:15px;
          gap:12px
        }
        @media (max-width: 640px){
          .grid{grid-template-columns:1fr}
        }

        /* Стили для контактной формы на мобильном */
        @media (max-width: 640px) {
          .grid[style*="grid-template-columns: 1fr 1fr"] {
            grid-template-columns: 1fr !important;
          }
        }

        .summary{
          background:#f5f7fa;
          border:1px solid #e5e7eb;
          border-radius:12px;
          padding:14px;
          font-size:14px;
          line-height:1.5;
          margin-top: 16px;
        }
        .summary strong{color:#111827}
        
        .btn{
          border:0;
          border-radius:10px;
          padding: 15px 45px;
          font-weight:600;
          cursor:pointer;
          display:inline-flex;
          align-items:center;
          justify-content:center;
          font-size:14px;
          font-family: inherit;
          text-decoration:none;
        }
        .btn.wa{background:var(--wa);color:#fff;}
        .btn.tg{background:var(--tg);color:#fff;font-family: inherit;}

        .share{
          display:flex;
          gap:10px;
          margin-top:12px;
          flex-wrap:wrap
        }
        .share a, .share button{
          flex:1;
          min-width:200px;
          display:inline-flex;
          align-items:center;
          justify-content:center;
          font-size:14px;
          text-decoration:none
        }

        .note-important{
          font-size:13px;
          color:#374151;
          margin-top:12px;
          font-weight:500;
          border-top:1px solid #e5e7eb;
          padding-top:12px
        }

        /* Календарь стили */
        .date-input-wrapper {
          position: relative;
        }

        /* Календарь как выпадающий список */
        .date-input-wrapper {
            position: relative;
        }

        .calendar-popup {
          position: absolute;
          bottom: 100%;
          left: 0;
          right: 0;
          background: #fff;
          border: 1px solid #e5e7eb;
          border-radius: 10px;
          box-shadow: 0 10px 25px rgba(0,0,0,.1);
          z-index: 1000;
          display: none;
          padding: 12px;
          margin-bottom: 8px;
          max-width: 100%;
          overflow: hidden;
        }

        .calendar-popup.show {
          display: block;
        }

        .calendar-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;
        }

        .calendar-nav {
          background: none;
          border: none;
          font-size: 16px;
          cursor: pointer;
          padding: 6px;
          border-radius: 4px;
          color: var(--primary);
          min-width: 28px;
          height: 28px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .calendar-nav:hover {
          background: #f3f4f6;
        }

        .calendar-title {
          font-weight: 600;
          font-size: 14px;
          color: #111827;
          flex: 1;
          text-align: center;
        }

        .calendar-grid {
          display: grid;
          grid-template-columns: repeat(7, 1fr);
          gap: 2px;
          max-width: 100%;
        }

        .calendar-day-header {
          text-align: center;
          font-size: 11px;
          color: var(--muted);
          padding: 4px 2px;
          font-weight: 500;
        }

        .calendar-day {
          text-align: center;
          padding: 4px 2px;
          cursor: pointer;
          border-radius: 4px;
          font-size: 12px;
          transition: all 0.2s ease;
          min-height: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          word-break: keep-all;
        }

        .calendar-day:hover {
          background: #f3f4f6;
        }

        .calendar-day.other-month {
          color: #d1d5db;
        }

        .calendar-day.today {
          background: #fef3c7;
          color: #92400e;
          font-weight: 600;
        }

        .calendar-day.selected {
          background: var(--primary);
          color: #fff;
          font-weight: 600;
        }

        .calendar-day.past {
          color: #d1d5db;
          cursor: not-allowed;
        }

        .calendar-day.past:hover {
          background: none;
        }

        /* Адаптивность календаря */
        @media (max-width: 640px) {
          .calendar-popup {
            position: absolute !important;
            bottom: 100% !important;
            top: auto !important;
            left: 10px !important;
            right: 10px !important;
            transform: none !important;
            width: auto !important;
            max-width: none !important;
            margin: 0 !important;
            margin-bottom: 8px !important;
            padding: 12px !important;
            border-radius: 12px !important;
            box-shadow: 0 20px 40px rgba(0,0,0,.3) !important;
            z-index: 9999 !important;
          }

          .calendar-popup.show {
            display: block !important;
          }

          .calendar-header {
            margin-bottom: 8px;
          }

          .calendar-grid {
            gap: 1px;
          }

          .calendar-day {
            font-size: 13px;
            min-height: 24px;
            padding: 3px 2px;
          }

          .calendar-day-header {
            font-size: 11px;
            padding: 3px 2px;
          }

          .calendar-nav {
            font-size: 14px;
            min-width: 28px;
            height: 28px;
            padding: 4px;
          }

          .calendar-title {
            font-size: 13px;
          }
        }

        /* Модальное окно */
        .modal-overlay {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            background: rgba(0, 0, 0, 0.6) !important;
            display: none;
            align-items: center !important;
            justify-content: center !important;
            z-index: 2147483647 !important;
            padding: 20px !important;
            box-sizing: border-box !important;
        }

        .modal-overlay.show {
            display: flex !important;
        }

        .modal {
            background: #fff !important;
            border-radius: 16px !important;
            padding: 24px !important;
            max-width: 500px !important;
            width: 100% !important;
            max-height: 90vh !important;
            overflow-y: auto !important;
            position: relative !important;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
            z-index: 2147483647 !important;
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 16px;
            border-bottom: 1px solid #e5e7eb;
        }

        .modal-title {
            font-family: inherit !important;
            font-size: 18px;
            font-weight: 600;
            color: #111827;
            margin: 0;
        }

        .modal-close {
            background: none;
            border: none;
            font-size: 24px;
            color: #6b7280;
            cursor: pointer;
            padding: 4px;
            border-radius: 6px;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal-close:hover {
            background: #f3f4f6;
            color: #374151;
        }

        .modal-content {
            margin-bottom: 24px;
        }

        .message-preview {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 16px;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 13px;
            line-height: 1.5;
            white-space: pre-wrap;
            word-wrap: break-word;
            color: #374151;
            max-height: 300px;
            overflow-y: auto;
        }

        .modal-actions {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        .modal-btn {
            font-family: inherit !important;
            flex: 1;
            min-width: 140px;
            padding: 12px 20px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .modal-btn.copy {
            font-family: inherit !important;
            background: #f3f4f6;
            color: #374151;
            border: 1px solid #d1d5db;
        }

        .modal-btn.copy:hover {
            background: #e5e7eb;
        }

        .modal-btn.copy.copied {
            background: #dcfce7;
            color: #16a34a;
            border-color: #16a34a;
        }

        .modal-btn.telegram {
            font-family: inherit !important;
            background: var(--tg);
            color: #fff;
        }

        .modal-btn.telegram:hover {
            background: #0077b3;
        }

        @media (max-width: 640px) {
            .modal {
                margin: 10px;
                padding: 20px;
                max-width: calc(100vw - 20px);
            }

            .modal-actions {
                flex-direction: column;
            }

            .modal-btn {
                min-width: auto;
                width: 100%;
            }

            .message-preview {
                font-size: 12px;
                max-height: 250px;
            }
        }