/**
 * Public styles for CB ShopBase
 */

/* General container for the shortcode form, mimicking the image */
.cb-shopbase-custom-fields {
    background-color: #1a1a1a; /* Dark background */
    color: #fff; /* Light text */
    padding: 25px;
    border-radius: 10px;
    font-family: Arial, sans-serif;
    max-width: 500px; /* Or your desired width */
    margin: 20px auto; /* Center it if used standalone */
    border: 1px solid #333;
}

/* Input field styling */
.cb-shopbase-username-field-container label,
.cb-shopbase-coin-field-container label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: #ccc;
}

.cb-shopbase-username-field,
.cb-shopbase-coin-field {
    width: 100%;
    padding: 12px 15px;
    background-color: #2c2c2c; /* Darker input background */
    border: 1px solid #444; /* Subtle border */
    border-radius: 25px; /* Rounded borders */
    color: #fff;
    font-size: 16px;
    margin-bottom: 5px; /* Reduced margin for words below */
    box-sizing: border-box;
}

.cb-shopbase-coin-quantity-words {
    font-size: 12px;
    color: #aaa;
    text-align: right;
    margin-bottom: 15px;
    padding-right: 10px;
    min-height: 1em; /* Reserve space */
}

/* Price Type Radio Buttons */
.cb-shopbase-radio-group {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.cb-shopbase-radio-group label {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    border: 1px solid #555; /* Border for radio buttons */
    border-radius: 20px; /* Rounded */
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
    font-size: 14px;
}

.cb-shopbase-radio-group input[type="radio"] {
    display: none; /* Hide actual radio */
}

.cb-shopbase-radio-group input[type="radio"] + span {
    position: relative;
    padding-left: 25px; /* Space for custom radio */
}

.cb-shopbase-radio-group input[type="radio"] + span::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid #888;
    border-radius: 50%;
    background-color: #2c2c2c;
}

.cb-shopbase-radio-group input[type="radio"]:checked + span::after {
    content: '';
    position: absolute;
    left: 4px; /* Adjust for inner dot position */
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #dc3545; /* Red accent */
}

.cb-shopbase-radio-group label:has(input[type="radio"]:checked) {
    background-color: #dc3545; /* Red background for selected */
    border-color: #dc3545;
    color: #fff; /* Light text for selected with red background */
}

/* Calculated Amount Display */
.cb-shopbase-calculated-price-container {
    text-align: center;
    margin-bottom: 20px;
}

.cb-shopbase-calculated-price-container p {
    font-size: 12px;
    color: #aaa;
    margin-bottom: 5px;
    text-transform: uppercase;
}

#cb_shopbase_total_amount_display {
    font-size: 36px;
    font-weight: bold;
    color: #dc3545; /* Red accent */
    margin-bottom: 3px;
}

.cb-shopbase-total-amount-words {
    font-size: 12px;
    color: #ccc;
    min-height: 1em;
}

/* Info Bar (Available Currency / Rate) */
.cb-shopbase-info-bar {
    display: flex;
    justify-content: space-between;
    background-color: #2c2c2c;
    padding: 10px 15px;
    border-radius: 20px;
    margin-bottom: 20px;
    font-size: 14px;
}

.cb-shopbase-currency-info,
.cb-shopbase-rate-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cb-shopbase-currency-info span,
.cb_shopbase-rate-info span#cb_shopbase_calculated_price_display {
    font-weight: bold;
    color: #dc3545; /* Red accent */
    font-size: 16px;
}

/* Rate Chart */
.cb-shopbase-tier-pricing-tables .rate-chart-toggle {
    cursor: pointer;
    padding: 10px;
    background-color: #2c2c2c;
    border-radius: 5px;
    margin-bottom: 0; /* Remove bottom margin if content is directly below */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.cb-shopbase-tier-pricing-tables .rate-chart-toggle .toggle-icon {
    transition: transform 0.3s;
}

.cb-shopbase-tier-pricing-tables .rate-chart-toggle .toggle-icon.open {
    transform: rotate(180deg);
}

.cb-shopbase-rate-chart-content {
    background-color: #222; /* Slightly darker for chart area */
    padding: 15px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.cb-shopbase-tier-table {
    display: none; /* Hidden by default, JS will show active one */
}

.cb-shopbase-tier-table.active-tier-table {
    display: block;
}

.cb-shopbase-tier-table h4 {
    font-size: 14px;
    color: #dc3545; /* Red accent */
    margin-top: 0;
    margin-bottom: 10px;
    text-align: center;
}

.cb-shopbase-price-chart {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
}

.cb-shopbase-price-chart th,
.cb-shopbase-price-chart td {
    padding: 8px;
    border: 1px solid #444;
    text-align: center;
    font-size: 13px;
}

.cb-shopbase-price-chart th {
    background-color: #333;
    font-weight: bold;
    color: #ccc;
}

.cb-shopbase-price-chart td {
    color: #fff;
}

/* Buttons */
.cb-shopbase-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.cb-shopbase-actions .button {
    flex-grow: 1;
    padding: 12px 15px;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
    text-align: center;
}

.cb-shopbase-add-to-cart,
.cb-shopbase-buy-now {
    background-color: #dc3545; /* Red accent */
    color: #fff; /* Light text */
}

.cb-shopbase-add-to-cart:hover,
.cb-shopbase-buy-now:hover {
    background-color: #c82333; /* Darker red on hover */
}

/* Error messages */
.cb-shopbase-error {
    color: #ff6b6b; /* Light red for errors on dark background */
    display: block;
    font-size: 12px;
    margin-top: 5px;
    text-align: left; /* Align error to left below input */
    padding-left: 10px;
}

.cb-shopbase-has-error input,
.cb-shopbase-has-error select {
    border-color: #ff6b6b !important; /* Important to override other borders */
}

#cb_shopbase_form_messages {
    margin-top: 15px;
    text-align: center;
}

/* Original styles - assess if still needed or can be removed/adapted */
/* .cb-shopbase-custom-fields (original - overridden) */

.cb-shopbase-username-field,
.cb-shopbase-coin-field,
.cb-shopbase-price-type-field,
.cb-shopbase-calculated-price,
.cb-shopbase-total-amount {
    /* Original had margin-bottom: 15px; - check if new structure needs this for these specific classes */
    /* Current design uses containers for these, so direct margin might not be needed */
}

.cb-shopbase-username-field label,
.cb-shopbase-coin-field label,
.cb-shopbase-price-type-field label {
    /* Original had display: block; margin-bottom: 5px; font-weight: bold; */
    /* These are mostly handled by new container specific labels */
}

.cb-shopbase-username-field input, /* Original input styling - now more specific */
.cb-shopbase-coin-field input,
.cb-shopbase-price-type-field select {
    /* width: 100%; box-sizing: border-box; - still relevant and included in new styles */
}

.cb-shopbase-tier-pricing-tables {
    /* Original had margin-top: 20px; - handled by new structure */
}

/* Original .cb-shopbase-buy-now was specific, now part of .cb-shopbase-actions .button */

.cb-shopbase-price-type-field {
    margin-bottom: 15px;
}

.cb-shopbase-price-type-field label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.cb-shopbase-price-type-field select {
    width: 100%;
    box-sizing: border-box;
}

/* Short Description Link Icon */
.cb-shortdesc-link-icon svg {
    width: 1em; /* Adjust size relative to font size */
    height: 1em;
    vertical-align: middle;
    /* Add more specific color if currentColor is not desired */
    /* color: #yourPluginIconColor; */
}