/* ==========================================================================
   PrintCalc Pro — Frontend Styles
   ========================================================================== */
.pcp-product-form { margin-bottom: 16px; }

/* ── Accordion ────────────────────────────────────────────────────────────── */
.pcp-accordion-item { border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; margin-bottom: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: box-shadow .2s; }
.pcp-accordion-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,.10); }
.pcp-accordion-item:has(.pcp-accordion-header.pcp-open) { border-left: 3px solid #0F83BF; }

.pcp-accordion-header { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; font-size: 14px; font-weight: 600; cursor: pointer; background: #f8f9fa; user-select: none; transition: background .15s; color: #1d2327; }
.pcp-accordion-header:hover { background: #eef6fb; }
.pcp-accordion-header.pcp-open { background: #0F83BF; color: #fff; border-radius: 5px 5px 0 0; }
.pcp-accordion-header.pcp-open .pcp-accordion-chevron { transform: rotate(180deg); color: #fff; }
.pcp-accordion-chevron { font-size: 16px; color: #9ca3af; transition: transform .2s; }

/* Incomplete tab pulse */
@keyframes pcp-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.6); } 50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); } }
.pcp-incomplete { animation: pcp-pulse .6s ease-out 3; background: #fff1f2 !important; color: #991b1b !important; }

.pcp-accordion-content { padding: 14px 16px; border-top: 1px solid #e5e7eb; }

/* ── Field rows ───────────────────────────────────────────────────────────── */
.pcp-field-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f3f4f6; }
.pcp-field-row:last-child { border-bottom: none; }
.pcp-field-row:nth-child(even) { background: #fafafa; border-radius: 4px; }

.pcp-field-label { font-size: 13px; font-weight: 500; color: #374151; }
.pcp-required { color: #ef4444; margin-left: 2px; }

.pcp-field-input { width: 100%; padding: 7px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; color: #1d2327; transition: border-color .15s; background: #fff; }
.pcp-select { appearance: auto; cursor: pointer; }
.pcp-field-input:focus { border-color: #0F83BF; outline: none; box-shadow: 0 0 0 3px rgba(15,131,191,.12); background: #fff; }
.pcp-select option[value=""] { color: #9ca3af; font-style: italic; }
.pcp-field-input:not([value=""]):valid { border-color: #10b981; background: #f0fdf4; }

/* ── Loader ───────────────────────────────────────────────────────────────── */
.pcp-loader { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 8px; margin: 8px 0; font-size: 13px; color: #0369a1; font-weight: 500; }
.pcp-spinner { display: inline-block; width: 18px; height: 18px; border: 3px solid #bae6fd; border-top-color: #0F83BF; border-radius: 50%; animation: pcp-spin .7s linear infinite; flex-shrink: 0; }
@keyframes pcp-spin { to { transform: rotate(360deg); } }

/* ── Tab warning message ──────────────────────────────────────────────────── */
.pcp-tab-warning { padding: 10px 14px; background: #fff3cd; border: 1px solid #ffc107; border-radius: 6px; font-size: 13px; color: #664d03; margin-bottom: 12px; font-weight: 500; }

/* ── Price display ────────────────────────────────────────────────────────── */
p.price .woocommerce-Price-amount { font-size: 1.5em; font-weight: 700; color: #0F83BF; }

/* ── Add to cart button ───────────────────────────────────────────────────── */
button[name="add-to-cart"] { transition: background .2s, opacity .2s !important; }
button[name="add-to-cart"].disabled { opacity: .6 !important; cursor: not-allowed !important; }

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .pcp-field-row { grid-template-columns: 1fr; gap: 4px; }
    .pcp-accordion-header { font-size: 13px; padding: 10px 12px; }
}

/* ── Read-only text fields ─────────────────────────────────────────────────── */
.pcp-field-input.pcp-readonly {
    background: #f3f4f6 !important;
    color: #6b7280 !important;
    cursor: not-allowed !important;
    border-color: #e5e7eb !important;
    user-select: none;
}
.pcp-field-input.pcp-readonly:focus {
    box-shadow: none !important;
    border-color: #e5e7eb !important;
}
