/* =========================================================
   COTECH CATEGORY DISPLAY
   ========================================================= */


/* =========================================================
   FRONTEND CATEGORY GRID
   ========================================================= */

.cotech-category-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
}


/* =========================================================
   CATEGORY CARD
   ========================================================= */

.cotech-category-card {
    display: block;
    text-decoration: none !important;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #eeeeee;
    transition: all 0.3s ease;
}


.cotech-category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
}


/* =========================================================
   CATEGORY IMAGE
   ========================================================= */

.cotech-category-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f7f7f7;
}


.cotech-category-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}


.cotech-category-card:hover .cotech-category-image img {
    transform: scale(1.05);
}


/* =========================================================
   CATEGORY NAME
   ========================================================= */

.cotech-category-name {
    padding: 16px 12px;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: #222;
}


/* =========================================================
   TABLET GRID
   ========================================================= */

@media (max-width: 991px) {

    .cotech-category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }

    .cotech-category-name {
        font-size: 16px;
    }
}


/* =========================================================
   MOBILE GRID
   ========================================================= */

@media (max-width: 600px) {

    .cotech-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .cotech-category-card {
        border-radius: 10px;
    }

    .cotech-category-name {
        padding: 12px 8px;
        font-size: 14px;
    }
}

/* =========================================================
   COTECH CATEGORY CIRCLE SLIDER
   ========================================================= */

.cotech-category-slider-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 5px 0 10px;
}

.cotech-category-slider {
    width: 100%;
    overflow: hidden;
}

.cotech-category-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    transition: transform 0.45s ease;
    will-change: transform;
}


/* =========================================================
   SLIDE
   ========================================================= */

.cotech-slide {
    flex: 0 0 150px;
    width: 150px;
    margin-right: 22px;
    box-sizing: border-box;
}


/* =========================================================
   CATEGORY CARD
   ========================================================= */

.cotech-category-slider .cotech-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 150px;

    background: transparent;
    border: none;
    border-radius: 0;

    overflow: visible;

    text-decoration: none !important;

    box-shadow: none;

    transition: transform 0.2s ease;
}

.cotech-category-slider .cotech-category-card:hover {
    transform: translateY(-3px);
    box-shadow: none;
}


/* =========================================================
   ROUND IMAGE
   ========================================================= */

.cotech-category-slider .cotech-category-image {
    width: 150px;
    height: 150px;

    aspect-ratio: 1 / 1;

    border-radius: 50%;
    overflow: hidden;

    background: #f5f5f5;

    border: 2px solid #dd3333;

    box-sizing: border-box;

    margin: 0 auto;
}

.cotech-category-slider .cotech-category-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    display: block;

    border-radius: 50%;

    transition: transform 0.35s ease;
}

.cotech-category-slider
.cotech-category-card:hover
.cotech-category-image img {
    transform: scale(1.05);
}


