/* ─────────────────────────────────────────────────────────────────────────────
   WorkNow — Η όψη του προϊόντος «Εργασία Μίας Ημέρας».

   Το μοιράζονται δύο σελίδες: το /one-day-jobs.html (ανάρτηση αγγελίας) και
   το /one-day-pricelist.html (πακέτα). Ήταν inline στη μία· με τον χωρισμό
   θα έπρεπε να γραφτεί δεύτερη φορά, και δύο αντίγραφα του ίδιου gradient
   αποκλίνουν στην πρώτη αλλαγή. Ό,τι αφορά ΜΟΝΟ τη μία σελίδα (π.χ. η φόρμα)
   μένει inline εκεί.
   ───────────────────────────────────────────────────────────────────────────── */
/* ── Παλέτα ──────────────────────────────────────────────────────────
   Το μπλε του site και τίποτα δικό της. Είχε δοκιμαστεί ξεχωριστό μωβ ως
   «σήμα άλλου προϊόντος», αλλά δύο παλέτες στο ίδιο site κοστίζουν
   περισσότερο απ' όσο αποδίδουν: η σελίδα διαβαζόταν ως ξένο ένθετο. Ό,τι
   πρέπει να ξεχωρίσει, ξεχωρίζει με θέση, βάρος και λέξεις. */
body { background-color: #ffffff; }

/* Λευκός ήρωας, ίδιος με του /pricelist.html: οι δύο σελίδες τιμών του site
   πρέπει να φαίνονται αδελφές. Ήταν μπλε gradient· έμοιαζε με ξένο ένθετο
   δίπλα στις υπόλοιπες σελίδες, που είναι όλες λευκές. Το μπλε μένει μόνο
   στα κουμπιά και στις λέξεις που πρέπει να ξεχωρίσουν. */
.oneday-hero {
    background: #ffffff;
    color: #2c3e50;
    padding: 3.6rem 2rem 3rem;
    text-align: center;
    border-radius: 0 0 32px 32px;
    box-shadow: 0 4px 24px #1976d20a;
    margin-bottom: 2.5rem;
}

.oneday-hero-badge {
    display: inline-block;
    background: #e3f2fd;
    border: 1px solid rgba(25, 118, 210, 0.25);
    color: #1565c0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    padding: 0.35rem 0.95rem;
    border-radius: 50px;
    margin-bottom: 1rem;
}

.oneday-hero h1 {
    font-size: 2.3rem;
    font-weight: 800;
    color: #2c3e50;
    margin-bottom: 0.8rem;
    letter-spacing: -0.5px;
}

.oneday-hero p {
    font-size: 1.13rem;
    color: #4a5a6a;
    line-height: 1.65;
    max-width: 720px;
    margin: 0 auto 1.8rem;
}

.oneday-hero p strong { color: #1565c0; }

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.hero-actions a {
    text-decoration: none;
    font-weight: 800;
    padding: 0.95rem 1.8rem;
    border-radius: 50px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* Ίδια ζευγάρια με τα κουμπιά του ήρωα της αρχικής: γεμάτο μπλε για την
   κύρια ενέργεια, λευκό για τις υπόλοιπες. */
.hero-actions .primary {
    background: #1976d2;
    color: #fff;
    border: 2px solid #1976d2;
    box-shadow: 0 6px 18px rgba(25, 118, 210, 0.3);
}

.hero-actions .primary:hover {
    background: #1565c0;
    border-color: #1565c0;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(25, 118, 210, 0.32);
}

.hero-actions .secondary {
    background: #fff;
    color: #1565c0;
    border: 2px solid rgba(25, 118, 210, 0.35);
}

.hero-actions .secondary:hover {
    border-color: #1976d2;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.oneday-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem 4rem;
}

.section-heading {
    text-align: center;
    font-size: 1.75rem;
    font-weight: 800;
    color: #2c3e50;
    margin: 3.5rem 0 0.6rem;
}

.section-sub {
    text-align: center;
    color: #667;
    max-width: 720px;
    margin: 0 auto 2rem;
    line-height: 1.65;
}

/* ── Πώς λειτουργεί ── */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.step-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 1.9rem 1.6rem;
    box-shadow: 0 8px 26px rgba(25, 118, 210, 0.06);
}

.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1976d2, #1565c0);
    color: #fff;
    font-weight: 800;
    margin-bottom: 0.9rem;
}

.step-card h3 {
    font-size: 1.08rem;
    color: #2c3e50;
    margin: 0 0 0.5rem;
}

.step-card p {
    color: #5a6672;
    line-height: 1.6;
    margin: 0;
    font-size: 0.96rem;
}

/* ── Σύγκριση κόστους: το επιχείρημα που πουλάει ── */
.compare-box {
    margin-top: 2.5rem;
    padding: 2rem 2.2rem;
    background: #faf9fe;
    border: 1px dashed rgba(25, 118, 210, 0.45);
    border-radius: 20px;
}

.compare-box h3 {
    margin: 0 0 1.2rem;
    color: #0d47a1;
    font-size: 1.2rem;
}

.compare-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid #e2e8f0;
    color: #4a5a6a;
    font-size: 0.97rem;
}

