/* Shipping Calculator Styles */

/* Design System Colors */
:root {
    --color-pink: #E27EF9;
    --color-black: #000000;
    --color-purple: #7200FF;
    --color-white: #FFFFFF;
}

/* Import Montserrat Font */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&display=swap');

/* Wrapper */
.rg-calculator-wrapper {
    font-family: 'Montserrat', sans-serif;
    color: var(--color-white);
    padding: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Steps */
.rg-step {
    display: none;
}

.rg-step-active {
    display: block;
}

/* Title */
.rg-title {
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 42px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin: 0 0 60px 0;
    color: var(--color-white);
    text-shadow: 0 0 30px var(--color-purple);
}

/* Error Messages */
.rg-error {
    background: rgba(255, 0, 0, 0.2);
    border: 1px solid #ff4444;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    text-align: center;
}

.rg-error p {
    margin: 0;
    color: #ff6666;
}

/* Section 1: Inputs - 2 columns 50/50 */
.rg-section-inputs {
    display: flex;
    gap: 40px;
    margin-bottom: 30px;
    align-items: flex-start;
}

.rg-section-inputs .rg-col-left {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}


.rg-section-inputs .rg-col-right {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Volume Label & Line */
.rg-volume-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
}

.rg-volume-line {
    width: 100%;
    height: 2px;
    background: var(--color-white);
    margin-bottom: 5px;
}

/* Dimensions Group */
.rg-dimensions-group {
    display: flex;
    gap: 15px;
    align-items: center;
}

/* Section 2: Categories - 2 columns */
.rg-section-categories {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 30px;
}

.rg-col-categories {
    flex: 0 0 70% !important;
    max-width: 70%;
}

.rg-col-footer {
    flex: 0 0 calc(30% - 30px) !important;
    max-width: calc(30% - 30px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
}

/* Input Groups */
.rg-input-group {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Custom Destination Dropdown */
.rg-custom-select {
    position: relative;
    display: inline-block;
}

.rg-select-selected {
    background: var(--color-black);
    border: 2px solid var(--color-purple);
    border-radius: 25px;
    color: var(--color-white);
    padding: 12px 40px 12px 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0px 0px 30px 0px var(--color-purple);
    white-space: nowrap;
}

.rg-select-selected::after {
    content: '';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--color-white);
}

.rg-select-selected.open::after {
    border-top: none;
    border-bottom: 6px solid var(--color-white);
}

.rg-select-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    background: var(--color-black);
    border: 2px solid var(--color-purple);
    border-radius: 15px;
    margin-top: 5px;
    z-index: 100;
    box-shadow: 0px 0px 30px 0px var(--color-purple);
    overflow: hidden;
}

.rg-select-dropdown.open {
    display: block;
}

.rg-select-search {
    width: 100%;
    padding: 12px 15px;
    border: none;
    border-bottom: 1px solid var(--color-purple);
    background: var(--color-black);
    color: var(--color-white);
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    outline: none;
    box-sizing: border-box;
}

.rg-select-search::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.rg-select-options {
    max-height: 250px;
    overflow-y: auto;
}

.rg-country-flag {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    border-radius: 2px;
}

.rg-select-option {
    padding: 12px 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-white);
    cursor: pointer;
    white-space: nowrap;
}

.rg-select-option:hover {
    background: var(--color-purple);
}

.rg-select-option:first-child {
    border-radius: 13px 13px 0 0;
}

.rg-select-option:last-child {
    border-radius: 0 0 13px 13px;
}

/* Dimension Inputs (Length, Width, Height) */
.rg-dimension-input {
    background: var(--color-black);
    border: 2px solid var(--color-purple) !important;
    border-radius: 25px !important;
    -webkit-border-radius: 25px !important;
    -moz-border-radius: 25px !important;
    color: var(--color-white);
    padding: 12px 20px !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    min-width: 160px;
    box-shadow: 0px 0px 30px 0px var(--color-purple);
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: none;
    outline: none;
}

