/**
 * ==========================================================
 * GM DESIGN SYSTEM
 * File: controls-map.css
 * Description: Legacy / External Controls Mapping
 *
 * Depends:
 * controls.css
 * WooCommerce
 *
 * Version:
 * 1.0.0
 *
 * Last Update:
 * 16.08.2026
 * ==========================================================
 */

 /* ==========================================================
   WOOCOMMERCE QUANTITY
========================================================== */

.woocommerce .quantity:not(.gm-configurator__counter) {

    display: grid;

    grid-template-columns:
        var(--gm-qty-button-size)
        minmax(44px, 1fr)
        var(--gm-qty-button-size);

    align-items: center;

    gap: 0;

    height: var(--gm-input-height);

    padding: 0 var(--gm-space-sm);

    border: 1px solid var(--gm-color-border);

    border-radius: var(--gm-radius-pill);

    background: var(--gm-color-white);

    transition: var(--gm-transition-fast);

}

.woocommerce .quantity:not(.gm-configurator__counter):hover {

    border-color: #d3d3d3;

}

.woocommerce .quantity:not(.gm-configurator__counter):focus-within {

    outline: var(--gm-focus-ring);

    outline-offset: var(--gm-focus-ring-offset);

    border-color: var(--gm-color-primary);

}


/* ==========================================================
   WOOCOMMERCE QUANTITY INPUT
========================================================== */

.woocommerce .quantity:not(.gm-configurator__counter) input.qty {

    grid-column: 2;

    grid-row: 1;

    width: 100%;

    min-width: 44px;

    height: var(--gm-input-height);

    margin: 0;

    padding: 0;

    border: none;

    background: transparent;

    box-shadow: none;

    color: var(--gm-color-text);

    text-align: center;

    font-family: var(--gm-font-family);

    font-size: var(--gm-font-size-lg);

    font-weight: var(--gm-font-weight-semibold);

    line-height: var(--gm-input-height);

}

.woocommerce .quantity:not(.gm-configurator__counter) input.qty:focus {

    outline: none;

}


/* ==========================================================
   DISABLED
========================================================== */

.woocommerce .quantity:not(.gm-configurator__counter) input.qty:disabled {

    opacity: .45;

}


/* ==========================================================
   QUANTITY BUTTONS
========================================================== */

.gm-product-summary .quantity .ct-decrease {

    grid-column: 1;

    grid-row: 1;

}

.gm-product-summary .quantity .ct-increase {

    grid-column: 3;

    grid-row: 1;

}

.gm-product-summary .quantity .ct-increase,
.gm-product-summary .quantity .ct-decrease {

    width: var(--gm-qty-button-size);

    height: var(--gm-qty-button-size);

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0;

    padding: 0;

    border: none;

    border-radius: 50%;

    background: transparent;

    color: var(--gm-color-text);

    cursor: pointer;

    user-select: none;

    transition: var(--gm-transition-fast);

}


/*
 * Blocksy quantity sembollerini Woo icon fontu ile
 * ::before pseudo-elementinde üretir.
 *
 * JavaScript yüklenmeden önce ikon kendi kontrol alanının
 * flex merkezi içinde kalır.
 */
/* ==========================================================
   QUANTITY ICON OPTICAL ALIGNMENT
========================================================== */

.gm-product-summary .quantity .ct-increase::before,
.gm-product-summary .quantity .ct-decrease::before {

	position: static;

    margin: 0 !important;

    line-height: 1 !important;

}

.gm-product-summary .quantity:not(.gm-quantity) .ct-increase:hover,
.gm-product-summary .quantity:not(.gm-quantity) .ct-decrease:hover {

    background: var(--gm-color-background-muted);

}

.gm-product-summary .quantity:not(.gm-quantity) .ct-increase:active,
.gm-product-summary .quantity:not(.gm-quantity) .ct-decrease:active {

    transform: scale(.95);

}

/* ==========================================================
   INPUT MAPPING
========================================================== */

