/*
 * TempsPlus — Main Front-End Stylesheet
 * Uses CSS custom properties defined in the child theme.
 * Scoped to .tp-* classes to avoid conflicting with Elementor pages.
 */

/* ── Base button ────────────────────────────────────────────────────────────── */
.tp-btn {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    gap:              var(--tp-space-2);
    padding:          var(--tp-space-3) var(--tp-space-6);
    border:           none;
    border-radius:    var(--tp-radius-md);
    font-family:      var(--tp-font-sans);
    font-size:        var(--tp-text-sm);
    font-weight:      var(--tp-weight-semibold);
    cursor:           pointer;
    text-decoration:  none;
    transition:       background var(--tp-transition), box-shadow var(--tp-transition), transform var(--tp-transition);
    white-space:      nowrap;
}

.tp-btn:disabled {
    opacity: 0.5;
    cursor:  not-allowed;
}

.tp-btn--primary {
    background: var(--tp-primary);
    color:      var(--tp-white);
}
.tp-btn--primary:hover:not(:disabled) {
    background:  var(--tp-secondary);
    box-shadow:  var(--tp-shadow-md);
    transform:   translateY(-1px);
    color:       var(--tp-white);
}

.tp-btn--secondary {
    background: transparent;
    color:      var(--tp-primary);
    border:     1.5px solid var(--tp-primary);
}
.tp-btn--secondary:hover:not(:disabled) {
    background: var(--tp-primary-light);
}

.tp-btn--danger {
    background: var(--tp-accent-red);
    color:      var(--tp-white);
}

.tp-btn--full { width: 100%; }

/* ── Card ───────────────────────────────────────────────────────────────────── */
.tp-card {
    background:    var(--tp-white);
    border:        1px solid var(--tp-border);
    border-radius: var(--tp-radius-lg);
    padding:       var(--tp-space-6);
    box-shadow:    var(--tp-shadow-sm);
}

.tp-card--hover {
    transition: box-shadow var(--tp-transition-md), transform var(--tp-transition-md);
}
.tp-card--hover:hover {
    box-shadow: var(--tp-shadow-md);
    transform:  translateY(-2px);
}

