/* --- ZTI CUSTOMIZER-SPECIFIC STYLES (Coupon & Pin) --- */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px 15px 10px;
    margin-bottom: 15px;
}

.nav-link-button {
    display: inline-block;
    padding: 8px 15px;
    background-color: #334444;
    color: #ccffff;
    border: 1px solid #aaffee;
    text-decoration: none;
    font-size: 1.1em;
}

.nav-link-button:hover {
    background-color: #445555;
}

.editor-container {
    display: flex;
    flex-grow: 1;
    min-height: 0;
    gap: 15px;
}

#style-palette {
    width: 220px;
    flex-shrink: 0;
    border: 1px solid #557777;
    padding: 10px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.palette-item {
    border: 1px solid #008888;
    background-color: #051818;
    padding: 5px;
    text-align: center;
}

.palette-pic {
    width: 100%;
    border: 1px solid #334444;
    margin-bottom: 5px;
}

.palette-name {
    font-size: 1.1em;
    margin-bottom: 8px;
    color: #00ffff;
}

.action-button {
    padding: 8px;
    font-family: 'VT323', monospace;
    font-size: 1.1em;
    cursor: pointer;
    border: 1px solid;
    width: 100%;
}

.apply-button.available {
    background-color: #005555;
    color: #ccffff;
    border-color: #aaffee;
}

.apply-button.available:hover {
    background-color: #008888;
}

.apply-button.active {
    background-color: #008800;
    color: #fff;
    border-color: #00ff00;
    cursor: default;
}

.buy-button.available {
    background-color: #b8860b;
    color: #fff;
    border-color: #ffd700;
}

.buy-button.available:hover {
    background-color: #daa520;
}

.action-button:disabled {
    background-color: #550000;
    color: #aaa;
    border-color: #880000;
    cursor: not-allowed;
}

#coupon-preview-wrapper, #pin-preview-wrapper {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
}

#coupon-preview-image, #pin-preview-image {
    max-width: 100%;
    max-height: 100%;
    border: 1px solid #557777;
}