/* assets/css/ring-pricing.css */

#ring-configurator {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 25px;
    margin: 20px 0;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

#ring-configurator h3 {
    margin-top: 0;
    color: #333;
    border-bottom: 2px solid #007cba;
    padding-bottom: 10px;
}

.config-section {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 5px;
    background: #f9f9f9;
}

.config-section label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}

#ring-configurator select,
#ring-configurator input[type="number"] {
    width: 100%;
    max-width: 200px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

#ring-configurator input[type="number"] {
    width: 120px;
}

.predefined-diamond,
.custom-diamond {
    border: 2px solid #007cba;
    border-radius: 8px;
    padding: 15px;
    margin: 10px 0;
    background: #f0f8ff;
    position: relative;
}

.predefined-diamond h5,
.custom-diamond h5 {
    margin: 0 0 10px 0;
    color: #007cba;
    font-size: 16px;
}

.customize-options {
    margin: 10px 0;
}

.customize-options label {
    font-weight: normal;
    margin-right: 10px;
}

.diamond-price {
    font-weight: bold;
    color: #28a745;
    margin: 10px 0;
    font-size: 16px;
}

.center-price-display {
    font-weight: bold;
    color: #28a745;
    margin-top: 10px;
}

.price-display {
    background: #e8f5e8;
    border: 2px solid #28a745;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    margin: 20px 0;
}

.price-display strong {
    font-size: 28px;
    color: #28a745;
}

.price-breakdown {
    font-size: 14px;
    color: #666;
    margin-top: 10px;
}

.single_add_to_cart_button {
    
    padding: 15px;
    font-size: 18px;
    background: #007cba;
    border-color: #007cba;
}

.single_add_to_cart_button:hover {
    background: #005a87;
    border-color: #005a87;
}

.single_add_to_cart_button:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.loading-spinner {
    color: #007cba;
    font-style: italic;
    display: inline-block;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.remove-diamond,
.remove-custom-diamond {
    background: #dc3545;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
    margin-top: 10px;
}

#add-custom-diamond {
    background: #28a745;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin: 10px 0;
}

.success {
    background: #d4edda;
    color: #155724;
    padding: 10px;
    border-radius: 5px;
    margin: 10px 0;
}