.compare-row:last-child { border-bottom: none; }
.compare-row strong { color: #0d47a1; white-space: nowrap; }

/* ── Κάρτες πακέτων ── */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 1.8rem;
    align-items: stretch;
}

.pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 2.4rem 2rem;
    box-shadow: 0 10px 34px rgba(25, 118, 210, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(25, 118, 210, 0.16);
}

.pricing-card.featured {
    border: 2px solid #1976d2;
    box-shadow: 0 16px 44px rgba(25, 118, 210, 0.2);
}

.badge-popular {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #1976d2, #1565c0);
    color: #fff;
    padding: 0.35rem 1.1rem;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    white-space: nowrap;
}

.card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 1rem;
}

.card-price {
    font-size: 2.9rem;
    font-weight: 800;
    color: #1565c0;
    line-height: 1;
    letter-spacing: -1px;
}

.card-vat { font-size: 0.9rem; color: #6b7c8c; margin-top: 0.4rem; }
.card-total { margin-top: 0.6rem; font-size: 0.88rem; color: #4a5a6a; }
.card-total strong { color: #2c3e50; }

.per-ad {
    display: inline-block;
    margin-top: 0.9rem;
    background: #e8f5e9;
    border: 1px solid #c8e6c9;
    color: #2e7d32;
    font-weight: 700;
    font-size: 0.86rem;
    padding: 0.35rem 0.85rem;
    border-radius: 50px;
}

.per-ad s { color: #8c9bab; margin-right: 0.25rem; }
.per-ad b { color: #1b7f43; font-weight: 800; }

.features-list {
    list-style: none;
    padding: 0;
    margin: 1.6rem 0;
    flex-grow: 1;
}

.features-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid #eeeaf7;
    color: #4a5a6a;
    line-height: 1.45;
    font-size: 0.96rem;
}

.features-list li::before {
    content: "✓";
    color: #1976d2;
    font-weight: 800;
    flex-shrink: 0;
}

.features-list li.highlight { font-weight: 700; color: #1565c0; }

.cta-btn {
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 1rem 1.5rem;
    border-radius: 50px;
    font-weight: 800;
    font-size: 1rem;
    background: linear-gradient(135deg, #1976d2, #1565c0);
    color: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 6px 18px rgba(25, 118, 210, 0.3);
}

.cta-btn.outline {
    background: #fff;
    color: #1565c0;
    border: 2px solid #1976d2;
    box-shadow: none;
}

.cta-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(25, 118, 210, 0.32); }

/* ── Κάρτα αγγελίας ──
   Ίδια κάρτα με τις «Τελευταίες Αγγελίες» της αρχικής. Τη χρησιμοποιεί η
   προεπισκόπηση «Έτσι θα φαίνεται η αγγελία σου» του /one-day-jobs.html. */
.job-mini {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

.job-mini:hover {
    border-color: #1976d2;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.job-mini h4 {
    font-size: 1.1rem;
    color: #1976d2;
    margin: 0 0 0.5rem;
    line-height: 1.35;
}

.job-mini .meta { font-size: 0.9rem; color: #666; margin-bottom: 0.8rem; line-height: 1.6; }
.job-mini .meta strong { color: #1565c0; }

.job-mini .description {
    font-size: 0.95rem;
    color: #444;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 900px) {
    .pricing-grid { grid-template-columns: 1fr; gap: 2.4rem; }
    .oneday-hero h1 { font-size: 1.8rem; }
    .compare-row { flex-direction: column; gap: 0.2rem; }
}