/**
 * Cyber Mickey Social Share Main CSS
 */

.cm-social-share-buttons {
    display: grid;
    /*grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));*/
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}
/* Mobile: two columns */
@media (max-width: 767px) {
    .cm-social-share-buttons {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        grid-auto-flow: row;      /* override the desktop column flow */
        grid-auto-columns: auto;  /* no longer needed for column flow */
        gap: 10px;                /* adjust spacing as needed */
        justify-items: stretch;    /* center each button in its cell */
        align-items: center;
    }
    .cm-social-share-buttons > * {
        width: 80%;
        text-align: center;
    }
}
/* Flex layout default fallback when Auto columns selected */
.cm-share-cols-0- .cm-social-share-buttons,
.cm-share-cols-desktop-0- .cm-social-share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cm-share-gap-y, 10px) var(--cm-share-gap-x, 10px);
}

.cm-share-cols-0- .cm-share-button,
.cm-share-cols-desktop-0- .cm-share-button {
    flex: 0 1 auto;
}

/* Standard Responsive Columns CSS Grid */
.cm-share-cols-1- .cm-social-share-buttons, .cm-share-cols-desktop-1- .cm-social-share-buttons { grid-template-columns: repeat(1, 1fr); }
.cm-share-cols-2- .cm-social-share-buttons, .cm-share-cols-desktop-2- .cm-social-share-buttons { grid-template-columns: repeat(2, 1fr); }
.cm-share-cols-3- .cm-social-share-buttons, .cm-share-cols-desktop-3- .cm-social-share-buttons { grid-template-columns: repeat(3, 1fr); }
.cm-share-cols-4- .cm-social-share-buttons, .cm-share-cols-desktop-4- .cm-social-share-buttons { grid-template-columns: repeat(4, 1fr); }
.cm-share-cols-5- .cm-social-share-buttons, .cm-share-cols-desktop-5- .cm-social-share-buttons { grid-template-columns: repeat(5, 1fr); }
.cm-share-cols-6- .cm-social-share-buttons, .cm-share-cols-desktop-6- .cm-social-share-buttons { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1024px) {
    .cm-share-cols-tablet-0- .cm-social-share-buttons { display: flex; flex-wrap: wrap; }
    .cm-share-cols-tablet-1- .cm-social-share-buttons { grid-template-columns: repeat(1, 1fr); display: grid; }
    .cm-share-cols-tablet-2- .cm-social-share-buttons { grid-template-columns: repeat(2, 1fr); display: grid; }
    .cm-share-cols-tablet-3- .cm-social-share-buttons { grid-template-columns: repeat(3, 1fr); display: grid; }
    .cm-share-cols-tablet-4- .cm-social-share-buttons { grid-template-columns: repeat(4, 1fr); display: grid; }
    .cm-share-cols-tablet-5- .cm-social-share-buttons { grid-template-columns: repeat(5, 1fr); display: grid; }
    .cm-share-cols-tablet-6- .cm-social-share-buttons { grid-template-columns: repeat(6, 1fr); display: grid; }
}

@media (max-width: 767px) {
    .cm-share-cols-mobile-0- .cm-social-share-buttons { display: flex; flex-wrap: wrap; }
    .cm-share-cols-mobile-1- .cm-social-share-buttons { grid-template-columns: repeat(1, 1fr); display: grid; }
    .cm-share-cols-mobile-2- .cm-social-share-buttons { grid-template-columns: repeat(2, 1fr); display: grid; }
    .cm-share-cols-mobile-3- .cm-social-share-buttons { grid-template-columns: repeat(3, 1fr); display: grid; }
    .cm-share-cols-mobile-4- .cm-social-share-buttons { grid-template-columns: repeat(4, 1fr); display: grid; }
    .cm-share-cols-mobile-5- .cm-social-share-buttons { grid-template-columns: repeat(5, 1fr); display: grid; }
    .cm-share-cols-mobile-6- .cm-social-share-buttons { grid-template-columns: repeat(6, 1fr); display: grid; }
}