@media (max-width: 768px) {
    #ring-configurator {
        padding: 15px;
    }
    
    .config-section {
        padding: 10px;
    }
    
    #ring-configurator select,
    #ring-configurator input[type="number"] {
        max-width: 100%;
    }
}
```css
/* Custom styles for ring configurator */
.form-radio {
    accent-color: #2563eb; /* Blue for radio buttons */
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
}

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.5em;
}

.form-select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.text-sm.text-gray-500[title] {
    cursor: help;
    display: inline-block;
    position: relative;
}

.text-sm.text-gray-500[title]:hover::after {
    content: attr(title);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: white;
    padding: 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    white-space: nowrap;
    z-index: 10;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #ring-configurator {
        padding: 1rem;
    }

    .grid {
        grid-template-columns: 1fr;
    }

    .sticky {
        position: static;
    }
}

/* Reset and Base Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    color: #333;
    line-height: 1.6;
}

/* Configurator Container */
.configurator {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Titles */
.configurator-title {
    font-size: 24px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 24px;
}

.section-title {
    font-size: 18px;
    font-weight: 500;
    color: #1f2937;
    margin-bottom: 12px;
}

.subsection-title {
    font-size: 16px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
}

/* Grid Layout */
.configurator-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

@media (max-width: 768px) {
    .configurator-grid {
        grid-template-columns: 1fr;
    }
}

/* Options and Sections */
.configurator-options {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.section {
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.section-text {
    font-size: 14px;
    color: #4b5563;
}

.highlight {
    font-weight: 500;
    color: #1f2937;
}

/* Radio Buttons */
.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.form-radio {
    width: 20px;
    height: 20px;
    accent-color: #2563eb;
    cursor: pointer;
}

.form-radio:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

/* Select Dropdowns */
.form-select {
    width: 100%;
    padding: 8px;
    font-size: 14px;
    color: #333;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234b5563'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 18px;
    appearance: none;
}

.form-select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.select-label {
    display: block;
    font-size: 14px;
    color: #4b5563;
    margin-bottom: 4px;
    margin-top: 12px;
}

/* Tooltips */
.tooltip {
    display: inline-block;
    font-size: 12px;
    color: #6b7280;
    cursor: help;
    position: relative;
}

.tooltip:hover::after {
    content: attr(title);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 10;
    margin-top: 4px;
}

/* Summary Panel */
.summary-panel {
    position: sticky;
    top: 16px;
    background: #f9fafb;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.summary-title {
    font-size: 18px;
    font-weight: 500;
    color: #1f2937;
    margin-bottom: 16px;
}

.summary-content {
    font-size: 14px;
    color: #4b5563;
    margin-bottom: 16px;
}

.summary-price {
    font-size: 20px;
    font-weight: 600;
    color: #2563eb;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .configurator {
        padding: 16px;
    }

    .summary-panel {
        position: static;
        margin-top: 24px;
    }

    .radio-group {
        flex-direction: column;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .configurator-title {
        font-size: 20px;
    }

    .section-title {
        font-size: 16px;
    }

    .form-select,
    .select-label {
        font-size: 13px;
    }
}

.ring-pricing-form { margin: 20px 0; }
.metal-selection, .size-selection, .width-selection, .height-selection, ._center_stone, .side_stones, .alliansring-config { margin-bottom: 15px; }
.metal_op, .diamondsided { display: inline-block; margin-right: 10px; }
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
.modal-content { background: white; padding: 20px; margin: 15% auto; width: 80%; max-width: 500px; }
.close { float: right; font-size: 20px; cursor: pointer; }
select { width: 200px; }
.pricing-details p { font-size: 16px; }
.single_add_to_cart_button { padding: 10px 20px; background: #0073aa; color: white; border: none; cursor: pointer; }
.single_add_to_cart_button:disabled { background: #cccccc; cursor: not-allowed; }
.single_add_to_cart_button.loading { opacity: 0.5; }
.single_add_to_cart_button.added { background: #28a745; }
.pricing-errors { color: red; margin-top: 10px; }
.pricing-errors ul { list-style: disc; margin-left: 20px; }
.ring-pricing-form {
    margin: 20px 0;
}

.metal-selection, .size-selection, .width-selection, .height-selection, ._center_stone, .side_stones, .alliansring-config {
    margin-bottom: 15px;
}

.side_stones {
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
}

.side-left {
    background-color: #f9f9f9;
}

.side-right {
    background-color: #f0f0f0;
}

.diamondsided {
    margin: 5px 0;
}

.pricing-details {
    font-weight: bold;
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

.modal-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    width: 70%;
    max-width: 500px;
}

.close {
    float: right;
    font-size: 20px;
    cursor: pointer;
}

.quantity-addtocart-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 25px 0;
    flex-wrap: wrap;
}

.ring-quantity-input {
    width: 80px;
    height: 50px;
    text-align: center;
    font-size: 18px;
    border: 2px solid #ddd;
    border-radius: 6px;
    -moz-appearance: textfield; /* remove arrows in Firefox */
}

.ring-quantity-input::-webkit-outer-spin-button,
.ring-quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#add_cart_btn_ {
    height: 50px;
    padding: 0 30px;
    font-size: 16px;
    font-weight: 600;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s;
}

#add_cart_btn_:hover {
    background: #333;
}

#add_cart_btn_:disabled {
    background: #999;
    cursor: not-allowed;
}

/* Mobile – stack on small screens */
@media (max-width: 480px) {
    .quantity-addtocart-wrapper {
        flex-direction: column;
        gap: 12px;
    }
    .ring-quantity-input {
        width: 100%;
    }
    #add_cart_btn_ {
        width: 100%;
        padding: 15px;
    }
}
.ring-pricing-form label{
	margin-top:5px;
	margin-bottom:4px;
}
.ring-pricing-form select{
	border: 1px solid #141414;
}

/* Uniform dropdown spacing: match the Center Stone -> Ring Size gap to the other dropdowns */
.ring-pricing-form ._center_stone { margin-bottom: 0 !important; }
.ring-pricing-form .size-selection { margin-top: 0 !important; }

/* Every dropdown label is the same box, so every gap between a dropdown and the
   next label is the same. The centre-stone fields are labelled with <label>,
   while the metal, size, width and height blocks use the theme's <h6>, which
   brings fifteen pixels of its own top padding and a larger, lighter face --
   that padding was the whole of the extra gap above Ringstorlek. The rule sits
   here rather than beside the other configurator styles because that block is
   printed with the field markup, after this file, and would otherwise win. */
.ring-pricing-form .field > label,
.ring-pricing-form .selection > h6 {
    display: block !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 25px !important;
    letter-spacing: 0.78px !important;
    text-transform: uppercase !important;
}