/* ─── Custom Order Form – Frontend Styles ─────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=DM+Mono:wght@400;500&display=swap');

:root {
    --cof-bg:        #f0f0ed;
    --cof-white:     #ffffff;
    --cof-border:    #d8d8d4;
    --cof-text:      #1a1a1a;
    --cof-muted:     #767672;
    --cof-accent:    #1a1a1a;
    --cof-accent-h:  #333;
    --cof-success:   #166534;
    --cof-success-bg:#dcfce7;
    --cof-error:     #991b1b;
    --cof-error-bg:  #fee2e2;
    --cof-req:       #c0392b;
    --cof-radius:    6px;
    --cof-shadow:    0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
    --cof-font:      'DM Sans', sans-serif;
}

.cof-wrapper { font-family: var(--cof-font); max-width: 860px; margin: 0 auto; }

/* Alerts */
.cof-alert { padding: 14px 18px; border-radius: var(--cof-radius); margin-bottom: 20px; font-size: 14px; font-weight: 500; }
.cof-alert-success { background: var(--cof-success-bg); color: var(--cof-success); border: 1px solid #bbf7d0; }
.cof-alert-error   { background: var(--cof-error-bg);   color: var(--cof-error);   border: 1px solid #fecaca; }

/* Form */
.cof-form {
    background: var(--cof-white);
    border: 1px solid var(--cof-border);
    border-radius: 10px;
    padding: 36px 40px;
    box-shadow: var(--cof-shadow);
}

/* Rows */
.cof-row { margin-bottom: 20px; }
.cof-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cof-row-submit { margin-top: 28px; }

@media (max-width: 600px) { .cof-row-2 { grid-template-columns: 1fr; } }

/* Fields */
.cof-field { display: flex; flex-direction: column; gap: 6px; }
.cof-field label { font-size: 13px; font-weight: 600; color: var(--cof-text); letter-spacing: .01em; }
.cof-req { color: var(--cof-req); }

.cof-field input[type="text"],
.cof-field input[type="email"],
.cof-field input[type="tel"],
.cof-field select,
.cof-field textarea {
    width: 100%;
    border: 1px solid var(--cof-border);
    border-radius: var(--cof-radius);
    padding: 10px 13px;
    font-family: var(--cof-font);
    font-size: 14px;
    color: var(--cof-text);
    background: var(--cof-bg);
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
    -webkit-appearance: none;
}

.cof-field input:focus,
.cof-field select:focus,
.cof-field textarea:focus {
    outline: none;
    border-color: var(--cof-accent);
    box-shadow: 0 0 0 3px rgba(26,26,26,.08);
    background: #fff;
}

.cof-field input.cof-invalid,
.cof-field textarea.cof-invalid { border-color: var(--cof-req); }

.cof-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23767672' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; cursor: pointer; }

/* Phone row */
.cof-phone-wrap { display: flex; gap: 0; }
.cof-phone-code { border-radius: var(--cof-radius) 0 0 var(--cof-radius) !important; border-right: none !important; min-width: 100px; max-width: 120px; flex-shrink: 0; background-color: #e8e8e4 !important; }
.cof-phone-wrap input[type="tel"] { border-radius: 0 var(--cof-radius) var(--cof-radius) 0 !important; flex: 1; }

/* Textarea */
.cof-textarea-wrap { position: relative; }
.cof-textarea-wrap textarea { resize: vertical; min-height: 110px; padding-bottom: 28px; }
.cof-char-count { position: absolute; bottom: 10px; right: 12px; font-size: 11px; color: var(--cof-muted); font-family: 'DM Mono', monospace; pointer-events: none; }

/* Upload zone */
.cof-upload-zone {
    border: 2px dashed var(--cof-border);
    border-radius: var(--cof-radius);
    background: var(--cof-bg);
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    position: relative;
}
.cof-upload-zone:hover,
.cof-upload-zone.cof-drag-over { border-color: var(--cof-accent); background: #e8e8e4; }
.cof-file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; }
.cof-upload-inner { pointer-events: none; }
.cof-upload-icon { font-size: 28px; display: block; margin-bottom: 8px; }
.cof-upload-text { margin: 0 0 6px; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.cof-browse-btn {
    pointer-events: all;
    background: var(--cof-accent);
    color: #fff;
    padding: 5px 14px;
    border-radius: var(--cof-radius);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    z-index: 3;
    position: relative;
}
#cof-file-name { color: var(--cof-muted); font-size: 13px; }
.cof-upload-hint { margin: 6px 0 2px; font-size: 13px; color: var(--cof-muted); }
.cof-choose-link { pointer-events: all; color: var(--cof-accent); font-weight: 600; cursor: pointer; text-decoration: underline; z-index: 3; position: relative; }
.cof-upload-types { margin: 0; font-size: 11px; color: #aaa; }

/* Submit button */
.cof-submit-btn {
    background: var(--cof-accent);
    color: #fff;
    border: none;
    border-radius: var(--cof-radius);
    padding: 13px 36px;
    font-family: var(--cof-font);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: .02em;
    transition: background .15s, transform .1s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.cof-submit-btn:hover { background: var(--cof-accent-h); transform: translateY(-1px); }
.cof-submit-btn:active { transform: translateY(0); }
.cof-submit-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.cof-btn-loader { display: inline-flex; align-items: center; gap: 8px; }