/* Rahat Addons - Icon Box styles (v2.1) */
.rahat-icon-box{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:12px; border-radius:10px; transition:box-shadow .2s ease; text-align:center; }
.rahat-icon-box:hover{ box-shadow:0 6px 18px rgba(0,0,0,0.08); }

/* Icon at top */
.rahat-icon-top .rahat-icon{ display:inline-block; line-height:1; }

.rahat-title{ margin:6px 0; font-weight:600; }
.rahat-desc{ margin:0 0 10px; }

/* Button styling */
.rahat-readmore{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:8px 14px; border-radius:6px; transition:all .3s ease; text-decoration:none; }

/* Icon defaults on the LEFT */
.rahat-readmore .rahat-button-icon{ display:inline-block; line-height:1; margin-right:6px; transition:margin .3s ease; }

/* Hide the text by default */
.rahat-readmore .rahat-button-text{ max-width:0; opacity:0; overflow:hidden; white-space:nowrap; transition:max-width .3s ease, opacity .2s ease; }

/* On hover over the card: reveal text and move icon to the RIGHT */
.rahat-icon-box:hover .rahat-readmore{ flex-direction:row-reverse; }
.rahat-icon-box:hover .rahat-readmore .rahat-button-text{ max-width:160px; opacity:1; }
.rahat-icon-box:hover .rahat-readmore .rahat-button-icon{ margin-right:0; margin-left:6px; }

/* Ensure SVG icons fill properly */
.rahat-icon, .rahat-button-icon{ fill: currentColor; }
.rahat-icon svg, .rahat-button-icon svg{ display:block; }


/* === Rahat Addons v1.1.4: Button + Read More animation === */
.rahat-icon-box .rahat-button-wrapper .rahat-button{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    position: relative;
    transition: all .3s ease-in-out;
}
/* default: show only icon on the left, hide text */
.rahat-icon-box .rahat-button-wrapper .rahat-button .read-more-text{
    max-width: 0;
    opacity: 0;
    transform: translateX(-8px);
    transition: all .3s ease-in-out;
    white-space: nowrap;
}
.rahat-icon-box .rahat-button-wrapper .rahat-button i,
.rahat-icon-box .rahat-button-wrapper .rahat-button .button-icon{
    transition: transform .3s ease-in-out;
}

/* on hover of icon box: reveal text (before icon) and slide icon to the right */
.rahat-icon-box:hover .rahat-button-wrapper .rahat-button .read-more-text{
    max-width: 200px; /* enough to reveal text */
    opacity: 1;
    transform: translateX(0);
    margin-right: 6px; /* ensure text sits before icon */
}
.rahat-icon-box:hover .rahat-button-wrapper .rahat-button i,
.rahat-icon-box:hover .rahat-button-wrapper .rahat-button .button-icon{
    transform: translateX(6px);
}
/* Make wrappers flexible to allow alignment controls to work */
.rahat-icon-box{ display:flex; flex-direction: column; }
.rahat-icon-box .rahat-icon{ display:flex; }
.rahat-icon-box .rahat-button-wrapper{ display:flex; }


/* Ensure wrappers use flex so alignment controls work */
.rahat-icon-box{ display:flex; flex-direction: column; }
.rahat-icon-box .rahat-icon{ display:flex; }
.rahat-icon-box .rahat-button-wrapper{ display:flex; }