:root {
      --bg-overlay: rgba(255, 255, 255, 0.46);
      --card-bg: rgba(255, 255, 255, 0.85);
      --card-border: rgba(255, 255, 255, 0.50);
      --text: #1f1f1f;
      --muted: #a6a6a6;
      --line: #d8d8d8;
      --input-bg: rgba(255, 255, 255, 0.72);
      --shadow: 0 16px 41px rgba(0, 0, 0, 0.10);
      --radius-xl: 25px;
      --radius-lg: 14px;

      body {
          margin: 0;
          padding: 0;
          min-height: 100%;
          font-family: "Inter", sans-serif;
          color: var(--text);
      }

      body {
          min-height: 100vh;
          display: grid;
          place-items: center;
          padding: 0px 14px;
          background:
              linear-gradient(var(--bg-overlay), var(--bg-overlay)),
              url("images/photos/ornament-ludadama-fullsize.png") center center / cover no-repeat;
          overflow-x: hidden;
      }

      #poruka {
          resize: none;
      }

      .form-wrapper {
          width: 100%;
          max-width: 684px;
      }

      .form-card {
          background: var(--card-bg);
          border: 1px solid var(--card-border);
          border-radius: var(--radius-xl);
          box-shadow: var(--shadow);
          -webkit-backdrop-filter: blur(12px);
          padding: 31px 27px 22px;
      }

      .form-group {
          margin-bottom: 20px;
      }

      .form-label {
          display: inline-block;
          margin-bottom: 5px;
          font-size: 14px;
          font-weight: 500;
          color: #161616;
      }

      .required {
          color: #d65a5a;
      }

      .form-help {
          margin: 0 0 11px;
          font-size: 13px;
          line-height: 1.45;
          color: var(--muted);
      }

      .input,
      .textarea {
          width: 100%;
          border: 1px solid var(--line);
          background: var(--input-bg);
          color: #2a2a2a;
          outline: none;
          transition: 0.25s ease;
          box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
      }

      .input {
          height: 36px;
          padding: 0 0 0 14px;
          border-radius: 0px;
          font-size: 14px;
      }

      .textarea {
          min-height: 122px;
          padding: 10px 0 0 14px;
          border-radius: 0px;
          resize: vertical;
          font-size: 14px;
      }

      .input::placeholder,
      .textarea::placeholder {
          color: #b8b8b8;
      }

      .input:focus,
      .textarea:focus {
          border-color: #bdbdbd;
          background: rgba(255, 255, 255, 0.88);
          box-shadow:
              0 0 0 4px rgba(255, 255, 255, 0.34),
              inset 0 1px 2px rgba(0, 0, 0, 0.03);
      }

      .checkbox-group {
          display: flex;
          flex-direction: column;
          gap: 11px;
          margin-top: 7px;
      }

      .checkbox-option {
          display: flex;
          align-items: flex-start;
          gap: 11px;
          width: 100%;
          position: relative;
          cursor: pointer;
          font-size: 13px;
          line-height: 1.4;
          color: #222;
      }

      .checkbox-option input[type="checkbox"] {
          position: absolute;
          opacity: 0;
          pointer-events: none;
      }

      .checkbox-box {
          width: 18px;
          height: 18px;
          flex: 0 0 18px;
          margin-top: 1px;
          border: 1px solid #cdcdcd;
          border-radius: 5px;
          background: rgba(255, 255, 255, 0.82);
          box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
          transition: 0.25s ease;
          position: relative;
      }

      .checkbox-text {
          display: block;
      }

      .checkbox-option:hover .checkbox-box {
          border-color: #bcbcbc;
          background: rgba(255, 255, 255, 0.96);
      }

      .checkbox-option input[type="checkbox"]:focus+.checkbox-box {
          box-shadow:
              0 0 0 4px rgba(255, 255, 255, 0.34),
              inset 0 1px 2px rgba(0, 0, 0, 0.05);
          border-color: #b7b7b7;
      }

      .checkbox-option input[type="checkbox"]:checked+.checkbox-box {
          background: #efefef;
          border-color: #b8b8b8;
      }

      .checkbox-option input[type="checkbox"]:checked+.checkbox-box::after {
          content: "";
          position: absolute;
          left: 5px;
          top: 1px;
          width: 4px;
          height: 9px;
          border: solid #7b7b7b;
          border-width: 0 2px 2px 0;
          transform: rotate(45deg);
      }

      .submit-wrap {
          display: flex;
          justify-content: center;
          margin-top: 14px;
      }

      .submit-btn {
          min-width: 79px;
          height: 32px;
          padding: 0 16px;
          border: 1px solid rgba(0, 0, 0, 0.05);
          border-radius: 999px;
          background: rgba(207, 64, 77, 1);
          color: #fcfcfc;
          font-size: 12px;
          font-weight: 500;
          cursor: pointer;
          transition: 0.25s ease;
          box-shadow: 0 4px 13px rgba(0, 0, 0, 0.04);
      }

      .submit-btn:hover {
          background: rgba(255, 255, 255, 0.98);
          color: #7f7f7f;
          transform: translateY(-1px);
      }

      .submit-btn:active {
          transform: translateY(0);
      }

      @media (max-width: 768px) {
          body {
              padding: 16px 9px;
          }

          .form-card {
              margin: 22px 16px 16px;
              border-radius: 16px;
          }

          .form-label {
              font-size: 13px;
          }

          .form-help,
          .checkbox-option {
              font-size: 12px;
          }

          .input,
          .textarea {
              font-size: 13px;
          }
      }
  }