/**
 * @file
 * Styles for Rise UP Custom module - Contact Your Senator Form.
 */

/* ========================================
   CONTACT YOUR SENATOR FORM STYLING
   ======================================== */

/* Page Background - Patriotic Theme */
.path-form.page-node-type-webform,
body.path-webform {
  background: linear-gradient(135deg, rgba(220, 230, 245, 0.3) 0%, rgba(245, 220, 220, 0.3) 100%);
  min-height: 100vh;
}

/* Form Container */
.webform-submission-contact-your-senator-add-form,
.contact-senator-form-wrapper {
  max-width: 750px;
  margin: 0 auto;
  padding: 40px 30px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Form Title */
.webform-submission-contact-your-senator-add-form h1,
.webform-submission-contact-your-senator-add-form .page-title,
.contact-senator-form-wrapper h1 {
  font-size: 1.75rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 15px;
  text-align: center;
  padding-bottom: 10px;
}

/* Sign in notice — replaces inline styles on the processed_text element */
.webform-sign-in-notice {
  text-align: center;
  font-size: 16px;
  margin-bottom: 20px;
  line-height: 1.6;
}

.webform-sign-in-link {
  color: red;
  text-decoration: underline;
}

.webform-sign-in-link:hover {
  color: darkred;
}

/* Sign in message */
.webform-submission-contact-your-senator-add-form .webform-description,
.webform-submission-contact-your-senator-add-form .description,
.webform-submission-contact-your-senator-add-form .form-description {
  font-size: 14px;
  color: #666;
  margin-bottom: 30px;
  text-align: center;
  line-height: 1.6;
}

.webform-submission-contact-your-senator-add-form .webform-description a,
.webform-submission-contact-your-senator-add-form .form-description a {
  color: #dc3545;
  text-decoration: none;
  font-weight: 500;
}

.webform-submission-contact-your-senator-add-form .webform-description a:hover,
.webform-submission-contact-your-senator-add-form .form-description a:hover {
  text-decoration: underline;
}

/* Form Elements Container */
.webform-submission-contact-your-senator-add-form .webform-flex,
.webform-submission-contact-your-senator-add-form .js-form-wrapper {
  display: block;
  margin-bottom: 0;
}

/* Form Items - General Spacing */
.webform-submission-contact-your-senator-add-form .form-item,
.webform-submission-contact-your-senator-add-form .js-form-item {
  margin-bottom: 18px;
}

/* Two Column Layout for Name Fields */
.webform-submission-contact-your-senator-add-form .form-item-name-prefix {
  display: inline-block;
  width: 30%;
  margin-right: 3%;
  vertical-align: top;
}

.webform-submission-contact-your-senator-add-form .form-item-first-name {
  display: inline-block;
  width: 67%;
  vertical-align: top;
}

.webform-submission-contact-your-senator-add-form .form-item-last-name,
.webform-submission-contact-your-senator-add-form .form-item-las {
  display: block;
  width: 100%;
}

/* Email Field - Full Width */
.webform-submission-contact-your-senator-add-form .form-item-email {
  display: block;
  width: 100%;
}

/* Two Column Layout for Phone Fields */
.webform-submission-contact-your-senator-add-form .form-item-country-code {
  display: inline-block;
  width: 30%;
  margin-right: 3%;
  vertical-align: top;
}

.webform-submission-contact-your-senator-add-form .form-item-phone {
  display: inline-block;
  width: 67%;
  vertical-align: top;
}

/* Address Fields - Full Width */
.webform-submission-contact-your-senator-add-form .form-item-address,
.webform-submission-contact-your-senator-add-form .form-item-address-2 {
  display: block;
  width: 100%;
}

/* Two Column Layout for City/State */
.webform-submission-contact-your-senator-add-form .form-item-city {
  display: inline-block;
  width: 48.5%;
  margin-right: 3%;
  vertical-align: top;
}

.webform-submission-contact-your-senator-add-form .form-item-state-province {
  display: inline-block;
  width: 48.5%;
  vertical-align: top;
}

/* Two Column Layout for ZIP/Country */
.webform-submission-contact-your-senator-add-form .form-item-postal-code {
  display: inline-block;
  width: 48.5%;
  margin-right: 3%;
  vertical-align: top;
}

.webform-submission-contact-your-senator-add-form .form-item-country {
  display: inline-block;
  width: 48.5%;
  vertical-align: top;
}

/* Form Labels */
.webform-submission-contact-your-senator-add-form label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 6px;
}

