/* ==========================================================================
   🍫 KAKAO CHOCOGRAM BUILDER STYLES (Phase 1: 2 Rows, extendable to 3)
   ========================================================================== */

:root {
    --choco-dark: #3a2010;
    --choco-milk: #7d4d33;
    --choco-gold: #c59b27;
    --choco-gold-light: #e4c46f;
    --choco-bg-warm: #ffffff;
    --choco-border: #ebdcd0;
    --choco-text: #2c1a0e;
    --choco-shadow: rgba(58, 32, 16, 0.15);
    --slot-empty-bg: #4a2b18;
}

.kakao-chocogram-builder {
    font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--choco-text);
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 20px 0 40px;
    box-shadow: none;
}

/* --- 1. Status Bar --- */
.builder-status-bar {
    text-align: center;
    margin: 20px auto 30px;
    background: transparent;
    border: none;
    border-bottom: 1px dashed #ebdcd0;
    border-radius: 0;
    padding: 0 0 16px 0;
    box-shadow: none;
    max-width: 860px;
}

.status-message {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #333333;
    display: block;
    text-align: center;
}

.status-message::before,
.status-message::after {
    content: "";
    display: inline-block;
    width: 40px;
    height: 1px;
    background: #ebdcd0;
    vertical-align: middle;
    margin: 0 15px;
}

.status-icon {
    display: inline-block !important;
    margin-right: 8px;
    font-size: 18px;
    animation: bounce 2s infinite;
}

.price-display {
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price-display .label {
    font-size: 14px;
    color: var(--choco-text);
}

.price-display .value {
    font-size: 22px;
    font-weight: 700;
    color: #a37254;
}

/* --- 2. Chocolate Box Frame (Original Parchment Calligraphy) --- */
.chocolate-box-outer-frame {
    position: relative;
    max-width: 860px;
    margin: 0 auto 24px;
    box-shadow: 0 10px 30px rgba(58, 32, 16, 0.25);
    border-radius: 4px;
    background: transparent;
    overflow: hidden;
}

/* The Calligraphy Frame Overlay sitting on top */
.chocolate-box-outer-frame img.placeholder {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none; /* Clicks will pass through this image */
    z-index: 2;
    position: relative;
}

/* Absolutely positioned Grid slots behind the frame overlay */
.kakao-chocogram-box-grid.sweet_target {
    position: absolute;
    left: 5.1%;
    top: 15.5%;
    width: 89.8%;
    height: 69%;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 3px;
    background: #ffffff;
    padding: 0;
    margin: 0;
    border: none;
    overflow: hidden;
}

/* --- 3. Grid Slots --- */
.chocogram-slot {
    position: relative;
    cursor: pointer;
    background: #e6dfd6;
    box-shadow: inset 1px 2px 4px rgba(58, 32, 16, 0.08);
    border-radius: 2px;
    border: 1px solid transparent;
    overflow: hidden;
    transition: transform 0.15s ease;
}

.chocogram-slot:hover {
    transform: scale(1.03);
    border-color: transparent;
    background: #f2ede6;
    box-shadow: inset 1px 2px 4px rgba(58, 32, 16, 0.05), 0 2px 6px rgba(0, 0, 0, 0.04);
}

/* Active Slot Indicator (Pushed to z-index 3 to show on top of the frame) */
.chocogram-slot.active {
    z-index: 3;
    background: #faf9f6;
    box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.06), 0 0 6px rgba(0, 0, 0, 0.08);
    border-color: transparent;
}

/* Content: Space / Empty Mold */
.slot-content-empty-mold {
    width: 100%;
    height: 100%;
}

/* Content: Chocolate Character Block */
.slot-content-character {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #855338 0%, #56331f 100%);
    border: 1px solid #946146;
    border-bottom: 2px solid #3c2011;
    border-right: 2px solid #3c2011;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.slot-content-character .char-letter {
    font-family: "Georgia", serif;
    font-size: 20px;
    font-weight: bold;
    color: #432414;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.1), -1px -1px 0px rgba(0, 0, 0, 0.5);
}

/* Content: Decoration Sweet Image */
.slot-content-sweet {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    background: linear-gradient(135deg, #916147 0%, #683f29 100%);
    border: 1px solid #a37257;
    border-bottom: 2px solid #3d2112;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

.slot-content-sweet img {
    max-width: 92%;
    max-height: 92%;
    object-fit: contain;
    filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.4));
}

/* --- 4. Controls Row --- */
.builder-controls-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.ctrl-btn {
    border: 1px solid #e0e0e0;
    border-radius: 4px !important;
    background: #fff;
    color: #333;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.ctrl-btn:hover {
    background: #f7f7f7;
    color: #a37254;
    border-color: #a37254;
}

.ctrl-btn .icon {
    font-size: 15px;
}

.ctrl-btn.btn-clear-all:hover {
    background: #fff5f5;
    color: #c0392b;
    border-color: #c0392b;
}