/* Hide number input spinners */
.rg-dimension-input::-webkit-outer-spin-button,
.rg-dimension-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.rg-dimension-input::placeholder {
    color: var(--color-white);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    opacity: 1;
    transition: opacity 0.2s;
}

.rg-dimension-input:focus::placeholder {
    opacity: 0.3;
}

.rg-dimension-input.has-value::placeholder {
    opacity: 0;
}

/* Weight Display */
.rg-weight-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.rg-weight-display {
    background: var(--color-black);
    border: 2px solid var(--color-purple);
    border-radius: 25px;
    padding: 12px 20px;
    box-shadow: 0px 0px 30px 0px var(--color-purple);
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    user-select: none;
}

.rg-weight-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-white);
}

.rg-weight-value {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-white);
}

.rg-reset-btn {
    background: var(--color-black) !important;
    background-color: var(--color-black) !important;
    border: 2px solid var(--color-purple) !important;
    border-radius: 50% !important;
    color: var(--color-white) !important;
    cursor: pointer;
    padding: 10px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 30px 0px var(--color-purple);
    transition: all 0.3s;
}

.rg-reset-btn:hover,
.rg-reset-btn:focus {
    background: var(--color-purple) !important;
    background-color: var(--color-purple) !important;
    border-color: var(--color-purple) !important;
    box-shadow: 0px 0px 40px 0px var(--color-purple) !important;
    outline: none !important;
}

/* Instruction */
.rg-instruction {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    margin: 100px 0 20px;
    letter-spacing: 1px;
    color: var(--color-white);
}

/* Categories Grid */
.rg-categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

@media (max-width: 900px) {
    .rg-categories-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .rg-categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Category Item */
.rg-category-item {
    position: relative;
}

.rg-category-btn {
    width: 100%;
    aspect-ratio: 2.3;
    background: var(--color-black);
    border: 2px solid var(--color-purple);
    border-radius: 15px;
    color: var(--color-white);
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(114, 0, 255, 0.6);
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* Overlay pentru imagine background */
.rg-cat-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

/* Label (numele categoriei) */
.rg-cat-name {
    position: absolute;
    top: 50%;
    left: 8px;
    right: 8px;
    font-size: 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--color-white);
    text-transform: uppercase;
    text-align: center;
    transform: translateY(-50%);
    transition: font-size 200ms linear, top 200ms linear, transform 200ms linear;
    z-index: 2;
}

/* Label când e selectat - se micșorează și se mută sus */
.rg-category-btn.selected .rg-cat-name {
    font-size: 9px;
    top: 12px;
    transform: translateY(0);
}

/* Counter container */
.rg-cat-counter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;
    opacity: 0;
    transition: opacity 200ms linear, transform 200ms linear;
    z-index: 2;
    pointer-events: none;
}

/* Counter când e selectat - apare cu fade-in și scale */
.rg-category-btn.selected .rg-cat-counter {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

/* Butoanele din counter (–, +) */
.rg-cat-counter-btn {
    background: transparent;
    border: none;
    color: var(--color-white);
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    user-select: none;
    line-height: 1;
}

/* Valoarea din counter */
.rg-cat-count {
    font-size: 22px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--color-white);
    text-align: center;
    min-width: 30px;
}

/* Zone de touch (când e selectat) */
.rg-touch-zone {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    z-index: 10;
    background: transparent;
    border: none;
    cursor: pointer;
    display: none;
}

.rg-touch-zone.left {
    left: 0;
}

.rg-touch-zone.right {
    right: 0;
}

.rg-category-btn.selected .rg-touch-zone {
    display: block;
}

.rg-cat-description {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 5px;
    text-align: center;
}

/* Category Counter (when expanded) */
.rg-category-counter {
    display: none;
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30, 30, 50, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 5px;
    z-index: 10;
}

.rg-category-counter.visible {
    display: flex;
    align-items: center;
    gap: 5px;
}

