/* Default styles (Desktop) */

.card-container-prod,
.coupon-container-prod,
.stacked-block,
.spotad,
.wrap-body,
.banner-block,
.container-admat-detail,
.container-admat-detail-right,
.bnr-ad-kia,
.header,
.footer-container,
/* .fineprint-container, */
.wrap-body,
.banner-container,
.tile-container-grid {
    /* other styles */
    /* border: 1px solid #d1d1d1; */
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
}

/* Hover Effects for Cards */
.card-container-prod:hover,
.coupon-container-prod:hover,
.stacked-block:hover,
.spotad:hover,
.wrap-body:hover,
.banner-block:hover,
.container-admat-detail:hover,
.container-admat-detail-right:hover,
.bnr-ad-kia:hover,
.header:hover,
.bnr-fineprint-neg:hover,
.bnr-fineprint-pos:hover,
.footer-container:hover,
/* .fineprint-container:hover, */
.wrap-body:hover,
.banner-container:hover,
.tile-container-grid:hover {
    /* border: 1px dashed #666; */
}

/* CSS FOR CARD TOOLS */
[draggable="true"] {
    cursor: move;
}

/* ==================================================
  CARD TOOLS BACKGROUND
================================================== */

.card-tools-wrapper {
    position: absolute;
    top: -40px;
    right: 0;
    background: #fff;
    padding: 8px 12px;
    border-radius: 12px;
    display: none;
    gap: 8px;
    z-index: 100;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.card-tools-wrapper .change-colour-btn,
.card-tools-wrapper .change-size-btn,
.card-tools-wrapper .add-card,
.card-tools-wrapper .delete-card,
.card-tools-wrapper .margin-equal-btn,
.card-tools-wrapper .margin-top-btn,
.card-tools-wrapper .margin-bottom-btn {
    position: static;
    top: auto;
    right: auto;
    width: 22px;
    height: 22px;
    line-height: 22px;
    font-size: 11px;
}

.show-buttons .card-tools-wrapper {
    display: flex;
}

/* ==================================================
  BUTTONS CARD TOOLS
================================================== */

.add-card,
.delete-card,
.change-size-btn,
.change-colour-btn,
.delete-red,
.margin-equal-btn,
.margin-top-btn,
.margin-bottom-btn {
    display: none;
    position: absolute;
    width: 25px;
    height: 25px;
    background: #fff;
    color: #4ea5f2;
    border: 1px solid #4ea5f2;
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
    line-height: 25px;
    font-size: 12px;
    z-index: 100;
}

.delete-card {
    border: 1px solid #d60000;
    color: #d60000;
}

.add-card:hover,
.delete-card:hover,
.change-size-btn:hover,
.change-colour-btn:hover,
.margin-equal-btn:hover,
.margin-top-btn:hover,
.margin-bottom-btn:hover {
    background: #455eec;
    color: #fff;
    border-color: #455eec;
}

.delete-card:hover {
    background: #d60000;
    border-color: #d60000;
}

/* Legacy positioning for when buttons are not in the wrapper */
.change-size-btn {
    top: -30px;
    right: 0px;
}

.add-card {
    top: -30px;
    right: 35px;
}

.delete-card {
    top: -30px;
    right: 70px;
}

.change-colour-btn {
    top: -30px;
    right: 105px;
}

.show-buttons .add-card,
.show-buttons .delete-card,
.show-buttons .change-size-btn,
.show-buttons .change-colour-btn,
.show-buttons .margin-equal-btn,
.show-buttons .margin-top-btn,
.show-buttons .margin-bottom-btn {
    display: block;
}

/* ==================================================
  BUTTON CARD DELETE
================================================== */

.delete-card-main {
    display: none;
    height: 25px;
    background: #d60000;
    color: #fff;
    border: 1px solid #d60000;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    line-height: 25px;
    font-size: 12px;
    padding: 0px 16px 0px 10px;
}

.delete-card-main:hover {
    background: #fff;
    color: #d60000;
}

/* Make container-wrapper red when hovering over delete-card-main button */
.container-wrapper:hover .delete-card-main:hover ~ *,
.container-wrapper:hover .delete-card-main:hover + * {
    border: 2px solid #d60000 !important;
    transition: all 0.2s ease;
}

/* CSS class for delete hover effect */
.container-wrapper.delete-hover {
    border: 2px solid #d60000 !important;
    transition: all 0.2s ease;
}

/* Email card delete hover effect */
.email-container-wrapper.delete-hover {
    border: 2px solid #d60000 !important;
    transition: all 0.2s ease;
}

/* Tooltip styles for clickable-text */
.tooltip {
    position: absolute;
    background-color: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.tooltip.show {
    opacity: 1;
}

.tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
}

/* Individual card delete hover effect */
.card-prod.delete-hover,
.card-img.delete-hover,
.card-inc.delete-hover,
.tile-item.delete-hover,
.coupon-stacked.delete-hover,
.spotad-stacked.delete-hover,
.bnr-ad.delete-hover,
.column-block.delete-hover,
.column-alt.delete-hover,
.bnr-fineprint-neg.delete-hover,
.bnr-fineprint-pos.delete-hover,
.feature-2col.delete-hover,
.spotad.delete-hover,
.coupon-stacked-email.delete-hover {
    border: 2px solid #d60000 !important;
    transition: all 0.2s ease;
}

/* Image toolbar styles */
#imageControls {
    display: none;
    position: absolute;
    background: #ebecf0;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}

#imageControls.show {
    display: flex;
}

/* Override existing image-control styles to match text toolbar */
.image-control.image-controls {
    position: absolute !important;
    background: #ebecf0 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    padding: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    z-index: 1000 !important;
    display: none !important;
}

.image-control.image-controls.show {
    display: flex !important;
}

.image-control-btn {
    background: #10b981;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    min-width: 40px;
    justify-content: center;
}

.image-control-btn:hover {
    background: #059669;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.image-control-btn i {
    font-size: 16px;
}

.delete-card-main i {
    margin-left: 8px;
}

.movedown-card-main,
.moveup-card-main {
    display: none;
    height: 25px;
    background: #4ea5f2;
    color: #fff;
    border: 1px solid #4ea5f2;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    line-height: 25px;
    font-size: 12px;
    padding: 0 15px;
}

.movedown-card-main:hover,
.moveup-card-main:hover {
    background: #fff;
    color: #d60000;
}

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

.change-image-btn:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}

.drag-over {
    border: 2px dashed #000;
}

/* CSS FOR POSITIONING ON MAIN PAGE */

.thumb-prod,
.card-img,
.card-inc,
.card-prod,
.bnr-fineprint-neg,
.bnr-fineprint-pos,
.column-alt,
.container-leadin,
.additional-detail-item,
.column-inc,
.column-inc-alt,
.spotad,
.feature-2col,
.card-container-inc,
.column-block,
.coupon-stacked,
.spotad-stacked,
.bnr-ad-kia,
.tile-item {
    position: relative;
}

.placeholder-box {
    width: 100%;
    height: 365px;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-family: Arial, sans-serif;
    background-color: #fff;
}

button i {
    pointer-events: none;
}

/* ==================================================
  MEDIA QUERY: TABLETS & SMALLER DEVICES (991px and below)
================================================== */
/* @media screen and (max-width: 991px) {
    html {
        font-size: 14px;
    }

    .delete-card-main {
        margin-bottom: 4.5%;
    }

    .movedown-card-main {
        margin-bottom: 4.5%;
    }

    .moveup-card-main {
        margin-bottom: 4.5%;
    }
} */