.gm-product-summary input[type="text"],
.gm-product-summary input[type="number"],
.gm-product-summary input[type="email"],
.gm-product-summary input[type="tel"],
.gm-product-summary input[type="search"],
.gm-product-summary input[type="url"],
.gm-product-summary input[type="password"]{

    width:100%;

    height:var(--gm-input-height);

    padding:0 var(--gm-space-lg);

    border:1px solid var(--gm-color-border);

    border-radius:var(--gm-input-radius);

    background:var(--gm-color-white);

    color:var(--gm-color-text);

    font-family:var(--gm-font-family);

    font-size:var(--gm-font-size-md);

    box-shadow:none;

    transition:var(--gm-transition-fast);

}

.gm-product-summary input:hover{

    border-color:#d3d3d3;

}

.gm-product-summary input:focus{

    outline:none;

    border-color:var(--gm-color-primary);

}

.gm-product-summary input:focus-visible{

    outline:var(--gm-focus-ring);

    outline-offset:var(--gm-focus-ring-offset);

    border-color:var(--gm-color-primary);

}

/* ==========================================================
   SELECT MAPPING
========================================================== */

.gm-product-summary select{

    appearance:none;

    -webkit-appearance:none;

    width:100%;

    height:var(--gm-input-height);

    padding:0 48px 0 var(--gm-space-lg);

    border:1px solid var(--gm-color-border);

    border-radius:var(--gm-input-radius);

    background:var(--gm-color-white);

    color:var(--gm-color-text);

    font-family:var(--gm-font-family);

    font-size:var(--gm-font-size-md);

    box-shadow:none;

    transition:var(--gm-transition-fast);

}

.gm-product-summary select:hover{

    border-color:#d3d3d3;

}

.gm-product-summary select:focus{

    outline:none;

    border-color:var(--gm-color-primary);

}

.gm-product-summary select:focus-visible{

    outline:var(--gm-focus-ring);

    outline-offset:var(--gm-focus-ring-offset);

    border-color:var(--gm-color-primary);

}

/* ==========================================================
   CHECKBOX MAPPING
========================================================== */

.gm-product-summary input[type="checkbox"]{

    width:22px;

    height:22px;

    margin:0;

    border:1px solid var(--gm-color-border);

    border-radius:6px;

    background:var(--gm-color-white);

    box-shadow:none;

    accent-color:var(--gm-color-primary);

    cursor:pointer;

    transition:var(--gm-transition-fast);

}

.gm-product-summary input[type="checkbox"]:focus-visible{

    outline:var(--gm-focus-ring);

    outline-offset:var(--gm-focus-ring-offset);

}

/* ==========================================================
   RADIO MAPPING
========================================================== */

.gm-product-summary input[type="radio"]{

    width:22px;

    height:22px;

    margin:0;

    border:1px solid var(--gm-color-border);

    border-radius:50%;

    background:var(--gm-color-white);

    box-shadow:none;

    accent-color:var(--gm-color-primary);

    cursor:pointer;

    transition:var(--gm-transition-fast);

}

.gm-product-summary input[type="radio"]:focus-visible{

    outline:var(--gm-focus-ring);

    outline-offset:var(--gm-focus-ring-offset);

}

/* ==========================================================
   SWITCH MAPPING
========================================================== */

.gm-switch{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:flex-start;

    width:54px;

    height:30px;

    border-radius:var(--gm-radius-pill);

    background:var(--gm-color-border);

    cursor:pointer;

    transition:var(--gm-transition-fast);

}

.gm-switch::after{

    content:"";

    position:absolute;

    left:3px;

    top:3px;

    width:24px;

    height:24px;

    border-radius:50%;

    background:var(--gm-color-white);

    transition:var(--gm-transition-fast);

}

.gm-switch.active{

    background:var(--gm-color-primary);

}

.gm-switch.active::after{

    transform:translateX(24px);

}

.gm-switch:focus-visible{

    outline:var(--gm-focus-ring);

    outline-offset:var(--gm-focus-ring-offset);

}

/* ==========================================================
   SEGMENT MAPPING
========================================================== */

.gm-segment{

    display:flex;

    gap:var(--gm-gap-sm);

}

.gm-segment button{

    min-width:64px;

}