.webform-submission-contact-your-senator-add-form label .form-required {
  color: #dc3545;
  margin-left: 2px;
}

/* Form Inputs */
.webform-submission-contact-your-senator-add-form input[type="text"],
.webform-submission-contact-your-senator-add-form input[type="email"],
.webform-submission-contact-your-senator-add-form input[type="tel"],
.webform-submission-contact-your-senator-add-form select {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 4px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.webform-submission-contact-your-senator-add-form input[type="text"]:focus,
.webform-submission-contact-your-senator-add-form input[type="email"]:focus,
.webform-submission-contact-your-senator-add-form input[type="tel"]:focus,
.webform-submission-contact-your-senator-add-form select:focus {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Select Dropdowns */
.webform-submission-contact-your-senator-add-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 35px;
}

/* Helper Text */
.webform-submission-contact-your-senator-add-form .description,
.webform-submission-contact-your-senator-add-form .help-block {
  font-size: 12px;
  color: #6c757d;
  margin-top: 5px;
  font-style: italic;
}

/* Submit Button */
.webform-submission-contact-your-senator-add-form .form-actions {
  margin-top: 25px;
  text-align: center;
}

.webform-submission-contact-your-senator-add-form .webform-button--submit,
.webform-submission-contact-your-senator-add-form button[type="submit"],
.webform-submission-contact-your-senator-add-form input[type="submit"] {
  background-color: #1e3a8a;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 40px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
  transition: background-color 0.2s ease;
  min-width: 150px;
}

.webform-submission-contact-your-senator-add-form .webform-button--submit:hover,
.webform-submission-contact-your-senator-add-form button[type="submit"]:hover,
.webform-submission-contact-your-senator-add-form input[type="submit"]:hover {
  background-color: #1e40af;
}

.webform-submission-contact-your-senator-add-form .webform-button--submit:active,
.webform-submission-contact-your-senator-add-form button[type="submit"]:active,
.webform-submission-contact-your-senator-add-form input[type="submit"]:active {
  background-color: #1e3a8a;
  transform: translateY(1px);
}

/* Error Messages */
.webform-submission-contact-your-senator-add-form .form-item--error-message,
.webform-submission-contact-your-senator-add-form .error {
  color: #dc3545;
  font-size: 13px;
  margin-top: 5px;
}

.webform-submission-contact-your-senator-add-form .form-item--error input,
.webform-submission-contact-your-senator-add-form .form-item--error select {
  border-color: #dc3545;
}

/* Responsive Design */
@media (max-width: 768px) {
  /* Reset ALL form items to full-width single column.
     Must use !important to override the desktop inline-block/width rules. */
  .webform-submission-contact-your-senator-add-form .fieldset-wrapper .form-item,
  .webform-submission-contact-your-senator-add-form .form-item-name-prefix,
  .webform-submission-contact-your-senator-add-form .form-item-first-name,
  .webform-submission-contact-your-senator-add-form .form-item-last-name,
  .webform-submission-contact-your-senator-add-form .form-item-country-code,
  .webform-submission-contact-your-senator-add-form .form-item-phone,
  .webform-submission-contact-your-senator-add-form .form-item-city,
  .webform-submission-contact-your-senator-add-form .form-item-state-province,
  .webform-submission-contact-your-senator-add-form .form-item-postal-code,
  .webform-submission-contact-your-senator-add-form .form-item-country {
    display: block !important;
    width: 100% !important;
    margin-right: 0 !important;
  }

  /* Override specific-field width rules that also use !important */
  .webform-submission-contact-your-senator-add-form .fieldset-wrapper > .form-item.form-item-name-prefix,
  .webform-submission-contact-your-senator-add-form .fieldset-wrapper .custom_country_code,
  .webform-submission-contact-your-senator-add-form .fieldset-wrapper .webform_custom_phone_field.form-item,
  .webform-submission-contact-your-senator-add-form .fieldset-wrapper .form-item.form-item-first-name {
    width: 100% !important;
  }

  /* Ensure webform address sub-fields (city/state/zip/country) stack too */
  .webform-submission-contact-your-senator-add-form .webform-address .form-item {
    display: block !important;
    width: 100% !important;
    margin-right: 0 !important;
  }

  /* Reduce form padding on small screens */
  .webform-submission-contact-your-senator-add-form {
    padding: 20px 15px;
  }
}

/* ========================================
   ADDITIONAL CUSTOM STYLES
   ======================================== */

.riseup-custom-container {
  padding: 20px;
  margin: 20px 0;
}

.riseup-custom-example {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 15px;
}

.riseup-custom-example h2 {
  color: #333;
  margin-top: 0;
}

.riseup-custom-example p {
  color: #666;
  line-height: 1.6;
}

.riseup-custom-button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.riseup-custom-button:hover {
  background-color: #0056b3;
}

.riseup-custom-message {
  padding: 10px;
  margin: 10px 0;
  border-radius: 4px;
}

.riseup-custom-message.success {
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
}

.riseup-custom-message.error {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}

.riseup-custom-message.info {
  background-color: #d1ecf1;
  border: 1px solid #bee5eb;
  color: #0c5460;
}
.contact-senator-form-wrapper{
    max-width: 100% !important;
    padding: 0px !important;
    box-shadow: none !important;
    border-radius: 0px !important;
    margin: 0px !important;
}
/* Desktop-only 2-column form layout.
   Wrapped in min-width so mobile media query (max-width: 768px) can override it. */
@media (min-width: 769px) {
  .webform-submission-contact-your-senator-add-form .fieldset-wrapper .form-item {
    width: 49.6% !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 10px 8px !important;
    vertical-align: top !important;
  }
  .webform-submission-contact-your-senator-add-form .fieldset-wrapper > .form-item.form-item-name-prefix {
    width: 20% !important;
  }
  .webform-submission-contact-your-senator-add-form .fieldset-wrapper .custom_country_code {
    width: 119px !important;
  }
  .webform-submission-contact-your-senator-add-form .fieldset-wrapper .webform_custom_phone_field.form-item {
    width: 31% !important;
  }
  .webform-submission-contact-your-senator-add-form .fieldset-wrapper .form-item.form-item-first-name {
    width: 28% !important;
  }
}
.webform-submission-contact-your-senator-add-form #edit-address--wrapper {
  width: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0px !important;
}
.webform-submission-contact-your-senator-add-form .description {
  margin: 0px !important;
  text-align: left !important;
}

