/* =====================================
   SECTIONS COMPONENT STYLES
   ===================================== */

@layer components{
    /* ============= Bordered Items ============= */
    /* Bordered Item Container */
    .item-borderd{
        border: 1px solid var(--border);
        border-radius: var(--widget-radius);
        background: var(--surface-primary);
    }

    /* Bordered Item Header */
    .item-borderd .item-head{
        border-bottom: 1px solid var(--border);
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--foreground-primary);
        background: var(--surface-primary);
        position: relative;
        padding: 0 12px;
    }

    .item-borderd .item-head .btngroup{
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
    }

    /* Bordered Item Body */
    .item-borderd .item-body{
        padding: 1em;
    }

    /* ============= Dashboard Link Boxes ============= */
    /* Dashboard Link Box Base */
    .dashboard-link-box{
        border: 1px solid var(--border);
        border-radius: var(--widget-radius);
        background: var(--surface-primary);

        -webkit-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out;

        box-shadow: none;
    }

    /* Dashboard Link Name Text */
    .dashboard-link-box .dashboard-link-name{
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--foreground-primary);
    }

    /* Dashboard Link Box Hover State */
    .dashboard-link-box:hover{
        transform: scale(1);
        box-shadow: var(--shadow-lg);
    }

    .infoBlock {
        border: 1px solid var(--border);
        border-radius: var(--widget-radius);
        background-color: var(--surface-primary);
    }

    .block-header{
        background-color: var(--surface-second);
        border-bottom: 1px solid var(--border);
        border-top-left-radius: var(--widget-radius);
        border-top-right-radius: var(--widget-radius);
        color: var(--foreground-primary);
        font-size: var(--font-size-lg);
    }

    .form-heading{
        background-color: var(--surface-second) !important;
        border-radius: var(--widget-radius) !important;
        color: var(--foreground-primary) !important;
        font-size: var(--font-size-lg) !important;
        padding: 4px 10px;
    }

    .form-heading h4, .form-heading h4 span{
        color: var(--foreground-primary) !important;
    }

    .form-heading span[data-action="close"]{
        font-size: var(--font-size-base) !important;
        color: var(--foreground-second) !important;
        cursor: pointer;
    }

    .form-heading .instance-counter{
        font-size: var(--font-size-base) !important;
        color: var(--foreground-second) !important;
    }

    .manual-control-wrapper{
        margin: 0 !important;
        padding: 0 !important;

        border: 1px solid var(--border);
        border-radius: var(--widget-radius);
        background: var(--surface-primary);
        padding: 15px !important;
        margin-bottom: 20px !important;
    }

    .bu-card{
        border: 1px solid var(--border);
        border-radius: var(--widget-radius);
        background-color: var(--surface-primary);
        padding: 16px;
    }

    .bu-card.payment-option{

        & > input[type="radio"]{
            margin-top: 4px !important;
        }

        &:has(input[type="radio"]:checked){
            border-color: var(--primary);
        }
    }
}