.brand-page-container, .brand-page-container * {
    all: unset;
    display: revert;
    box-sizing: border-box;
}

.brand-page-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: #F9FAFB;
    padding: 24px;
}

.brand-page-content {
    display: flex;
    flex-direction: row;
    gap: 65px;
    margin: 0 auto;
}

.brand-page-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    width: 538px;
    height: 100%;
    border-radius: 4px;
    border: 1px solid #E5E7EB;
    background-color: #FFFFFF;
    padding: 24px 40px;
}

.brand-page-block-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.brand-page-block-title {
    display: block;
    font-size: 20px;
    font-family: 'Inter', sans-serif;
    color: #101828;
    font-weight: 600;
    line-height: 150%;
}

.brand-page-live-preview {
    display: block;
    width: 458px;
    height: 710px;
    border: 1px solid #E5E7EB;
    background-color: #E5E7EB;
}

.brand-page-toggle {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.brand-page-toggle-label {
    display: block;
    color: #101828;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.brand-page-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

.brand-page-switch-input {
    opacity: 0;
    width: 0;
    height: 0;
}

.brand-page-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #F3F4F6;
    border: 1px solid #E5E7EB;
    transition: 0.2s;
    border-radius: 18px;
}

.brand-page-switch-slider::before {
    content: '';
    height: 16px;
    width: 16px;
    position: absolute;
    left: 1px;
    bottom: 1px;
    background-color: #D1D5DC;
    border-radius: 8px;
    box-shadow: 0 1px 1px 0 rgba(29, 41, 61, 0.02);
    transition: 0.2s;
}

.brand-page-switch-input:checked + .brand-page-switch-slider::before {
    transform: translateX(16px);
}

.brand-page-form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 458px;
    border-radius: 12px;
    border: 1px solid #F3F4F6;
    box-shadow: 0 1px 1px 0 rgba(29, 41, 61, 0.02);
    padding: 20px;
}

.brand-page-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

.brand-page-field-label {
    display: block;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    color: #101828;
    font-weight: 500;
    line-height: 20px;
}

.brand-page-disabled-label::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: -2px;
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M7%200C8.933%200%2010.5%201.567%2010.5%203.5V5.29358C11.4985%205.49625%2012.25%206.37919%2012.25%207.4375V11.8125C12.25%2013.0206%2011.2706%2014%2010.0625%2014H3.9375C2.72938%2014%201.75%2013.0206%201.75%2011.8125V7.4375C1.75%206.37919%202.5015%205.49625%203.5%205.29358V3.5C3.5%201.567%205.067%200%207%200ZM3.9375%206.125C3.21263%206.125%202.625%206.71263%202.625%207.4375V11.8125C2.625%2012.5374%203.21263%2013.125%203.9375%2013.125H10.0625C10.7874%2013.125%2011.375%2012.5374%2011.375%2011.8125V7.4375C11.375%206.71263%2010.7874%206.125%2010.0625%206.125H3.9375ZM7%200.875C5.55025%200.875%204.375%202.05025%204.375%203.5V5.25H9.625V3.5C9.625%202.05025%208.44975%200.875%207%200.875Z%22%20fill%3D%22%236A7282%22/%3E%3C/svg%3E');
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 4px;
}

.brand-page-field-label-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.brand-page-field-control {
    display: none;
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    color: #4A5565;
    font-weight: 500;
    padding: 0 12px;
    cursor: pointer;
}

.brand-page-field-input {
    display: block;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    color: #101828;
    line-height: 20px;
    width: 100%;
    background-color: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    box-shadow: 0 1px 1px 0 rgba(29, 41, 61, 0.02);
    padding: 10px 12px;
    transition: border-color 0.2s;
}

.brand-page-field-input:focus {
    border-color: #2630DB;
}

.brand-page-field-input:invalid {
    border-color: #C70036;
}

.brand-page-field-input::placeholder {
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    color: #6A7282;
    line-height: 20px;
}

.brand-page-file-input-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    cursor: pointer;
}

.brand-page-file-input {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}

.brand-page-file-input-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 95px;
    height: 40px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    color: #6A7282;
    background-color: #F3F4F6;
    border-radius: 8px 0 0 8px;
    border: 1px solid #E5E7EB;
    cursor: pointer;
}

.brand-page-file-input-name, .brand-page-color-input-value {
    display: block;
    width: 322px;
    height: 40px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    line-height: 18px;
    color: #6A7282;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: #F9FAFB;
    border-radius: 0 8px 8px 0;
    border: 1px solid #E5E7EB;
    border-left: none;
    padding: 10px;
    cursor: pointer;
}

.brand-page-file-input-wrapper:has(.brand-page-file-input:disabled) .brand-page-file-input-button,
.brand-page-file-input-wrapper:has(.brand-page-file-input:disabled) .brand-page-file-input-name,
.brand-page-color-input-wrapper:has(.brand-page-color-input:disabled) .brand-page-color-input-value {
    color: #99A1AF;
    cursor: default;
    pointer-events: none;
}

.brand-page-file-input-wrapper:has(.brand-page-file-input:disabled),
.brand-page-color-input-wrapper:has(.brand-page-color-input:disabled) {
    cursor: default;
    pointer-events: none;
}

.brand-page-field-hint {
    display: block;
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    color: #4A5565;
    line-height: 20px;
}

.brand-page-field-error {
    display: none;
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    color: #C70036;
    line-height: 20px;
}