/* --- 5. Unified Keyboard --- */
.builder-keyboard-wrapper {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 28px;
    box-shadow: none;
}

.keyboard-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 20px;
    background: #ffffff;
}

.characters-keyboard-grid {
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    gap: 8px;
    justify-content: center;
    max-width: 860px; /* Fits exactly 15 keys (48px wide + 8px gap) with some padding */
    margin: 0 auto;
    padding: 20px;
}

@media (max-width: 900px) {
    .characters-keyboard-grid {
        grid-template-columns: repeat(10, 1fr);
        max-width: 580px;
        padding: 16px;
    }
    .char-key-btn {
        max-width: 42px;
        font-size: 16px;
    }
}

@media (max-width: 600px) {
    .characters-keyboard-grid {
        grid-template-columns: repeat(8, 1fr);
        max-width: 100%;
        padding: 16px;
    }
    .char-key-btn {
        max-width: 36px;
        font-size: 14px;
    }
    .kakao-chocogram-box-grid.sweet_target {
        left: 5.6% !important;
        width: 88.8% !important;
    }
}

@media (max-width: 480px) {
    .characters-keyboard-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 6px;
        padding: 12px;
    }
    .char-key-btn {
        max-width: 32px;
        font-size: 13px;
    }
}

.sweets-keyboard-grid {
    padding: 20px;
}

.builder-section-title {
    font-size: 16px;
    font-weight: 700;
    color: #333333;
    margin: 24px 0 24px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    border-bottom: 1px dashed var(--choco-border);
    padding-bottom: 16px;
}

.builder-section-title::before,
.builder-section-title::after {
    content: "";
    display: inline-block;
    width: 40px;
    height: 1px;
    background: var(--choco-border);
    vertical-align: middle;
    margin: 0 15px;
}

/* Letters/Numbers buttons */
.char-key-btn {
    width: 100%;
    max-width: 48px;
    aspect-ratio: 1 / 1;
    height: auto;
    flex-shrink: 1;
    border: 1px solid var(--choco-border);
    border-radius: 4px;
    background: #fdfdfd;
    font-family: "Georgia", serif;
    font-size: 18px;
    font-weight: bold;
    color: var(--choco-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    padding: 0;
    overflow: hidden;
}

.char-key-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.char-key-btn:hover {
    border-color: #888888; /* neutral medium-dark gray hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
}

/* Sweets cards */
.sweet-key-card {
    width: 104px;
    height: 116px;
    flex-shrink: 0;
    border: 1px solid var(--choco-border);
    border-radius: 4px;
    background: #fff;
    padding: 8px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.sweet-key-card:hover {
    border-color: #a37254;
    background: #faf8f5;
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(163, 114, 84, 0.12);
}

.sweet-key-card:hover .sweet-card-img-holder {
    background: transparent;
}

.sweet-card-img-holder {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    border-radius: 4px;
    border: 1px solid #f0f0f0;
    overflow: hidden;
}

.sweet-card-img-holder img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.sweet-card-name {
    font-size: 11px;
    font-weight: bold;
    color: var(--choco-text);
    margin: 2px 0 0;
    line-height: 1.2;
    height: 26px; /* Restrict height for alignment */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.sweet-card-price {
    font-size: 11px;
    font-weight: 700;
    color: var(--choco-gold);
}

/* --- 7. WooCommerce Integration --- */
.builder-add-to-cart-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.kakao-chocogram-add-to-cart-form {
    width: 100%;
    max-width: 860px;
}

.chocogram-submit-panel {
    background: #fffdfb;
    padding: 24px;
    border-radius: 4px;
    border: 1px solid #ebdcb9;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    margin: 20px auto 0;
    max-width: 450px;
    width: 100%;
}

.add-to-cart-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    background: transparent;
    padding: 0;
    border-radius: 0;
    border: none;
}

.quantity-input-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.qty-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #777777; /* elegant theme gray */
    margin: 0;
}



/* Submit Add to Cart Button (styled to match Kakao brand bronze-brown) */
.builder-submit-btn {
    flex: 1;
    max-width: 320px;
    min-height: 48px;
    border: none;
    border-radius: 4px !important;
    background: #a37254 !important;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background 0.25s ease;
}

.builder-submit-btn:hover {
    background: #8c5f43 !important;
}

.builder-submit-btn:active {
    transform: scale(0.98);
}

/* --- Animations --- */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes pulse-gold {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}

/* --- Responsive Adaptations --- */
@media (max-width: 600px) {
    .kakao-chocogram-builder {
        padding: 14px;
    }
    
    .chocolate-box-outer-frame {
        padding: 6px;
        border-width: 6px;
    }
    
    .chocolate-box-inside-holder {
        padding: 4px;
    }
    
    .kakao-chocogram-box-grid {
        gap: 3px;
    }
    
    .slot-content-character .char-letter {
        font-size: 13px;
    }
    
    .builder-status-bar {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .add-to-cart-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .builder-submit-btn {
        max-width: 100%;
    }
}