/* ===============================
   Handset Card Overrides
   =============================== */

/* Make the handset header the positioning container */
.handset_item_top{
  position: relative !important;
  padding-top: 0 !important;
}

/* Merchant logo: top-right */
figure.handset_item_top_logo{
  position: absolute !important;
  top: 0 !important;
  right: 15px !important;

  width: 90px !important;
  margin: 0 !important;
  display: block !important;

  background: #ffffff;
  padding: 6px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

figure.handset_item_top_logo img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 6px;
}

/* Remove the thin divider line under header/logo */
.handset_item_top hr{
  display: none !important;
}

/* Remove bottom border line on the header wrapper */
.handset_uniq_wrap{
  border-bottom: none !important;
}

/* Reserve space on the right so title NEVER goes under logo */
.handset_item_top.handset_uniq_wrap .handset_title_wrapper{
  padding-right: 130px !important; /* 90px logo + padding + gap */
  box-sizing: border-box !important;
}

.handset_title_wrapper{
  outline: 2px solid red !important;
}

/* Prevent title text going under the logo */
.handset_item_top.handset_uniq_wrap .handset_title_wrapper{
  padding-right: 120px !important;
}

@media (max-width: 991px){
  .handset_item_top.handset_uniq_wrap .handset_title_wrapper > h5{
    background: yellow !important;
    color: #000 !important;
    font-size: 30px !important;
  }
}

@media (max-width: 991px){
  /* Reserve space for the logo */
  .handset_item_top.handset_uniq_wrap .handset_title_wrapper{
    padding-right: 150px !important;
    box-sizing: border-box !important;
    background: rgba(255,255,0,0.3) !important; /* TEMP: visible proof */
  }
}

@media (max-width: 991px){
  /* Keep the title from running under the top-right logo */
  .handset_item_top h5{
    padding-right: 15px !important;  /* space for 90px logo + padding */
    box-sizing: border-box !important;
    width: 100% !important;
  }
}

.deal_promo_info {
    width: 100%;
    display: block;
    margin: 12px 0;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
    background: #f3f7ff;
    border: 1px solid #dbe7ff;
    border-radius: 6px;
    color: #333;
    box-sizing: border-box;
    word-break: break-word;
}

.search-form input::placeholder {
    color: #999;
    opacity: 0.6;
}

.price_wrapper .price_icon {
    width: 18px !important;
    margin-left: 8px !important;
    cursor: pointer;
    animation: infoPulse 2.8s ease-in-out infinite;
    filter: brightness(0) saturate(100%) invert(46%) sepia(95%) saturate(2000%) hue-rotate(5deg) brightness(100%) contrast(102%);
}

/* orange arrow pointing to icon */
.price_wrapper .ext-popover::after {
    content: "‹";
    color: #FF7A00;
    font-size: 18px;
    margin-left: 6px;
    display: inline-block;
    animation: arrowMove 2.8s ease-in-out infinite;
}

@keyframes infoPulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.18);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* subtle arrow movement */
@keyframes arrowMove {
    0% { transform: translateX(0); opacity: 1; }
    50% { transform: translateX(-4px); opacity: 0.7; }
    100% { transform: translateX(0); opacity: 1; }
}

.bty_now_btn {
    padding: 12px 26px;
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.3px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
    transition: all 0.2s ease;
}

.bty_now_btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}

.ext-popover {
    position: relative;
    display: inline-block;
}

.price_icon {
    width: 18px;
    margin-left: 8px;
    cursor: pointer;
    animation: infoPulse 2.8s ease-in-out infinite;
    filter: brightness(0) saturate(100%) invert(46%) sepia(95%) saturate(2000%) hue-rotate(5deg) brightness(100%) contrast(102%);
}

@keyframes infoPulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.18);
        opacity: 0.75;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Tooltip wrapper */
.ext-popover {
    position: relative;
    display: inline-block;
}

/* Info icon */
.price_wrapper .price_icon,
.ext-popover .price_icon {
    width: 18px !important;
    margin-left: 8px !important;
    cursor: pointer;
    animation: infoPulse 2.8s ease-in-out infinite;
    filter: brightness(0) saturate(100%) invert(46%) sepia(95%) saturate(2000%) hue-rotate(5deg) brightness(100%) contrast(102%);
}

@keyframes infoPulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.14);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Tooltip wrapper */
.ext-popover {
    position: relative;
    display: inline-block;
}

/* Info icon */
.price_wrapper .price_icon,
.ext-popover .price_icon {
    width: 18px !important;
    margin-left: 8px !important;
    cursor: pointer;
}

/* Tooltip box */
.ext-popover-dropdown {
    position: absolute;
    right: 0;
    bottom: 34px;   /* show ABOVE the icon instead of below */
    z-index: 9999;

    width: 320px;   /* restore comfortable width */
    max-width: 92vw;

    background: #e9f1fb; /* restore light blue background */
    border-radius: 12px;
    box-shadow: 0 10px 22px rgba(0,0,0,0.15);

    padding: 14px 16px;
}

/* Remove internal scrolling */
.ext-popover-dropdown-scroll {
    overflow: visible !important;
    max-height: none !important;
}

/* Table layout */
.ext-popover-dropdown table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* Table rows */
.ext-popover-dropdown table tr {
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.ext-popover-dropdown table tr:last-child {
    border-bottom: none;
}

/* Table cells */
.ext-popover-dropdown table td {
    padding: 8px 0;
    vertical-align: middle;
}

/* Left column */
.ext-popover-dropdown table td:first-child {
    width: 45%;
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
}

/* Right column */
.ext-popover-dropdown table td:last-child {
    width: 55%;
    text-align: right;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
}

/* Monthly cost row highlight */
.ext-popover-dropdown table tr:nth-child(2) td:last-child {
    color: #1d4ed8;
    font-size: 16px;
    font-weight: 800;
}

/* Saving row label (same style as others) */
.ext-popover-dropdown table tr:nth-child(3) td:first-child {
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
}

/* Saving amount (highlighted) */
.ext-popover-dropdown table tr:nth-child(3) td:last-child {
    color: #ea580c;
    font-size: 14px;
    font-weight: 800;
}

/* Discount help text */
.ext-popover-dropdown p {
    margin-top: 10px;
    font-size: 12px;
    color: #4b5563;
    line-height: 1.4;
}

/* Link */
.ext-popover-dropdown a {
    color: #ea580c;
    font-weight: 700;
    text-decoration: none;
}

.ext-popover-dropdown a:hover {
    text-decoration: underline;
}

/* Mobile improvements */
@media (max-width: 767px) {

    .ext-popover-dropdown {
        width: 290px;
        right: -6px;
        bottom: 36px;
        padding: 12px 14px;
    }

    .ext-popover-dropdown table td:first-child {
        font-size: 12px;
    }

    .ext-popover-dropdown table td:last-child {
        font-size: 13px;
    }

    .ext-popover-dropdown table tr:nth-child(2) td:last-child {
        font-size: 15px;
    }

    .ext-popover-dropdown p {
        font-size: 11px;
    }

}