/* Alignment CSS */
.cm-share-align-left .cm-social-share-buttons,
.cm-share-align-desktop-left .cm-social-share-buttons { justify-content: flex-start; justify-items: start; }
.cm-share-align-center .cm-social-share-buttons,
.cm-share-align-desktop-center .cm-social-share-buttons { justify-content: center; justify-items: center; }
.cm-share-align-right .cm-social-share-buttons,
.cm-share-align-desktop-right .cm-social-share-buttons { justify-content: flex-end; justify-items: end; }
.cm-share-align-justify .cm-social-share-buttons,
.cm-share-align-desktop-justify .cm-social-share-buttons { justify-items: stretch; }

@media (max-width: 1024px) {
    .cm-share-align-tablet-left .cm-social-share-buttons { justify-content: flex-start; justify-items: start; }
    .cm-share-align-tablet-center .cm-social-share-buttons { justify-content: center; justify-items: center; }
    .cm-share-align-tablet-right .cm-social-share-buttons { justify-content: flex-end; justify-items: end; }
    .cm-share-align-tablet-justify .cm-social-share-buttons { justify-items: stretch; }
}

@media (max-width: 767px) {
    .cm-share-align-mobile-left .cm-social-share-buttons { justify-content: flex-start; justify-items: start; }
    .cm-share-align-mobile-center .cm-social-share-buttons { justify-content: center; justify-items: center; }
    .cm-share-align-mobile-right .cm-social-share-buttons { justify-content: flex-end; justify-items: end; }
    .cm-share-align-mobile-justify .cm-social-share-buttons { justify-items: stretch; }
}

/* Base Share Button */
.cm-share-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6em 1.2em;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 500;
    box-sizing: border-box;
    cursor: pointer;
    border: 2px solid transparent;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.cm-share-button:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

.cm-share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.cm-share-icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.cm-share-label {
    display: inline-block;
    margin-inline-start: 0.6em;
}

/* Shapes */
.cm-share-shape-square .cm-share-button { border-radius: 0; }
.cm-share-shape-rounded .cm-share-button { border-radius: 4px; }
.cm-share-shape-circle .cm-share-button { border-radius: 999px; }

.cm-share-shape-circle .cm-share-button:has(.cm-share-icon):not(:has(.cm-share-label)) {
    padding: 0.6em;
    width: 2.6em;
    height: 2.6em;
}

/* COLOR SYSTEM - Official vs Custom */
.cm-share-color-official .cm-share-button {
    --cm-primary: var(--cm-brand-color);
    --cm-secondary: var(--cm-brand-secondary);
}

.cm-share-color-custom .cm-share-button {
    --cm-primary: var(--cm-share-custom-primary, #333);
    --cm-secondary: var(--cm-share-custom-secondary, #fff);
}

/* SKINS IMPLEMENTATION */

/* 1. Minimal Skin */
.cm-share-skin-minimal .cm-share-button {
    background-color: transparent;
    color: var(--cm-primary);
}
.cm-share-skin-minimal .cm-share-button:hover {
    background-color: rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

/* 2. Framed Skin */
.cm-share-skin-framed .cm-share-button {
    background-color: transparent;
    color: var(--cm-primary);
    border-color: var(--cm-primary);
}
.cm-share-skin-framed .cm-share-button:hover {
    background-color: var(--cm-primary);
    color: var(--cm-secondary);
    transform: translateY(-2px);
}

/* 3. Boxed Icon Skin */
.cm-share-skin-boxed .cm-share-button {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--cm-primary);
    padding: 0;
    overflow: hidden;
}
.cm-share-skin-boxed .cm-share-icon {
    background-color: var(--cm-primary);
    color: var(--cm-secondary);
    padding: 0.8em;
}
.cm-share-skin-boxed .cm-share-label {
    padding: 0 1em;
    margin-inline-start: 0;
}
.cm-share-skin-boxed .cm-share-button:hover {
    background-color: var(--cm-primary);
    color: var(--cm-secondary);
    transform: translateY(-2px);
}

/* 4. Flat Skin */
.cm-share-skin-flat .cm-share-button {
    background-color: var(--cm-primary);
    color: var(--cm-secondary);
}
.cm-share-skin-flat .cm-share-button:hover {
    filter: brightness(0.9);
    transform: translateY(-2px);
}

/* 5. Gradient Skin */
.cm-share-skin-gradient .cm-share-button {
    background-image: linear-gradient(135deg, var(--cm-primary), #00000033);
    background-color: var(--cm-primary);
    color: var(--cm-secondary);
}
.cm-share-skin-gradient .cm-share-button:hover {
    filter: brightness(1.15);
    transform: translateY(-2px);
}