/* take action css start */
.emailthemhed {
    text-align: center;
    margin: 25px 0px 0px 0px;
    margin-bottom: 30px;
}

.listing-users {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.list_user65 {
    width: 20%;
}

.user_information87 {
    display: flex;
    margin: 18px;
    flex-direction: column;
}

.user_information87 {
    display: flex;
    margin: 10px;
}

.listing-users .list_user65 .user_information87 {
    border: 1px solid #d5d5d5;
    padding: 10px;
    border-radius: 3px;
}

.user_pic65 {
    width: 170px;
    height: 170px;
    object-fit: contain;
}

img.user_pic65 {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    object-position: center top;
    border-radius: 3px;
}

.listing-users .list_user65:only-child {
    width: auto;
    max-width: 260px;
}

.listing-users .list_user65:only-child .user_pic65 {
    width: 220px;
    height: 220px;
}
.user_image45_profil{
  text-align: center;
}
.user_name_info {
    margin-top: 20px;
    text-align: center;
}

.user_name_info p {
    font-size: 16px;
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
    max-width: 100%;
}
.user_name_info p{
  margin:0px !important;
}

.content.block-content p {
    color: #000 !important;
    font-size: 15px;
}

.chek_green {
    width: 25px;
    height: 25px;
    object-fit: contain;
}

/* Social Action Tabs Styling */
.social-action {
    margin-bottom: 80px;
}

.social-action-tabs {
    background: #f8f9fa;
    border-bottom: 3px solid #242c64;
    padding: 10px 20px;
    margin-bottom: 30px;
    border-radius: 8px 8px 0 0;
}

.social-action-tabs .nav-item {
    margin-right: 10px;
}

.social-action-tabs .nav-link {
    color: #6c757d;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 12px 24px;
    font-weight: 500;
    font-size: 16px;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.social-action-tabs .nav-link:hover {
    color: #242c64;
    background: rgba(36, 44, 100, 0.05);
    border-radius: 6px;
}

.social-action-tabs .nav-link.active {
    color: #242c64;
    background: white;
    border-bottom: 3px solid #242c64;
    border-radius: 6px 6px 0 0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.social-action-tabs .nav-link i {
    font-size: 18px;
}

.social-action-tabs .tab-label {
    font-weight: 600;
}

/* Tab Content */
.tab_data_div {
    animation: fadeIn 0.3s ease-in;
    padding-bottom: 100px;
}

.tab_data_div .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Sticky-until-footer bottom navigation. The bar sits in normal flow at
   the very end of .maindiv, but `position: sticky; bottom: 0` keeps it
   pinned to the viewport bottom while the parent (.maindiv) is in view.
   When the user scrolls to where .maindiv ends, the bar releases and
   sits naturally above the footer — no JS, no flicker. The viewport-
   width breakout keeps the full-width look despite the bar living
   inside a Bootstrap container. */
.fixed-button.opentwitter {
    position: sticky;
    bottom: 0;
    background: #fff;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    z-index: 999;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
}

.fixed-button.opentwitter.listing-users-floating {
    padding: 0 20%;
}

.fixed-button.opentwitter .container-sm {
    border-top: 2px solid #e9e9e9 !important;
    padding: 15px 20px;
}

.botton-btn-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.left-buttons {
    display: flex;
    gap: 12px;
    align-items: center;
}

.right-buttons {
    display: flex;
    gap: 12px;
    align-items: center;
}

.btn-first, .btn-second {
    display: inline-block;
}

.btn-first button,
.btn-second button {
    margin: 0;
}

.confirm-btn {
    display: inline-block;
}

.confirm-btn button,
.confirm-btn a {
    margin: 0;
}

/* Button Styling */
.btn-back-tab,
.btn-back-page,
.btn-skip-tab {
    outline: none !important;
    min-width: 120px !important;
    height: 48px;
    padding: 12px 24px !important;
    border: 2px solid #6c757d !important;
    background: white !important;
    color: #495057 !important;
    font-weight: 600;
    font-size: 15px;
    border-radius: 6px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-back-tab:hover,
.btn-back-page:hover,
.btn-skip-tab:hover {
    background: #f8f9fa !important;
    border-color: #242c64 !important;
    color: #242c64 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-back-tab i {
    font-size: 14px;
}

.btn-skip-tab i {
    font-size: 14px;
}

.btn-confirm,
.confirm-btn button,
.confirm-btn a {
    background-color: #242c64 !important;
    color: white !important;
    outline: none !important;
    min-width: 120px !important;
    height: 48px;
    padding: 12px 24px !important;
    border: 2px solid #242c64 !important;
    font-weight: 600;
    font-size: 15px;
    border-radius: 6px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
}

.btn-confirm:hover,
.confirm-btn button:hover,
.confirm-btn a:hover {
    background-color: #1a2350 !important;
    border-color: #1a2350 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(36, 44, 100, 0.3);
}

.btn-confirm i,
.confirm-btn button i,
.confirm-btn a i {
    font-size: 14px;
}

/* Voice Call Styling */
.js_inform_call_detail {
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 8px;
    margin-bottom: 10px;
}

.js_inform_call_detail:hover {
    background: #f8f9fa;
    transform: translateX(5px);
}

.js_inform_call_detail.active {
    background: #e7f3ff;
    border-left: 4px solid #242c64;
}

.js_inform_call_detail.completed {
    opacity: 0.6;
    background: #d4edda;
}

.js_inform_call_detail.completed::after {
    content: '\f00c';
    font-family: 'FontAwesome';
    color: #28a745;
    margin-left: 10px;
}

.js_active_on_call67 {
    animation: slideIn 0.3s ease-in;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Message Sections */
.message-head {
    margin-bottom: 30px;
    padding: 0 20px;
}

.cstm-heading {
    color: #242c64;
    font-weight: 700;
    font-size: 28px;
    margin-bottom: 15px;
    text-align: center;
}

.cstm-sub-heading {
    color: #6c757d;
    font-size: 16px;
    line-height: 1.6;
    text-align: center;
}

.messag-body {
    padding: 0 20px;
}

.mb-20 {
    margin-bottom: 20px;
}

.center_email_border {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.detail_subject {
    margin-bottom: 20px;
}

.head_sub_jext {
    font-weight: 600;
    color: #242c64;
    margin-bottom: 10px;
    font-size: 16px;
}

.email_messages_detail {
    background: white;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #dee2e6;
    line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .social-action-tabs {
        padding: 5px 10px;
    }

    .social-action-tabs .nav-link {
        padding: 10px 15px;
        font-size: 14px;
    }

    .fixed-button.opentwitter.listing-users-floating {
        padding: 0;
    }

    .fixed-button.opentwitter .container-sm {
        padding: 10px 12px;
    }

    .botton-btn-box {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 12px;
    }

    .left-buttons,
    .right-buttons {
        width: auto;
        justify-content: flex-start;
    }

    .btn-first,
    .confirm-btn {
        flex: 0 1 auto;
    }

    .btn-back-tab,
    .btn-skip-tab,
    .btn-confirm,
    .btn-first button,
    .btn-first a,
    .confirm-btn button,
    .confirm-btn a {
        width: auto !important;
        min-width: auto !important;
        padding: 10px 18px !important;
        font-size: 14px;
        white-space: nowrap;
    }

    .cstm-heading {
        font-size: 22px;
    }
}

/* Voice Call Tab Styling */
.phone_call_contain54 {
    max-width: 900px;
    margin: 0 auto 30px;
}

.phone_call_detail87 {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.phon_call_person65 {
    padding: 0;
}

.inform_call_detail {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e9ecef;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
}

.inform_call_detail:last-child {
    border-bottom: none;
}

.inform_call_detail:hover {
    background: #f8f9fa;
    transform: translateX(5px);
}

.inform_call_detail.active {
    background: #e7f3ff;
    border-left: 4px solid #242c64;
}

.inform_call_detail.completed {
    background: #d4edda;
    opacity: 0.8;
}

.first_letter65 {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

.first_letter65 .official_photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.person_detai98 {
    flex: 1;
}

.person_name_detail89 {
    font-size: 16px;
    font-weight: 600;
    color: #212529;
    margin: 0;
}

.active_show32 {
    margin-left: auto;
    padding-left: 15px;
}

.back_action_arrow {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid #6c757d;
    border-bottom: 2px solid #6c757d;
    transform: rotate(-45deg);
    transition: all 0.3s ease;
}

.inform_call_detail:hover .back_action_arrow {
    border-color: #242c64;
    transform: rotate(-45deg) translateX(3px);
}

/* Active Call Details — always visible, stacked list */
.js_active_on_call67 {
    display: block;
    margin-bottom: 12px;
}

.js_active_on_call67.completed .active_perso_deta {
    opacity: 0.6;
    border-color: #28a745;
    background: #f6fff8;
}

.js_active_on_call67.no-selected .active_perso_deta {
    /* border-color: #dc3545; */
    background: #fff8f8;
}

.active_perso_deta {
    background: white;
    border-radius: 8px;
    padding: 16px 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 2px solid #242c64;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.act_ive54_de5 {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 160px;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.act98_first {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

.act98_first .official_photo_large {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.dety_ikl76 {
    flex: 1;
}

.desi-nayu67 {
    font-size: 14px;
    color: #6c757d;
    margin: 0 0 5px 0;
    font-weight: 500;
}

.name34_peron {
    font-size: 20px;
    font-weight: 700;
    color: #212529;
    margin: 0;
}

.contact_number98 {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    flex: 1;
    min-width: 160px;
    margin-bottom: 0;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

.contact_number98:hover {
    background: linear-gradient(135deg, #218838 0%, #1aa179 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(40, 167, 69, 0.4);
    color: white;
    text-decoration: none;
}

.phone_icon43 {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    filter: brightness(0) invert(1);
}

.con_tact_num {
    font-size: 20px;
    letter-spacing: 1px;
}

.call-actions-right {
    flex: 1;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.send_tweet65 {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #495057;
    margin: 0;
}

.call-confirm-btns {
    display: flex;
    gap: 10px;
    justify-content: center;
    width: 100%;
}

.call-confirm-btns a {
    flex: 1;
    max-width: 120px;
    padding: 10px 14px;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
}

/* Default (neutral) — both buttons outlined only */
.call-confirm-btns a:first-child {
    background: white;
    border: 2px solid #dc3545;
    color: #dc3545;
}

.call-confirm-btns a:last-child {
    background: white;
    border: 2px solid #6c757d;
    color: #6c757d;
}

/* No selected state — No = Red filled, Yes = Gray outlined */
.call-confirm-btns.call-no-selected a:first-child {
    background: #dc3545;
    border-color: #dc3545;
    color: white;
    box-shadow: 0 3px 8px rgba(220, 53, 69, 0.35);
}

.call-confirm-btns.call-no-selected a:last-child {
    background: white;
    border-color: #6c757d;
    color: #6c757d;
    box-shadow: none;
}

/* Yes confirmed state — Yes = Green filled, No = Gray outlined */
.call-confirm-btns.call-confirmed a:first-child {
    background: white;
    border-color: #6c757d;
    color: #6c757d;
    box-shadow: none;
}

.call-confirm-btns.call-confirmed a:last-child {
    background: #28a745;
    border: 2px solid #28a745;
    color: white;
    box-shadow: 0 3px 8px rgba(40, 167, 69, 0.35);
}

.call-confirm-btns.call-confirmed a:last-child:hover {
    background: #218838;
    border-color: #218838;
    transform: translateY(-2px);
}

.call-confirm-btns img {
    width: 20px;
    height: 20px;
}

/* Suggested Script Section */
/* .suggest_part56 {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 25px;
    margin-top: 30px;
    border-left: 4px solid #242c64;
} */

.suggest_part_cont43 {
    max-width: 100%;
}

.head98_suggest {
    color: #242c64;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 15px 0;
}

.para65_suggest {
    color: #495057;
    line-height: 1.8;
    margin: 0;
}

.fontfamily-robo {
    font-family: 'Roboto', Arial, sans-serif;
}

.fontsize18 {
    font-size: 18px;
}

.line-height {
    line-height: 1.8;
}

/* Responsive Voice Call */
@media (max-width: 768px) {
    .phone_call_contain54 {
        padding: 0 10px;
    }

    .inform_call_detail {
        padding: 12px 15px;
    }

    .first_letter65 {
        width: 40px;
        height: 40px;
        margin-right: 12px;
    }

    .first_lett_name34 {
        font-size: 18px;
    }

    .person_name_detail89 {
        font-size: 14px;
    }

    .active_perso_deta {
        padding: 14px 12px;
        flex-direction: column;
        align-items: stretch;
    }

    .act_ive54_de5 {
        min-width: auto;
    }

    .act98_first {
        width: 50px;
        height: 50px;
    }

    .name34_peron {
        font-size: 16px;
    }

    .contact_number98 {
        min-width: auto;
        padding: 12px 16px;
        font-size: 15px;
    }

    .con_tact_num {
        font-size: 16px;
    }

    .call-actions-right {
        min-width: auto;
        width: 100%;
    }

    .call-confirm-btns a {
        max-width: 100%;
        flex: 1;
    }

    .suggest_part56 {
        padding: 20px 15px;
    }

    .head98_suggest {
        font-size: 18px;
    }

    .fontsize18 {
        font-size: 16px;
    }
}

/* ── /social/actions page – responsive ──────────────────────────────────── */
@media (max-width: 768px) {

    /* Tab content: increase bottom padding so content isn't hidden behind the
       fixed bottom bar, which stacks to ~136px tall on mobile. */
    .tab_data_div {
        padding-bottom: 160px;
    }

    /* Reduce section padding so content has more horizontal room */
    .message-head {
        padding: 0 12px;
        margin-bottom: 20px;
    }

    .messag-body {
        padding: 0 12px;
    }

    /* Sub-heading: scale down on small screens */
    .cstm-sub-heading {
        font-size: 14px;
    }

    /* Email content box */
    .center_email_border {
        padding: 14px 12px;
    }

    .email_messages_detail {
        padding: 10px 12px;
        font-size: 14px;
    }

    .head_sub_jext {
        font-size: 14px;
        margin-bottom: 6px;
    }

    .detail_subject {
        margin-bottom: 14px;
    }

    /* Tabs: allow wrapping on very small screens */
    .social-action-tabs {
        flex-wrap: wrap;
    }

    .social-action-tabs .nav-item {
        margin-right: 5px;
        margin-bottom: 4px;
    }

    .social-action-tabs .nav-link {
        padding: 8px 14px;
    }

    /* Voice call list */
    .phone_call_contain54 {
        margin-bottom: 20px;
    }

    /* Prevent horizontal scroll from hover transforms on mobile */
    .js_inform_call_detail:hover,
    .inform_call_detail:hover {
        transform: none;
    }

    /* Script/suggest section */
    .suggest_part56 {
        margin-top: 20px;
        margin-bottom: 160px; /* same as tab_data_div bottom clearance */
    }
}

/* Extra-small screens (phone ≤ 480px) */
@media (max-width: 480px) {
    .tab_data_div {
        padding-bottom: 170px;
    }

    .message-head {
        padding: 0 8px;
    }

    .messag-body {
        padding: 0 8px;
    }

    .center_email_border {
        padding: 10px 8px;
    }

    /* Tabs: stack vertically if very narrow */
    .social-action-tabs .nav-link .tab-label {
        font-size: 13px;
    }

    /* Call confirm buttons full-width on tiny screens */
    .call-confirm-btns {
        flex-direction: column;
        gap: 10px;
    }

    .call-confirm-btns a {
        max-width: 100%;
        width: 100%;
    }
}

/* ── /take/action page – responsive ─────────────────────────────────────── */

/* Tablet: 3 cards per row */
@media (max-width: 900px) {
    .list_user65 {
        width: 33.33%;
    }

    .fixed-button.opentwitter.listing-users-floating {
        padding: 0 5%;
    }
}

/* Mobile: 2 cards per row */
@media (max-width: 576px) {
    /* Header section */
    .emailthemhed {
        margin: 15px 0 20px;
        padding: 0 12px;
    }

    .container_main_head67 {
        padding: 0 10px;
    }

    .head_ing56_ontop {
        font-size: 26px !important;
        line-height: 1.2;
        margin-bottom: 8px;
    }

    .para_ontop98_text {
        font-size: 15px !important;
        line-height: 1.5;
    }

    /* Legislator grid – 2 per row */
    .list_user65 {
        width: 50%;
    }

    .user_information87 {
        margin: 6px;
        padding: 8px;
    }

    .listing-users .list_user65 .user_information87 {
        padding: 8px 6px;
    }

    img.user_pic65 {
        width: 100%;
    }

    .user_name_info {
        margin-top: 10px;
    }

    .user_name_info p {
        font-size: 13px;
    }

    .fixed-button.opentwitter .container-sm {
        padding: 10px 15px;
    }
}

/* take action css end */