button#confirmBtn {
    background: #f2d851;
    color: #000000;
}

button#confirmBtn:not(:disabled):hover {
    color: #fff;
    background: #000000;
}

.form-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:16px 18px;
    margin-top:18px;
}

.field label{
    display:flex;
    font-size:12px;
    color:#666;
    margin-bottom:6px;
}

input, select, textarea{
    width:100%;
    border:1px solid #d8d8d8;
    padding:9px 10px;
    /*border-radius:2px;*/
    font-size:13px;
    background:#fff;
    box-sizing:border-box;
}

textarea{ resize:vertical; }

.field--full{ grid-column:1 / -1; }

.help-row{
    display:flex;
    justify-content:space-between;
    margin-top:6px;
    font-size:11px;
    color:#999;
}

.checks{ margin-top:2px; }
.checkline{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:12px;
    color:#666;
    margin-top:8px;
}
.checkline input{
    width:14px;
    height:14px;
    margin-top:0px; /* Remove margin-top to align with text baseline */
    flex-shrink: 0;
}

.next-btn:disabled{ opacity:.4; cursor:not-allowed; }

.submit-msg{
    margin-top:10px;
    padding:10px 12px;
    /*border-radius:4px;*/
    font-size:13px;
}
.submit-msg.ok{ background:#eef6ef; color:#1b5e20; }
.submit-msg.error{ background:#ffe8e8; color:#b00020; }
.submit-msg.loading{
    background:#e2f3ff;
    color:#004085;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.hidden{ display:none; }

/* Summary */
.summary-title{
    margin-top:30px;
    font-size:16px;
    color:#333;
}

.sum-block{
    margin-top:14px;
    border-top:1px solid #eee;
    padding-top:14px;
}

.sum-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
}

.sum-left{
    display:flex;
    align-items:center;
    gap:10px;
}

.sum-check{
    width:18px;
    height:18px;
    border-radius:50%;
    background:#333;
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
}

.sum-title{ font-size:13px; font-weight:600; color:#333; }

.sum-action{
    font-size:12px;
    color:#666;
}

.sum-body{
    background:#f7f7f7;
    padding:10px 12px;
    /*border-radius:2px;*/
}

.sum-row{
    display:grid;
    grid-template-columns:180px 1fr;
    padding:6px 0;
    border-bottom:1px solid #eee;
}
.sum-row:last-child{ border-bottom:none; }

.sum-key{
    font-size:11px;
    color:#888;
}
.sum-val{
    font-size:12px;
    color:#333;
}

/* responsive */
@media (max-width: 900px){
    .form-grid{
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 16px;
    }

    .sum-row{
        grid-template-columns: 120px 1fr;
    }

    .sum-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .sum-action {
        font-size: 11px;
    }
}

@media (max-width: 768px) {
    /* Fix mobile select dropdown styling */
    select {
        font-size: 16px;
        line-height: 1.2;
        background-color: #fff;
        color: #333;
        -webkit-appearance: menulist;
        -moz-appearance: menulist;
        appearance: menulist;
        border-radius: 0;
        min-height: 44px;
    }

    /* Ensure dropdown options are properly styled */
    select option {
        font-size: 16px;
        line-height: 1.4;
        padding: 8px 12px;
        color: #333;
        background-color: #fff;
        min-height: 44px;
    }

    /* Prevent positioning issues on mobile */
    select:focus {
        -webkit-user-select: auto;
        user-select: auto;
        position: relative;
        z-index: 1;
    }

    /* Form responsive styles */
    .form-grid {
        gap: 14px;
        margin-top: 14px;
    }

    .field label {
        font-size: 13px;
        margin-bottom: 8px;
        color: #333;
        font-weight: 600;
    }

    input, select, textarea {
        padding: 12px;
        font-size: 16px; /* Prevents zoom on iOS */
        /*border-radius: 6px;*/
        border: 1px solid #ccc;
        min-height: 44px; /* Touch-friendly */
        box-sizing: border-box;
    }

    textarea {
        min-height: 100px;
        resize: vertical;
    }

    /* Help row responsive */
    .help-row {
        flex-direction: column;
        gap: 4px;
        margin-top: 8px;
        font-size: 12px;
    }

    .help-left, .help-right {
        font-size: 12px;
    }

    /* Checkboxes responsive */
    .checkline {
        gap: 12px;
        font-size: 13px;
        margin-top: 12px;
        line-height: 1.4;
        align-items: flex-start;
    }

    .checkline input {
        width: 18px;
        margin-top: -12px; /* Align with text baseline */
        flex-shrink: 0;
    }

    /* Button responsive */
    .next-btn {
        padding: 14px 20px;
        font-size: 16px;
        min-height: 48px;
        /*border-radius: 6px;*/
        margin-top: 8px;
    }

    /* Summary responsive */
    .summary-title {
        margin-top: 24px;
        font-size: 15px;
    }

    .sum-block {
        margin-top: 12px;
        padding-top: 12px;
    }

    .sum-head {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 8px;
    }

    .sum-left {
        gap: 8px;
    }

    .sum-check {
        width: 16px;
        height: 16px;
        font-size: 10px;
    }

    .sum-title {
        font-size: 12px;
    }

    .sum-action {
        font-size: 11px;
        color: #2196f3;
        text-decoration: none;
    }

    .sum-body {
        padding: 8px 10px;
        /*border-radius: 4px;*/
    }

    .sum-row {
        grid-template-columns: 100px 1fr;
        padding: 4px 0;
    }

    .sum-key {
        font-size: 10px;
    }

    .sum-val {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    /* Fix mobile select dropdown styling */
    select {
        font-size: 16px !important;
        line-height: 1.2;
        background-color: #fff;
        color: #333;
        -webkit-appearance: menulist;
        -moz-appearance: menulist;
        appearance: menulist;
        border-radius: 0;
        min-height: 44px;
    }

    /* Ensure dropdown options are properly styled */
    select option {
        font-size: 16px !important;
        line-height: 1.4;
        padding: 8px 12px;
        color: #333;
        background-color: #fff;
        min-height: 44px;
    }

    /* Prevent positioning issues on mobile */
    select:focus {
        -webkit-user-select: auto;
        user-select: auto;
        position: relative;
        z-index: 1;
    }

    /* Mobile form styles */
    .form-grid {
        gap: 12px;
        margin-top: 12px;
    }

    .field label {
        font-size: 12px;
        margin-bottom: 6px;
    }

    input, select, textarea {
        padding: 10px;
        font-size: 16px;
        min-height: 40px;
    }

    textarea {
        min-height: 80px;
    }

    /* Help text for mobile */
    .help-row {
        font-size: 11px;
        margin-top: 6px;
    }

    .help-left, .help-right {
        font-size: 11px;
    }

    /* Checkboxes for mobile */
    .checkline {
        gap: 10px;
        font-size: 12px;
        margin-top: 10px;
        line-height: 1.3;
        align-items: flex-start;
    }

    .checkline input {
        width: 16px;
        margin-top: -12px; /* Align with text baseline */
        flex-shrink: 0;
    }

    /* Button for mobile */
    .next-btn {
        padding: 12px 16px;
        font-size: 15px;
        min-height: 44px;
        margin-top: 6px;
    }

    /* Summary for mobile */
    .summary-title {
        margin-top: 20px;
        font-size: 14px;
    }

    .sum-block {
        margin-top: 10px;
        padding-top: 10px;
    }

    .sum-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        margin-bottom: 6px;
    }

    .sum-left {
        gap: 6px;
    }

    .sum-check {
        width: 14px;
        height: 14px;
        font-size: 9px;
    }

    .sum-title {
        font-size: 11px;
    }

    .sum-action {
        font-size: 10px;
        align-self: flex-end;
    }

    .sum-body {
        padding: 6px 8px;
    }

    .sum-row {
        grid-template-columns: 80px 1fr;
        padding: 3px 0;
        gap: 8px;
    }

    .sum-key {
        font-size: 9px;
        word-wrap: break-word;
    }

    .sum-val {
        font-size: 10px;
        word-wrap: break-word;
    }

    /* Submit message responsive */
    .submit-msg {
        margin-top: 8px;
        padding: 8px 10px;
        font-size: 12px;
        /*border-radius: 4px;*/
    }
}