: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 18px 45px rgba(0, 0, 0, 0.10);
     --radius-xl: 5px;
     --radius-lg: 16px;
     --radius-pill: 999px;
 }

 * {
     box-sizing: border-box;
 }

 html,
 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: 32px 16px;
     background:
         linear-gradient(var(--bg-overlay), var(--bg-overlay)),
         url("images/photos/ornamenti-fullsize.webp") center center / cover no-repeat;
     overflow-x: hidden;
 }

 #poruka {
     resize: none;
 }

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

 .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: 34px 30px 24px;
 }

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

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

 .required {
     color: #d65a5a;
 }

 .form-help {
     margin: 0 0 12px;
     font-size: 14px;
     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: 40px;
     padding: 0 16px;
     border-radius: 0px;
     font-size: 15px;
 }

 .textarea {
     min-height: 136px;
     padding: 14px 16px;
     border-radius: 0px;
     resize: vertical;
     font-size: 15px;
 }

 .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: 12px;
     margin-top: 8px;
 }

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

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

 .checkbox-box {
     width: 20px;
     height: 20px;
     flex: 0 0 20px;
     margin-top: 1px;
     border: 1px solid #cdcdcd;
     border-radius: 6px;
     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: 6px;
     top: 2px;
     width: 5px;
     height: 10px;
     border: solid #7b7b7b;
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
 }

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

 .submit-btn {
     min-width: 88px;
     height: 36px;
     padding: 0 18px;
     border: 1px solid rgba(0, 0, 0, 0.05);
     border-radius: 999px;
     background: rgba(207, 64, 77, 1);
     color: #fcfcfc;
     font-size: 13px;
     font-weight: 500;
     cursor: pointer;
     transition: 0.25s ease;
     box-shadow: 0 4px 14px 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: 18px 10px;
     }

     .form-card {
         padding: 24px 18px 18px;
         border-radius: 18px;
     }

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

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

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