.rg-category-counter button {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: #fff;
    width: 28px;
    height: 28px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.rg-category-counter button:hover {
    background: rgba(255, 255, 255, 0.2);
}

.rg-category-counter span {
    min-width: 30px;
    text-align: center;
    font-weight: 700;
}

/* Disclaimer */
.rg-disclaimer {
    text-align: center;
}

.rg-disclaimer-title {
    display: block;
    color: #ff0000;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.rg-disclaimer-text {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    color: var(--color-white);
    line-height: 1.4;
}

.rg-disclaimer-sizes {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 700;
    margin-top: 5px;
    letter-spacing: 5px;
    color: var(--color-white);
}

/* Calculate Button */
.rg-calculate-btn {
    background: var(--color-black);
    color: var(--color-white);
    border: 2px solid var(--color-purple) !important;
    border-radius: 25px !important;
    -webkit-border-radius: 25px !important;
    -moz-border-radius: 25px !important;
    padding: 18px 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    cursor: pointer;
    transition: background 0.3s, box-shadow 0.3s;
    box-shadow: 0px 0px 30px 0px var(--color-purple);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.rg-calculate-btn:hover {
    background: var(--color-purple);
    box-shadow: 0px 0px 40px 0px var(--color-purple);
}

.rg-calculate-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==================== STEP 2: RESULTS ==================== */

.rg-results-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.rg-back-btn {
    display: block !important;
    margin: 40px auto 0 !important;
    background: var(--color-black) !important;
    background-color: #000000 !important;
    color: var(--color-white) !important;
    border: 2px solid var(--color-purple) !important;
    border-color: #7200FF !important;
    border-radius: 25px !important;
    -webkit-border-radius: 25px !important;
    -moz-border-radius: 25px !important;
    padding: 18px 50px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    cursor: pointer !important;
    transition: background 0.3s, box-shadow 0.3s !important;
    box-shadow: 0px 0px 30px 0px var(--color-purple) !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.rg-back-btn:hover,
.rg-back-btn:focus {
    background: var(--color-purple) !important;
    background-color: #7200FF !important;
    box-shadow: 0px 0px 40px 0px var(--color-purple) !important;
    outline: none !important;
}

/* Results Grid */
.rg-results-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
}

.rg-results-grid .rg-shipping-card {
    flex: 0 0 auto;
    width: 150px;
}

/* Shipping Card */
.rg-shipping-card {
    text-align: center;
    padding: 15px;
}

.rg-shipping-logo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
}

.rg-shipping-logo img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}