/* =========================================================
   CATEGORY NAME
   ========================================================= */
    .cotech-category-slider .cotech-category-name {
    width: 100%;
    padding: 10px 4px 0;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: #222;

    background: transparent;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    overflow: hidden;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .cotech-slide {
        flex: 0 0 120px;
        width: 120px;
        margin-right: 18px;
    }

    .cotech-category-slider .cotech-category-card {
        width: 120px;
    }

    .cotech-category-slider .cotech-category-image {
        width: 120px;
        height: 120px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .cotech-category-slider-wrap {
        padding-left: 2px;
        padding-right: 2px;
    }

    .cotech-slide {
        flex: 0 0 82px;
        width: 82px;
        margin-right: 14px;
    }

    .cotech-category-slider .cotech-category-card {
        width: 82px;
    }

    .cotech-category-slider .cotech-category-image {
        width: 82px;
        height: 82px;
    }

    .cotech-category-slider .cotech-category-name {
        padding-top: 7px;
        font-size: 11px;
        line-height: 14px;
    }

}

/* =========================================================
   ADMIN CATEGORY SELECTOR
   ========================================================= */

.cotech-admin-wrap {
    max-width: 1100px;
}


.cotech-admin-description {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}


.cotech-category-selector {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    max-width: 1000px;
}


/* =========================================================
   ADMIN CATEGORY ROW
   ========================================================= */

.cotech-category-tree-item {
    border-bottom: 1px solid #eeeeee;
}


.cotech-category-tree-item:last-child {
    border-bottom: none;
}


.cotech-category-row {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 15px;
    background: #fff;
    transition: background 0.2s ease;
}


.cotech-category-row:hover {
    background: #f8f9fa;
}


/* =========================================================
   TOGGLE BUTTON
   ========================================================= */

.cotech-category-toggle {
    width: 32px;
    height: 32px;

    padding: 0;
    margin-right: 8px;

    border: none;
    background: transparent;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #555;
}


.cotech-category-toggle:hover {
    color: #2271b1;
}


.cotech-category-toggle .dashicons {
    transition: transform 0.2s ease;
}


/* Open Arrow */

.cotech-category-tree-item.is-open >
.cotech-category-row
.cotech-category-toggle
.dashicons {
    transform: rotate(90deg);
}


.cotech-category-toggle-placeholder {
    width: 32px;
    margin-right: 8px;
}


/* =========================================================
   CATEGORY LABEL
   ========================================================= */

.cotech-category-label {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 100%;

    cursor: pointer;

    padding: 10px 0;
}


.cotech-category-label input[type="checkbox"] {
    margin: 0;
}


.cotech-category-title {
    font-size: 14px;
    font-weight: 500;
    color: #222;
}


.cotech-category-count {
    font-size: 12px;
    color: #888;
    background: #f0f0f1;
    border-radius: 20px;
    padding: 2px 8px;
    margin-left: auto;
}


/* =========================================================
   SUBCATEGORY INDENT
   ========================================================= */

.cotech-category-children {
    display: none;
}


.cotech-category-tree-item.is-open >
.cotech-category-children {
    display: block;
}


/* Level 1 */

.cotech-category-tree-item.level-1 >
.cotech-category-row {
    padding-left: 48px;
    background: #fafafa;
}


/* Level 2 */

.cotech-category-tree-item.level-2 >
.cotech-category-row {
    padding-left: 81px;
    background: #fcfcfc;
}


/* Level 3 */

.cotech-category-tree-item.level-3 >
.cotech-category-row {
    padding-left: 114px;
    background: #fff;
}


/* Level 4+ */

.cotech-category-tree-item.level-4 >
.cotech-category-row {
    padding-left: 147px;
}


/* =========================================================
   ADMIN ACTIONS
   ========================================================= */

.cotech-admin-actions {
    margin-top: 20px;
}


.cotech-admin-actions .button {
    min-width: 150px;
}


/* =========================================================
   SHORTCODES BOX
   ========================================================= */

.cotech-shortcodes-box {
    max-width: 1000px;

    margin-top: 25px;
    padding: 20px;

    background: #fff;

    border: 1px solid #ddd;
    border-radius: 8px;
}


.cotech-shortcodes-box h2 {
    margin-top: 0;
}


.cotech-shortcode-item {
    display: flex;
    align-items: center;
    gap: 15px;

    margin: 15px 0;
}


.cotech-shortcode-item code {
    background: #f0f0f1;
    padding: 7px 12px;
    border-radius: 4px;
}


/* =========================================================
   ADMIN MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .cotech-category-row {
        min-height: 48px;
        padding: 0 10px;
    }

    .cotech-category-tree-item.level-1 >
    .cotech-category-row {
        padding-left: 30px;
    }

    .cotech-category-tree-item.level-2 >
    .cotech-category-row {
        padding-left: 50px;
    }

    .cotech-category-tree-item.level-3 >
    .cotech-category-row {
        padding-left: 70px;
    }

    .cotech-category-tree-item.level-4 >
    .cotech-category-row {
        padding-left: 90px;
    }

    .cotech-category-title {
        font-size: 13px;
    }

    .cotech-shortcode-item {
        display: block;
    }

    .cotech-shortcode-item code {
        display: inline-block;
        margin-top: 8px;
    }
}

.cotech-prev,
.cotech-next {
    display: none !important;
}
/* Cotech Category Slider custom settings — scoped to slider only */
.cotech-category-slider-wrap.cotech-arrows-off .cotech-prev,
.cotech-category-slider-wrap.cotech-arrows-off .cotech-next { display:none !important; }
.cotech-category-slider-wrap.cotech-arrows-on .cotech-prev,
.cotech-category-slider-wrap.cotech-arrows-on .cotech-next {
    display:flex !important;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:calc(var(--cotech-d-size) / 2);
    transform:translateY(-50%);
    width:var(--cotech-arrow-size);
    height:var(--cotech-arrow-size);
    border:0;
    border-radius:50%;
    background:var(--cotech-arrow-bg);
    color:var(--cotech-arrow-color);
    z-index:20;
    cursor:pointer;
    padding:0;
    line-height:1;
    box-shadow:0 2px 8px rgba(0,0,0,.14);
}
.cotech-category-slider-wrap.cotech-arrows-on .cotech-prev { left:4px; }
.cotech-category-slider-wrap.cotech-arrows-on .cotech-next { right:4px; }
.cotech-category-slider-wrap .cotech-category-slider .cotech-slide { flex-basis:var(--cotech-d-size); width:var(--cotech-d-size); margin-right:var(--cotech-d-gap); }
.cotech-category-slider-wrap .cotech-category-slider .cotech-category-card { width:var(--cotech-d-size); }
.cotech-category-slider-wrap .cotech-category-slider .cotech-category-image { width:var(--cotech-d-size); height:var(--cotech-d-size); border-width:var(--cotech-d-border); border-radius:var(--cotech-d-radius); background:var(--cotech-image-bg); }
.cotech-category-slider-wrap .cotech-category-slider .cotech-category-image img { border-radius:var(--cotech-d-radius); }
.cotech-category-slider-wrap .cotech-category-slider .cotech-category-name { font-size:var(--cotech-d-text); color:var(--cotech-text-color); }
.cotech-category-slider-wrap .cotech-category-slider .cotech-category-image { border-color:var(--cotech-border-color); }
.cotech-slider-dots { display:none; justify-content:center; align-items:center; gap:6px; margin-top:10px; }
.cotech-category-slider-wrap.cotech-dots-on .cotech-slider-dots { display:flex; }
.cotech-slider-dot { width:7px; height:7px; padding:0; border:0; border-radius:50%; background:#cfcfcf; cursor:pointer; }
.cotech-slider-dot.is-active { background:#e33434; }

@media (max-width:991px) {
    .cotech-category-slider-wrap.cotech-arrows-on .cotech-prev,
    .cotech-category-slider-wrap.cotech-arrows-on .cotech-next { top:calc(var(--cotech-t-size) / 2); }
    .cotech-category-slider-wrap .cotech-category-slider .cotech-slide { flex-basis:var(--cotech-t-size); width:var(--cotech-t-size); margin-right:var(--cotech-t-gap); }
    .cotech-category-slider-wrap .cotech-category-slider .cotech-category-card { width:var(--cotech-t-size); }
    .cotech-category-slider-wrap .cotech-category-slider .cotech-category-image { width:var(--cotech-t-size); height:var(--cotech-t-size); border-width:var(--cotech-t-border); border-radius:var(--cotech-t-radius); }
    .cotech-category-slider-wrap .cotech-category-slider .cotech-category-image img { border-radius:var(--cotech-t-radius); }
    .cotech-category-slider-wrap .cotech-category-slider .cotech-category-name { font-size:var(--cotech-t-text); }
}
@media (max-width:600px) {
    .cotech-category-slider-wrap.cotech-arrows-on .cotech-prev,
    .cotech-category-slider-wrap.cotech-arrows-on .cotech-next { top:calc(var(--cotech-m-size) / 2); }
    .cotech-category-slider-wrap .cotech-category-slider .cotech-slide { flex-basis:var(--cotech-m-size); width:var(--cotech-m-size); margin-right:var(--cotech-m-gap); }
    .cotech-category-slider-wrap .cotech-category-slider .cotech-category-card { width:var(--cotech-m-size); }
    .cotech-category-slider-wrap .cotech-category-slider .cotech-category-image { width:var(--cotech-m-size); height:var(--cotech-m-size); border-width:var(--cotech-m-border); border-radius:var(--cotech-m-radius); }
    .cotech-category-slider-wrap .cotech-category-slider .cotech-category-image img { border-radius:var(--cotech-m-radius); }
    .cotech-category-slider-wrap .cotech-category-slider .cotech-category-name { font-size:var(--cotech-m-text); }
}

/* Settings screen */
.cotech-slider-settings-box { margin:25px 0; padding:24px; background:#fff; border:1px solid #dcdcde; border-radius:10px; max-width:1050px; box-sizing:border-box; }
.cotech-slider-settings-box h2 { margin:0 0 6px; font-size:20px; }
.cotech-slider-settings-intro { margin:0 0 20px; color:#646970; }
.cotech-responsive-settings-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.cotech-slider-settings-card { padding:18px; background:#f6f7f7; border:1px solid #dcdcde; border-radius:8px; box-sizing:border-box; }
.cotech-slider-settings-card h3 { margin:0 0 15px; font-size:16px; }
.cotech-field { margin-bottom:13px; }
.cotech-field:last-child { margin-bottom:0; }
.cotech-field label { display:block; margin-bottom:5px; font-weight:600; }
.cotech-field > div { display:flex; align-items:center; gap:7px; }
.cotech-field input[type="number"], .cotech-field input[type="text"] { width:110px; min-height:36px; }
.cotech-field input[type="text"] { width:100%; }
.cotech-field span { color:#646970; white-space:nowrap; }
.cotech-slider-general-card { margin-top:16px; }
.cotech-slider-general-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; align-items:end; }
.cotech-slider-toggle { display:flex; align-items:center; gap:8px; min-height:36px; font-weight:600; }
.cotech-slider-toggle input[type="checkbox"] { margin:0; }
@media(max-width:800px){ .cotech-responsive-settings-grid,.cotech-slider-general-grid{grid-template-columns:1fr;} }