.brand-page-color-input-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    cursor: pointer;
}

.brand-page-color-input {
    display: block;
    width: 95px;
    height: 40px;
    border-radius: 8px 0 0 8px;
    border: 1px solid #E5E7EB;
    background-color: #F3F4F6;
    padding: 4px 10px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.brand-page-file-input:disabled .brand-page-color-input:disabled {
    cursor: default;
    pointer-events: none;
}

.brand-page-color-input::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: 2px;
}

.brand-page-color-input::-webkit-color-swatch {
    border: 1px solid #E5E7EB;
    border-radius: 2px;
}

.brand-page-checkbox-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    position: relative;
}

.brand-page-checkbox-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.brand-page-custom-box {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid #E5E7EB;
    background-color: #F9FAFB;
    position: relative;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

.brand-page-custom-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.brand-page-checkbox-input:checked + .brand-page-custom-box {
    background-color: #2630DB;
    border-color: #2630DB;
}

.brand-page-checkbox-input:checked + .brand-page-custom-box::after {
    opacity: 1;
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2716%27%20height%3D%2716%27%20viewBox%3D%270%200%2016%2016%27%20fill%3D%27none%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20clip-rule%3D%27evenodd%27%20d%3D%27M13.1451%204.53577C13.4015%204.80002%2013.3951%205.22208%2013.1309%205.47847L6.94686%2011.4785C6.68824%2011.7294%206.27705%2011.7294%206.01842%2011.4785L2.86908%208.42316C2.60482%208.16678%202.59843%207.74472%202.8548%207.48046C3.11118%207.21619%203.53324%207.2098%203.7975%207.46617L6.4826%2010.0711L12.2024%204.52153C12.4666%204.26514%2012.8887%204.27152%2013.1451%204.53577Z%27%20fill%3D%27white%27%2F%3E%3C%2Fsvg%3E");
}

.brand-page-checkbox-text {
    display: block;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    color: #101828;
    font-weight: 500;
    line-height: 16px;
    cursor: pointer;
}

.brand-page-checkbox-input:disabled + .brand-page-custom-box {
    background-color: #F9FAFB;
    border-color: #F3F4F6;
    cursor: default;
}

.brand-page-checkbox-input:disabled + .brand-page-custom-box::after {
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2716%27%20height%3D%2716%27%20viewBox%3D%270%200%2016%2016%27%20fill%3D%27none%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20clip-rule%3D%27evenodd%27%20d%3D%27M13.1451%204.53577C13.4015%204.80002%2013.3951%205.22208%2013.1309%205.47847L6.94686%2011.4785C6.68824%2011.7294%206.27705%2011.7294%206.01842%2011.4785L2.86908%208.42316C2.60482%208.16678%202.59843%207.74472%202.8548%207.48046C3.11118%207.21619%203.53324%207.2098%203.7975%207.46617L6.4826%2010.0711L12.2024%204.52153C12.4666%204.26514%2012.8887%204.27152%2013.1451%204.53577Z%27%20fill%3D%27%2399A1AF%27%2F%3E%3C%2Fsvg%3E");
}

.brand-page-checkbox-input:disabled ~ .brand-page-checkbox-text {
    cursor: default;
}

.brand-page-button-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.brand-page-button {
    display: block;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    color: #FFFFFF;
    font-weight: 500;
    line-height: 20px;
    border-radius: 12px;
    background-color: #1E2939;
    box-shadow: 0 1px 1px 0 rgba(29, 41, 61, 0.02);
    padding: 10px 16px;
    cursor: pointer;
}

.brand-page-button:hover {
    background-color: #1C2296;
}

.brand-page-form-success-message {
    /*display: none;*/
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    color: #007A55;
    font-weight: 500;
    line-height: 20px;
}

.brand-page-form-success-message::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 2px;
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2716%27%20height%3D%2716%27%20viewBox%3D%270%200%2016%2016%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M10.9696%204.96967C11.2625%204.67678%2011.7374%204.67678%2012.0303%204.96967C12.3196%205.25897%2012.3231%205.72582%2012.0409%206.01947L8.04873%2011.0097C8.04297%2011.0169%208.03682%2011.0238%208.03029%2011.0303C7.7374%2011.3232%207.26253%2011.3232%206.96963%2011.0303L4.32319%208.38388C4.03029%208.09099%204.03029%207.61612%204.32319%207.32322C4.61608%207.03033%205.09095%207.03033%205.38385%207.32322L7.47737%209.41674L10.9497%204.9921C10.9559%204.98424%2010.9626%204.97674%2010.9696%204.96967Z%27%20fill%3D%27%23007A55%27%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: -3px;
}

.brand-page-spinner {
    display: block;
    width: 24px;
    height: 24px;
    border: 4px solid #E5E7EB;
    border-top: 4px solid #193CB8;
    border-radius: 12px;
    animation: spin 0.4s linear infinite;
}

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

.alert {
    position: relative;
    padding: 10px 36px 10px 12px;
    border: 1px solid #f5c2c7;
    background:#f8d7da;
    color:#842029;
    border-radius: 6px;
    margin-bottom: 12px;
    width: 60%;
    left: 20%;
}
.alert-close {
    position:absolute; top:6px; right:8px;
    border:0; background:transparent;
    font-size:20px; line-height:1; cursor:pointer;
    color:#842029;
}
.alert[hidden] { display:none; }