.rg-shipping-logo.no-logo {
    background: linear-gradient(145deg, #f0f0f0, #e0e0e0);
    font-size: 12px;
    color: #666;
    font-weight: 600;
}

.rg-shipping-name {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #fff;
    line-height: 1.3;
}

.rg-shipping-price {
    font-size: 18px;
    font-weight: 800;
    color: var(--color-purple);
    margin-bottom: 5px;
}

.rg-shipping-days {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.rg-shipping-tax-free {
    display: inline-block;
    background: #22c55e;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 10px;
    margin-top: 8px;
}

/* Loading */
.rg-loading {
    text-align: center;
    padding: 50px;
}

.rg-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: rg-spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes rg-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .rg-section-categories {
        flex-direction: column !important;
        gap: 40px;
    }

    .rg-col-categories {
        flex: 0 0 100% !important;
        max-width: 100%;
    }

    .rg-col-footer {
        flex: 0 0 100% !important;
        max-width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .rg-disclaimer {
        text-align: left;
    }
}

/* Responsive - Mobile Large */
@media (max-width: 768px) {
    .rg-calculator-wrapper {
        padding: 20px 15px;
    }

    .rg-title {
        font-size: 24px;
        letter-spacing: 1px;
        margin-bottom: 40px;
    }

    /* Section Inputs - Stack vertically */
    .rg-section-inputs {
        flex-direction: column;
        gap: 30px;
    }

    .rg-section-inputs .rg-col-left,
    .rg-section-inputs .rg-col-right {
        flex: 0 0 100%;
        width: 100%;
        align-items: center;
    }

    .rg-input-group.rg-destination {
        width: 100%;
    }

    .rg-custom-select {
        width: 100%;
        display: block;
    }

    .rg-select-selected {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
        white-space: normal;
    }

    .rg-select-dropdown {
        width: 100%;
        left: 0;
        right: 0;
        box-sizing: border-box;
    }

    .rg-select-option {
        white-space: normal;
        word-wrap: break-word;
    }

    .rg-weight-wrapper {
        width: 100%;
        display: flex;
    }

    .rg-weight-display {
        flex: 1;
        justify-content: center;
        box-sizing: border-box;
    }

    .rg-reset-btn {
        flex-shrink: 0;
    }

    /* Dimensions - Stack vertically */
    .rg-dimensions-group {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .rg-dimension-input {
        width: 100%;
        min-width: unset;
        box-sizing: border-box;
    }

    /* Instruction */
    .rg-instruction {
        font-size: 14px;
        margin: 60px 0 20px;
        text-align: center;
    }

    /* Categories Section - Stack vertically */
    .rg-section-categories {
        flex-direction: column !important;
        gap: 30px;
    }

    .rg-col-categories,
    .rg-col-footer {
        flex: 0 0 100% !important;
        max-width: 100%;
    }

    .rg-col-footer {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .rg-disclaimer {
        text-align: center;
    }

    .rg-disclaimer-title {
        font-size: 16px;
    }

    .rg-disclaimer-text {
        font-size: 11px;
    }

    .rg-disclaimer-sizes {
        font-size: 14px;
        letter-spacing: 3px;
    }

    /* Calculate Button */
    .rg-calculate-btn {
        width: 100%;
        padding: 15px 30px;
        font-size: 18px;
        letter-spacing: 2px;
    }

    /* Results */
    .rg-results-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    .rg-results-grid .rg-shipping-card {
        width: 100%;
    }

    .rg-shipping-card {
        padding: 10px;
    }

    .rg-shipping-logo {
        width: 70px;
        height: 70px;
    }
}

/* Responsive - Mobile Small */
@media (max-width: 480px) {
    .rg-calculator-wrapper {
        padding: 15px 10px;
    }

    .rg-title {
        font-size: 18px;
        letter-spacing: 1px;
        margin-bottom: 30px;
    }

    .rg-categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .rg-cat-name {
        font-size: 10px;
    }

    .rg-category-btn.selected .rg-cat-name {
        font-size: 8px;
    }

    .rg-cat-counter-btn {
        font-size: 18px;
    }

    .rg-cat-count {
        font-size: 18px;
    }

    .rg-select-selected {
        font-size: 14px;
        padding: 10px 35px 10px 15px;
    }

    .rg-dimension-input {
        font-size: 14px;
        padding: 10px 15px !important;
    }

    .rg-dimension-input::placeholder {
        font-size: 14px;
    }

    .rg-volume-label {
        font-size: 18px;
    }

    .rg-weight-label,
    .rg-weight-value {
        font-size: 12px;
    }

    .rg-instruction {
        font-size: 12px;
        margin: 40px 0 15px;
    }

    .rg-calculate-btn {
        font-size: 16px;
        padding: 12px 25px;
    }

    .rg-results-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .rg-results-grid .rg-shipping-card {
        width: 100%;
    }

    .rg-shipping-card {
        padding: 5px;
    }

    .rg-shipping-logo {
        width: 55px;
        height: 55px;
        margin-bottom: 8px;
    }

    .rg-shipping-name {
        font-size: 9px;
        margin-bottom: 5px;
    }

    .rg-shipping-price {
        font-size: 12px;
    }

    .rg-shipping-days {
        font-size: 9px;
    }
}