/* Styles adapted for vertical product cards and layout */

/* Base */
.ccc-page-wrap {
    max-width: 1180px;
    margin: 28px auto;
    padding: 10px 18px;
   font-family: 'Montserrat', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: #3b2f6b;
    box-sizing: border-box;
}

/* Grid */
.ccc-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 34px;
    align-items: start;
}

/* Titles */
.ccc-title { font-size: 34px; font-weight:500; margin:6px 0 6px; color:#453795; }
.ccc-subtitle { font-size: 18px; margin-bottom: 12px; color:#453795; }

/* Tabs */
.ccc-tabs { display:flex; gap:12px; margin-bottom:18px; }
.ccc-tab { padding:8px 16px; border-radius:12px; background:#fff; border:2px solid rgba(47,107,255,0.12); color:#6b5fb5; font-weight:600; cursor:pointer; }
.ccc-tab-active { border-color:#2f6bff; box-shadow:0 8px 24px rgba(47,107,255,0.12); color:#1741d6; }

/* Cards and soft boxes */
.card, .card-soft { background:#fff; border-radius:14px; padding:14px; box-shadow: 0 8px 30px rgba(89,65,145,0.04); }

/* Billing inputs layout */
.ccc-billing .form-row, .ccc-shipping .form-row { margin-bottom:10px; }
.ccc-billing .form-row-first, .ccc-billing .form-row-last,
.ccc-shipping .form-row-first, .ccc-shipping .form-row-last { width: calc(50% - 10px); display:inline-block; vertical-align: middle; }
.woocommerce-billing-fields .form-row-wide, .woocommerce-shipping-fields .form-row-wide { width:100% !important; display:block; }

/* Inputs */
.ccc-checkout input.input-text, .ccc-checkout select, .ccc-checkout textarea {
    width:100%; height:44px; padding:10px 14px; border-radius:12px; border:1px solid #eee7ff; background:#fbf9ff;
    box-shadow: inset 0 3px 12px rgba(87,60,160,0.03); color:#3b2f6b; font-size:14px;
}
.ccc-checkout textarea.ccc-textarea { min-height:120px; height:auto; padding:12px; border-radius:12px; }

/* Item card styles */
/* Картка товару */
.ccc-item-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 20px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 20px rgba(89, 65, 145, 0.06);
    margin-bottom: 16px;
}

/* Ліва частина: зображення + назва */
.ccc-item-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.ccc-item-thumb {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f3fb;
}

.ccc-item-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Назва */
.ccc-item-title {
    font-size: 16px;
    font-weight: 600;
    color: #2d235a;
    margin: 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Права частина: кількість + ціна */
.ccc-item-right {
    display: flex;
    align-items: center;
    gap: 24px;
    font-weight: 600;
}

.ccc-item-qty {
    font-size: 14px;
    color: #6b5fb5;
}

.ccc-item-price {
    font-size: 16px;
    font-weight: 700;
    color: #2f6bff;
}

/* Section titles */
.ccc-section-title { font-size:20px; margin:18px 0 10px; color:#36256a; }

/* Summary (right) */
.ccc-summary-title { font-size:20px; margin-bottom:12px; color:#36256a; }
.ccc-summary-row { display:flex; justify-content:space-between; align-items:center; color:#6b5fb5; }
.ccc-summary-row.big { font-size:18px; font-weight:800; color:#2f6bff; }

/* Place order button styling via Woo's button */
.ccc-place-order .woocommerce-checkout-payment .button { border-radius:12px; padding:12px; background:linear-gradient(180deg,#2f6bff,#2a5be6); border:none; color:#fff; font-weight:800; box-shadow:0 12px 30px rgba(47,107,255,0.18); width:100%; }

/* Side image */
.ccc-image img { width:100%; border-radius:14px; object-fit:cover; }

/* Responsive */
@media (max-width:980px) {
    
    .ccc-right { order:2; }
    .ccc-left { order:1; }
    .ccc-billing .form-row-first, .ccc-billing .form-row-last { width:100%; display:block; }
}