.course-detail-card { background: #fff; border-radius: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); overflow: hidden; }
.course-detail-content { padding: 24px; }
.course-detail-thumb {
    float: right;
    width: min(45%, 280px);
    max-height: 130px;
    object-fit: cover;
    margin: 10px 12px 14px 20px;
    border-radius: 10px;
}
.course-detail-content::after {
    content: "";
    display: table;
    clear: both;
}
.course-detail-meta { color: #4f5d75; font-weight: 600; margin-bottom: 14px; }
.course-hours-highlight {
    display: inline-block;
    margin-left: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #ffe8a3;
    color: #5f3b00;
    font-weight: 800;
}
.course-free-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding: 5px 14px;
    border-radius: 999px;
    background: #dcfce7;
    border: 1px solid #86efac;
    color: #14532d;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.course-format-pricing-wrap {
    margin: 12px 0 18px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fafafa;
}
.course-format-pricing-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: baseline;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.course-format-pricing-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}
.course-format-pricing-help {
    font-size: 0.9rem;
    color: #4b5563;
}
.course-format-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}
.course-format-price-row-single {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.course-format-price-row-single .course-format-price-item {
    flex: 1 1 auto;
    min-width: 0;
}
.course-format-price-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #eceef2;
}
.course-format-price-item:has(.course-purchase-form-inline) {
    align-items: center;
    gap: 10px;
}
.course-format-price-item.is-available {
    border-color: #bfdbfe;
    background: #f8fbff;
}
.course-format-price-item.is-unavailable {
    border-color: #edf0f4;
    background: #fcfcfd;
    opacity: 0.62;
}
.course-format-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.course-format-name { font-weight: 700; color: #1f2937; }
.course-format-status {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 999px;
    padding: 2px 8px;
    background: #e5e7eb;
    color: #374151;
}
.course-format-price-item.is-available .course-format-status {
    background: #dcfce7;
    color: #166534;
}
.course-format-price-item.is-unavailable .course-format-status {
    background: #f3f4f6;
    color: #9ca3af;
}
.course-format-desc {
    font-size: 0.88rem;
    line-height: 1.35;
    color: #4b5563;
}
.course-format-price-item.is-unavailable .course-format-name,
.course-format-price-item.is-unavailable .course-format-desc,
.course-format-price-item.is-unavailable .course-format-price {
    color: #9ca3af;
}
.course-format-price { font-weight: 800; color: #0f766e; }
/* cert-pkg: regular available price tiles on a certification package */
.course-format-price-item.is-available.course-format-price-item-cert-pkg {
    border-color: #f2a7c0;
    background: linear-gradient(160deg, #fff2f7 0%, #fde7f1 60%);
}
.course-format-price-item.is-available.course-format-price-item-cert-pkg .course-format-status {
    background: #ffd6e6;
    color: #9d174d;
    border: 1px solid #f2a7c0;
}
.course-format-price-item.is-available.course-format-price-item-cert-pkg .course-format-price {
    color: #9d174d;
}
/* cert: the certification-price-specific tile */
.course-format-price-item.course-format-price-item-cert,
.course-format-price-item.is-available.course-format-price-item-cert,
.course-format-price-item.is-unavailable.course-format-price-item-cert {
    border-color: #f2a7c0;
    background: linear-gradient(160deg, #fff2f7 0%, #fde7f1 60%);
}
.course-format-price-item.course-format-price-item-cert .course-format-name,
.course-format-price-item.course-format-price-item-cert .course-format-desc,
.course-format-price-item.course-format-price-item-cert .course-format-price {
    color: #9d174d;
}
.course-format-price-item.course-format-price-item-cert .course-format-status {
    background: #ffd6e6;
    color: #9d174d;
    border: 1px solid #f2a7c0;
}
.course-format-price-cert {
    color: #9d174d;
}
.course-purchase-panel {
    margin: 14px 0 16px;
    padding: 12px;
    border-radius: 10px;
    background: #f3f8ff;
    border: 1px solid #dbeafe;
}
.course-purchase-panel.course-purchase-panel-cert {
    background: linear-gradient(160deg, #fff2f7 0%, #fde7f1 60%);
    border: 1px solid #f2a7c0;
}
.course-format-pricing-wrap.course-format-pricing-wrap-cert {
    border-color: #f2a7c0;
    background: linear-gradient(160deg, #fff2f7 0%, #fde7f1 60%);
}
.course-purchase-form-cert .course-format-label {
    color: #9d174d;
}
.course-purchase-form-cert .course-format-select {
    border-color: #f2a7c0;
    background: #fff7fb;
}
.course-purchase-form-cert .course-format-select:focus {
    border-color: #9d174d;
    outline-color: #f2a7c0;
}
.course-purchase-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.course-purchase-form-inline {
    display: flex;
    align-items: center;
    margin: 0;
    flex-shrink: 0;
    align-self: center;
}
.course-format-label { font-weight: 700; color: #24324a; }
.course-format-select {
    min-width: 220px;
    padding: 9px 10px;
    border: 1px solid #cdd6e1;
    border-radius: 8px;
    background: #fff;
}
.course-test-info-wrap {
    margin: 14px 0 18px;
    padding: 14px;
    border-radius: 10px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
}
.course-test-info-title {
    margin: 0 0 8px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #9a3412;
}
.course-test-info-list {
    margin: 0;
    padding-left: 20px;
}
.course-test-info-list li {
    margin-bottom: 6px;
    color: #7c2d12;
}
.course-approval-codes-wrap {
    margin: 8px 0 12px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}
.course-approval-codes-title {
    margin: 0 0 4px;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1e3a8a;
}
.course-approval-codes-text {
    font-size: 0.85rem;
    line-height: 1.4;
    color: #1f2937;
}
.course-detail-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.course-detail-btn { display: inline-block; padding: 10px 18px; border-radius: 8px; border: none; text-decoration: none; font-weight: 700; cursor: pointer; }
.course-detail-btn-primary { background: linear-gradient(180deg, #4FB09D 0%, #1f5f53 100%); color: #fff; transition: background 0.25s ease, transform 0.2s ease; }
.course-detail-btn-primary:hover { background: linear-gradient(180deg, #3d9181 0%, #173f37 100%); color: #fff; transform: translateY(-2px); }
.course-detail-btn-secondary { background: #f3f4f6; color: #111827; }
@media (max-width: 767px) {
    .course-detail-content { padding: 18px; }
    .course-detail-thumb {
        float: none;
        display: block;
        width: min(100%, 220px);
        max-height: 100px;
        margin: 0 auto 12px;
    }
    .course-hours-highlight {
        margin-left: 0;
        margin-top: 8px;
    }
    .course-purchase-form {
        flex-direction: column;
        align-items: stretch;
    }
    .course-format-select {
        width: 100%;
        min-width: 0;
    }
}