/* ── Badges ─────────────────────────────────────────────────────────────────── */
.tp-badge {
    display:       inline-flex;
    align-items:   center;
    padding:       2px var(--tp-space-3);
    border-radius: var(--tp-radius-full);
    font-size:     var(--tp-text-xs);
    font-weight:   var(--tp-weight-semibold);
    line-height:   1.5;
}
.tp-badge--blue   { background: rgba(56,179,250,0.12); color: var(--tp-secondary); }
.tp-badge--green  { background: rgba(76,230,128,0.12); color: #1a9e48; }
.tp-badge--yellow { background: rgba(251,191,36,0.15); color: #b45309; }
.tp-badge--red    { background: rgba(250,9,9,0.10);    color: var(--tp-accent-red); }

/* ── Status indicators ──────────────────────────────────────────────────────── */
.tp-status {
    display:       inline-block;
    padding:       2px var(--tp-space-2);
    border-radius: var(--tp-radius-sm);
    font-size:     var(--tp-text-xs);
    font-weight:   var(--tp-weight-medium);
}
.tp-status--pending_review, .tp-status--reviewing { background:#FEF9C3; color:#854D0E; }
.tp-status--approved, .tp-status--active, .tp-status--hired { background:#DCFCE7; color:#166534; }
.tp-status--rejected, .tp-status--closed, .tp-status--expired { background:#FEE2E2; color:#991B1B; }
.tp-status--shortlisted, .tp-status--interview_set { background:#DBEAFE; color:#1E40AF; }
.tp-status--suspended, .tp-status--past_due { background:#FEE2E2; color:#991B1B; }
.tp-status--none { background:#F3F4F6; color:#6B7280; }

/* ── Form elements ──────────────────────────────────────────────────────────── */
.tp-form-group {
    display:        flex;
    flex-direction: column;
    gap:            var(--tp-space-1);
    margin-bottom:  var(--tp-space-5);
}

.tp-form-group label {
    font-size:   var(--tp-text-sm);
    font-weight: var(--tp-weight-medium);
    color:       var(--tp-heading);
}

.tp-input,
.tp-select,
.tp-textarea {
    width:         100%;
    padding:       var(--tp-space-3) var(--tp-space-4);
    border:        1.5px solid var(--tp-border);
    border-radius: var(--tp-radius-md);
    font-family:   var(--tp-font-sans);
    font-size:     var(--tp-text-sm);
    color:         var(--tp-heading);
    background:    var(--tp-white);
    transition:    border-color var(--tp-transition), box-shadow var(--tp-transition);
    box-sizing:    border-box;
}

.tp-input:focus,
.tp-select:focus,
.tp-textarea:focus {
    outline:      none;
    border-color: var(--tp-primary);
    box-shadow:   0 0 0 3px rgba(56,179,250,0.15);
}

.tp-input::placeholder,
.tp-textarea::placeholder { color: #9CA3AF; }

.tp-textarea { resize: vertical; min-height: 120px; }

.tp-input-icon {
    position: relative;
}
.tp-input-icon .tp-input { padding-left: var(--tp-space-10); }
.tp-input-icon svg {
    position:  absolute;
    left:      var(--tp-space-3);
    top:       50%;
    transform: translateY(-50%);
    color:     var(--tp-body);
    width:     16px;
    height:    16px;
}

/* ── Error / success messages ───────────────────────────────────────────────── */
.tp-notice {
    padding:       var(--tp-space-3) var(--tp-space-4);
    border-radius: var(--tp-radius-md);
    font-size:     var(--tp-text-sm);
    margin-bottom: var(--tp-space-4);
}
.tp-notice--error   { background:#FEE2E2; color:#991B1B; border: 1px solid #FECACA; }
.tp-notice--success { background:#DCFCE7; color:#166534; border: 1px solid #BBF7D0; }
.tp-notice--info    { background:#DBEAFE; color:#1E40AF; border: 1px solid #BFDBFE; }
.tp-notice--warning { background:#FEF9C3; color:#854D0E; border: 1px solid #FEF08A; }

/* ── Payment button ─────────────────────────────────────────────────────────── */
.tp-payment-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    padding:         var(--tp-space-4) var(--tp-space-8);
    background:      var(--tp-primary);
    color:           var(--tp-white);
    border-radius:   var(--tp-radius-md);
    font-family:     var(--tp-font-sans);
    font-size:       var(--tp-text-base);
    font-weight:     var(--tp-weight-bold);
    text-decoration: none;
    transition:      background var(--tp-transition), box-shadow var(--tp-transition);
    width:           100%;
    text-align:      center;
    margin-top:      var(--tp-space-4);
}
.tp-payment-btn:hover {
    background:  var(--tp-secondary);
    box-shadow:  var(--tp-shadow-md);
    color:       var(--tp-white);
}

/* ── Admin notice within front-end ─────────────────────────────────────────── */
.tp-admin-notice {
    padding:       var(--tp-space-3);
    background:    #FFFBEB;
    border:        1px solid #FDE68A;
    border-radius: var(--tp-radius-md);
    font-size:     var(--tp-text-sm);
    color:         #92400E;
}

/* ── Candidate reviews ──────────────────────────────────────────────────────── */
.tp-review-item {
    padding:       12px 0;
    border-bottom: 1px solid var(--tp-border, #e5e7eb);
}
.tp-review-item:last-child {
    border-bottom: none;
}
.tp-review-meta {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-wrap:   wrap;
    margin-bottom: 4px;
}
.tp-review-text {
    margin:      4px 0 0;
    color:       var(--tp-body, #374151);
    font-size:   var(--tp-text-sm, 0.875rem);
    line-height: 1.5;
}
.tp-error {
    color:     var(--tp-accent-red);
    font-size: var(--tp-text-sm);
}

/* ── Loading spinner ────────────────────────────────────────────────────────── */
.tp-spinner {
    width:  24px;
    height: 24px;
    border: 3px solid var(--tp-border);
    border-top-color: var(--tp-primary);
    border-radius: 50%;
    animation: tp-spin 0.7s linear infinite;
}
@keyframes tp-spin { to { transform: rotate(360deg); } }

/* ── Responsive helpers ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .tp-hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
    .tp-hide-desktop { display: none !important; }
}